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我就沒有改過來。這個自己注意一下就好了。
以上方法僅供參考。