使用gulp对引用的文件添加版本号

cnpm install —-save-dev gulp
cnpm install --save-dev gulp del
cnpm install gulp-uglify gulp-uglify gulp-minify-css gulp-rev gulp-rev-collector gulp-smushit

gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');                    //- 多个文件合并为一个；
var minifyCss = require('gulp-minify-css');            //- 压缩CSS为一行；
var rev = require('gulp-rev');                        //- 对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');          //- 路径替换
var del = require('del');
var smushit = require('gulp-smushit');              //图片压缩

gulp.task('concatcss', function() {                     //- 创建一个名为 concat 的 task   gulp.src(['./src/css/*.css'])
    gulp.src([ './src/css/self/*.css'])                                 //  .pipe(concat('wrap.min.css'))              //- 合并后的文件名
    .pipe(minifyCss())                       //- 压缩处理成一行
    .pipe(rev())                              //- 文件名加MD5后缀
    .pipe(gulp.dest('./bushu/css/self'))                //- 输出文件本地
    .pipe(rev.manifest())                    //- 生成一个rev-manifest.json
    .pipe(gulp.dest('./revcss'));                 //- 将 rev-manifest.json 保存到 rev 目录内
});

gulp.task('revcss', function() {
    gulp.src(['./revcss/*.json', './src/**.html'])
    //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
    .pipe(revCollector())                                  
    //- 执行文件内css名的替换
    .pipe(gulp.dest('./bushu'));
    //- 替换后的文件输出的目录
});
gulp.task('revmanifestcss', function() {
    gulp.src(['./revcss/*.json', './src/**.manifest'])
    //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
        .pipe(revCollector())
        //- 执行文件内css名的替换
        .pipe(gulp.dest('./bushu'));
    //- 替换后的文件输出的目录
});
gulp.task('concatjs', function() {                      //- 创建一个名为 concat 的 task   gulp.src(['./src/css/*.css'])
    gulp.src([ './src/js/self/*.js'])                                   //  .pipe(concat('wrap.min.css'))              //- 合并后的文件名
        .pipe(uglify())                             //- 压缩处理成一行
        .pipe(rev())                              //- 文件名加MD5后缀
        .pipe(gulp.dest('./bushu/js/self'))             //- 输出文件本地
        .pipe(rev.manifest())                    //- 生成一个rev-manifest.json
        .pipe(gulp.dest('./revjs'));                  //- 将 rev-manifest.json 保存到 rev 目录内
});

gulp.task('revjs', function() {
    gulp.src(['./revjs/*.json', './bushu/*.html'])
    //- 读取 rev-manifest.json 文件以及需要进行js名替换的文件
        .pipe(revCollector())
        //- 执行文件内css名的替换
        .pipe(gulp.dest('./bushu'));
    //- 替换后的文件输出的目录
});

/*压缩图片且添加MD5后缀*/
gulp.task('concatimg', function () {
    return gulp.src('src/imgs/**')     //读取的图片位置
        .pipe(smushit({
            verbose: true
        }))
        .pipe(rev())
        .pipe(gulp.dest('bushu/imgs')) //输出图片的位置。
        .pipe(rev.manifest())
        .pipe(gulp.dest('./revimgs')); //输出JSON文件的位置
});
/*html文件图片MD5资源改变*/
gulp.task('revimghtml', function () {
    gulp.src(['./revimgs/*.json', './bushu/*.html'])
    //- 读取 rev-manifest.json 文件以及需要进行html替换的文件
        .pipe(revCollector())
        //- 执行文件内html名的替换
        .pipe(gulp.dest('./bushu'));
    //- 替换后的文件输出的目录
});
/*css文件图片MD5资源改变*/
gulp.task('revimgcss', function () {
    gulp.src(['./revimgs/*.json', './bushu/css/self/*.css'])
    //- 读取 rev-manifest.json 文件以及需要进行js名替换的文件
        .pipe(revCollector())
        //- 执行文件内css名的替换
        .pipe(gulp.dest('./bushu/css/self'));
    //- 替换后的文件输出的目录
});

gulp.task('clean', function (cb) {
    del([
        // 这里我们使用一个通配模式来匹配 文件夹中的所有东西
        'bushu/member/*',
        'bushu/project/*',
        'bushu/css/self/*',
        'bushu/js/self/*',
        // 我们不希望删掉这个文件，所以我们取反这个匹配模式
        /*'!bushu/css/self/base.css',
        '!bushu/css/self/base.less',
        '!bushu/css/self/person.css',
        '!bushu/css/self/person.less',
        '!bushu/js/self/base.js',*/
    ], cb);
});

/*
 gulp.task('smushit', function () {
 return gulp.src('src/imgs/*')//压缩图片路径
 .pipe(smushit({
 verbose: true
 }))
 .pipe(gulp.dest('dist'));
 });*/

这里面有许许多多的坑，已经被我全部踩过一次了，并找到避开的方法，只是可能不会太优雅，仅供参考。
思路如下：
（1）文件目录结构。

src文件夹为源文件。bushu文件夹为部署文件夹，也就是生成的各种文件放置的地方。源文件和部署文件隔离开来应该会方便不少。
在src目录下源html文件长这样。

（2）在添加版本号之前，将以前的版本文件全部删除。我这里是用了clean（名字是自己取的，根据个人习惯更改。），可以使用'!src/css/editor.css' 等对某些文件取反，把不想改变的留住。其他的删除。

（3）使用concatcss对CSS文件压缩并加后缀，同时在根目录下的revcss文件内得到该JSON文件（里面的具体目录可以根据个人需求改变。）。

（4）使用revcss进行对具体html文件的替换，把html文件输出到新的位置，我是将其输出到根目录。这里有个坑，不能输出到原本所在的位置，也就是这里的二级目录，将原本的html文件覆盖。后面会讲到。现在的html文件长这样，可以看到，已经暂时达到了我们所需要的效果。

（5）使用concatjs对JS文件压缩并加后缀。同时在根目录下的revjs文件内得到对应JSON文件（里面的具体目录可以根据个人需求改变。）

（6）使用revjs对第（4）步生成的html文件进行替换。注意！！这里是将新生成的那个html文件进行替换（当然可以是批量的）。这样，最终的这个html文件就是我们所得。

里面的图片压缩更改也是一样，重复步骤5,6即可。只是要特别注意也要在css或者js文件里改变对应的资源索引。

（7）把这些html文件都放回自己原本所在的位置就可以跑起来了。

下面是我遇到的坑：
坑1：为什么要使用clean。如果你生成路径和源文件路径是一样的话，会导致以下问题：插件不会帮你清除以往版本的文件。如果没有清除以往的版本，在下一次使用concatcss时，它会以你的版本文件作为模板进行映射，导致这种情况：

你也可以和我一样将部署文件和源文件分开，这样也不会导致上面这种问题。但开始管理的时候最好还是把部署文件以往的版本文件删掉比较好。

坑2：为什么不能让新输出的html文件覆盖掉，也是会导致上面这种情况。

坑3：css文件或者js文件要有具体变化版本号才会改变，做DEMO时要注意。这也是这里面的插件一大优点，这样可以留住没有改变的缓存文件，用户进行访问时可以快速读出。

坑4：JS和CSS的JSON要为他们创建不同的文件夹。不然他们会相互覆盖。

坑5：如果使用以上办法，步骤一定要对，因为task高度依赖前后task。最好是串起来，一次性执行。

坑6：使用gulp构建时，最好是最后一步才为他们添加版本号，以免后续踩到更多的坑。

坑8：使用clean时，一定一定要把自己原本的文件放进取反列表里，不然删除了就很麻烦了（起码我在回收站里找不到）。

列出删除文件需要安装的插件：

/*clean*/
$ npm install --save-dev gulp del

其余的插件看gulpfile.js头部逐一安装即可。

当然，上面的插件比如JQ应该放入另外一个文件夹里面，由于是DEMO我就没有改过来。这个自己注意一下就好了。
以上方法仅供参考。