Web项目发布 采用gulp压缩 JS CSS CSHTML ASPX HTML Image 给JS CSS自动添加版本号 强制浏览器刷新缓存

最近研究了一下如何通过gulb对JS CSS HTML Image 文件压缩优化和JS CSS自动添加版本号，整理成文供大家参考！

做Web项目经常遇到JS CSS更新后，客户端看不到效果，特别是在移动端APP内嵌网页的场景，苹果用户需要划掉APP重新打开 相对简单，安卓用户需要上设置里面手动清理APP缓存 难度较高好多人不会。

注：本工程项目已配置完成，只需完成前2个步骤即可跳跃到第7个步骤 直接运行任务

工程项目文件请前往CSDN免费下载：http://download.csdn.net/detail/liuyonghong159632/9905272

主要流程：

1、安装nodejs

2、全局安装gulp

3、准备项目结构

4、配置package.json文件

5、项目结构中安装gulp以及相关功能插件

6、配置gulpfile.js文件

7、运行配置文件中的任务

1、安装nodejs：

2、全局安装gulp：

由于gulp是基于nodejs所以先安装运行环境，具体安装方法请参考如下链接：

http://www.ydcss.com/archives/18

3、准备项目结构：

网上的方法都是针对把gulp及相关插件直接安装到编译发布出来的工程文件内部进行操作，当工程文件结构比较混乱或者比较复杂的时候需要做N多配置（比如工程根目录有好多文件夹 每个文件夹都有JS CSS HTML文件 需要配置若干个路径去读取文件压缩以及输出 工程文件复杂到一定程度此方案几乎就不可行了）

本文的思路是以完整的工程文件作为压缩优化的单位，只需要指定对应的工程文件夹名字，即可完成压缩优化版本号替换工作，然后直接将工程文件发布到服务器。 

1、C盘新建文件夹：Projects_Publish （所有项目编译发布到此文件夹根目录 ）

2、新建package.json文件（gulp运行相关配置文件）     

3、新建gulpfile.js文件      （gulp运行任务的工程文件）

项目结构概览图：具体文件请移步CSDN免费下载

4、配置package.json文件：

{
  "name": "项目压缩优化",
  "version": "1.0.0",
  "description": "JS CSS HTML CSHTML ASPX Image压缩优化 JS CSS添加版本号!",
  "homepage": "",
  "repository": {
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {
    "name": "IceFrog",
    "email": "412059265@qq.com"
  },
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-asset-rev": "0.0.15",
    "gulp-clean-css": "^3.7.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.3.0",
    "gulp-less": "^3.0.0",
    "gulp-make-css-url-version": "0.0.13",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.2.2",
    "gulp-uglify": "^3.0.0",
    "run-sequence": "^2.0.0"
  }
}

5、项目结构中安装gulp以及相关功能插件:

npm install gulp --save-dev

npm install gulp-asset-rev --save-dev

npm install run-sequence --save-dev

npm install gulp-rev --save-dev

npm install gulp-rev-collector --save-dev //用于替换H5页面中引用的js css 文件 替换成带版本号的

npm install gulp-minify-css --save-dev   //用于压缩CSS文件

npm install gulp-uglify --save-dev            //用于JS压缩 

npm install gulp-rename --save-dev        //用于js css 文件压缩后添加对应的后缀.min 

npm install gulp-imagemin --save-dev     //用于图片压缩 npm install gulp-imagemin --save-dev

npm install gulp-htmlmin --save-dev        //用于压缩HTML

6、配置gulpfile.js文件：

//注：引用前先将对于插件安装到当前项目路径
//引入gulp和gulp插件
var gulp = require('gulp');                   //安装插件到当前项目路径：npm install gulp --save-dev
var assetRev = require('gulp-asset-rev');     //安装插件：npm install gulp-asset-rev --save-dev
var runSequence = require('run-sequence');    //安装插件：npm install run-sequence --save-dev
var rev = require('gulp-rev');                //安装插件：npm install gulp-rev --save-dev
var revCollector = require('gulp-rev-collector');//npm install gulp-rev-collector --save-dev //用于替换H5页面中引用的js css 文件 替换成带版本号的
var cssmin = require('gulp-minify-css');         //npm install gulp-minify-css               //用于压缩CSS文件
var uglify = require('gulp-uglify');             //npm install gulp-uglify --save-dev        //用于JS压缩 
var rename = require('gulp-rename');             //npm install gulp-rename --save-dev        //用于js css 文件压缩后添加对应的后缀.min 
var imagemin = require('gulp-imagemin');         //npm install gulp-imagemin --save-dev      //用于图片压缩 npm install gulp-imagemin --save-dev
var htmlmin = require('gulp-htmlmin');           //npm install gulp-htmlmin --save-dev       //用于压缩HTML
var projectname="projects"; //当前路径下需要打包压缩的项目对应的文件名  以下针对此工程文件的所有 JS CSS H5 Image 进行相应操作 以便忽略项目结构的复杂性
注意：将所有项目发布到Projects_Publish文件夹根目录，需要压缩优化哪个项目 此处的“projects”名字改成哪个项目名称即可。
//定义css、js源文件路径
var cssSrc = projectname+'/**/*.css';
var jsSrc  = projectname+'/**/*.js';
var imgSrc = projectname+'/**/*.{png,jpg,gif,ico}';
var htmlSrc=projectname+'/**/*.html';
var cshtmlSrc=projectname+'/**/*.cshtml';
var aspxSrc=projectname+'/**/*.aspx';
var mainfest_BasePath=projectname+'/MainFest';
var mainfest_FullPath=mainfest_BasePath+'/**/*.json';
var manifest_JS=mainfest_BasePath+'/js';
var manifest_CSS=mainfest_BasePath+'/css';
var manifest_Image=mainfest_BasePath+'/image';

//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
    return gulp.src(cssSrc)   //该任务针对的文件
      .pipe(assetRev())  //该任务调用的模块
      .pipe(gulp.dest(projectname)); //编译后的路径
});

//压缩css
gulp.task('cssMin', function() {
    return gulp.src(cssSrc)      //压缩的文件	
        .pipe(cssmin())  //执行压缩
        .pipe(gulp.dest(projectname));   //输出文件夹
});

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
    return gulp.src(cssSrc)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest(manifest_CSS));
});

//压缩js
gulp.task('uglify',function(){
    return gulp.src(jsSrc)
      //.pipe(rename({suffix: '.min'})) 针对生成好的项目原则上没必要重新生成带min的文件 会导致引用的版本不一致  直接在源文件上压缩发布即可
      .pipe(uglify())
      .pipe(gulp.dest(projectname));
});

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
    return gulp.src(jsSrc)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest(manifest_JS));
});

//压缩html
gulp.task('htmlMin',function(){
    var options = {
        collapseWhitespace:true,   //从字面意思应该可以看出来，清除空格，压缩html，这一条比较重要，作用比较大，引起的改变压缩量也特别大。
        collapseBooleanAttributes:true,   //省略布尔属性的值，比如：<input checked="checked"/>,那么设置这个属性后，就会变成 <input checked/>。
        removeComments:true,   //清除html中注释的部分，我们应该减少html页面中的注释。
        removeEmptyAttributes:true,   //清除所有的空属性。
        removeScriptTypeAttributes:true,   //清除所有script标签中的type="text/javascript"属性。
        removeStyleLinkTypeAttributes:true,   //清楚所有Link标签上的type属性。
        minifyJS:true,   //压缩html中的javascript代码。
        minifyCSS:true   //压缩html中的css代码。
    };
    return gulp.src(htmlSrc)
      .pipe(htmlmin(options))
      .pipe(gulp.dest(projectname));
});


//Html替换css、js文件版本
gulp.task('revHtml', function () {
    return gulp.src([mainfest_FullPath, htmlSrc])
        .pipe(revCollector())
        .pipe(gulp.dest(projectname));
});

//针对.net core 页面替换JS CS 版本
gulp.task('revCSHtml', function () {
    return gulp.src([mainfest_FullPath, cshtmlSrc])
        .pipe(revCollector())
        .pipe(gulp.dest(projectname));
});

//针对.net aspx 页面替换JS CS 版本
gulp.task('revASPX', function () {
    return gulp.src([mainfest_FullPath, aspxSrc]) 
        .pipe(revCollector())
        .pipe(gulp.dest(projectname));
});

//压缩image
gulp.task('imageMin', function () {
    gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(projectname));
});

gulp.task('revImage', function(){
    return gulp.src(imgSrc)
        .pipe(rev())
        .pipe(rev.manifest())    //必须有这个方法
        .pipe(gulp.dest(manifest_Image));
});

//开发构建
gulp.task('default', function (done) {
	
    condition = false;
    runSequence(       //需要说明的是，用gulp.run也可以实现以上所有任务的执行，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.
        ['assetRev'],
        ['revCss'],
		['cssMin'],
		['uglify'],
        ['revJs'],
		['htmlMin'],
        ['revHtml'],
		['revCSHtml'],
		['revASPX'],
		['imageMin'],
		['revImage'],
        done);
});

7、运行配置文件中的任务：

1、打开命令窗口，CD 到C:\Projects_Publish

2、输入命令：gulp default 等待执行完成

注：针对JS CSS自动添加版本号，gulp插件默认生成样式如下：

<linkrel="stylesheet"href="../css/default-803a7fe4ae.css">

<scriptsrc="../js/app-3a0d844594.js"></script>

经过对插件内容调整后可生成如下样式：

<linkrel="stylesheet"href="../css/default.css?v=803a7fe4ae">

<scriptsrc="../js/app.js?v=3a0d844594"></script>

具体改动内容请参照如下文章：http://www.cnblogs.com/tnnyang/p/6023475.html

同时在此文章的基础上修改了一个bug避免多次压缩生成重复后缀问题如：

<scriptsrc="../js/app.js?v=3a0d844594?v=3a0d844594?v=3a0d844594"></script>