轉戰gulp，實現前端靜態資源的壓縮，加MD5戳，替換引用，加CDN前綴

之前一直在使用grunt，總感覺grunt的參數配置方法很繁瑣，沒有一個比較清晰的流程，加上自己對gulp的流操作比較感興趣，就決定轉戰gulp了。

相信前端er在發佈自己的代碼時如果不使用前端一些構建工具的話，對頻繁上線的項目來說，自己手動壓縮打包替換CDN前綴那是一件多麼恐怖的事情！所以採用gulp前端構建工具是一個非常明智的選擇。

首先來說說發佈項目時前端需要進行哪些操作：

1.對靜態資源的壓縮合並
2.對js,css，img等資源加MD5戳
3.對引用了以上加MD5戳的HTML文件進行替換文件內的引用。

4.爲HTML文件內的引用加CDN前綴

雖然看起來就這4步，不過寫起任務來還是挺麻煩的。

上代碼：

var gulp = require('gulp');
    var minimist = require('minimist');
    var uglify = require('gulp-uglify');
    var minifyHtml = require('gulp-minify-html');
    var minifyCss = require('gulp-minify-css');
    var rev = require('gulp-rev');
    var revReplace = require('gulp-rev-replace');
    var prefix = require('gulp-prefix');
    var zip = require('gulp-zip');
    var gulpSequence = require('gulp-sequence');
    var cmd = {
    string: 'v',
    default: { v: '1.0' }
    };
    var option = {
    src:'poster',
    dest:'poster/build',
    cdn:'http://sns_wf.cdn.sohusce.com'///poster/
    }
    var options = minimist(process.argv.slice(2), cmd);
    var version = options.v;
    //統一加MD5之後替換引用
    gulp.task('cdn',function(){
    var revAll = new RevAll({dontRenameFile:[/^\/.*.html/]});// ,/^\/.*.jpg|png/
    gulp.src([option.src+'/templates-dev/*.html',option.src+'/static/**'])
    .pipe(revAll.revision())
    .pipe(gulp.dest(option.dest+'/'+version))
    .pipe(revAll.versionFile())
    .pipe(gulp.dest(option.dest+'/'+version))
    .pipe(revAll.manifestFile())
    .pipe(gulp.dest(option.dest+'/'+version)); 
    });
    gulp.task("rep" ,function(){
    var manifest = gulp.src(option.dest + '/'+ version + "/rev-manifest.json");
    console.log(option.dest +'/'+ version);
    return gulp.src(option.dest +'/'+ version + '/templates-dev/*.html')
    .pipe(revReplace({manifest: manifest}))
    .pipe(gulp.dest(option.src +'/templates' ));
    });
    gulp.task('prefix',function(){
    console.log('加CDN前綴...');
    return gulp.src(option.src+'/templates/*.html')
    .pipe(prefix(option.cdn, null))
    .pipe(gulp.dest(option.src+'/templates/'));
    })
    gulp.task('htmlmin',function(){
    return gulp.src([option.src + '/templates/*.html'],{base:option.src })
    .pipe(minifyHtml())
    .pipe(gulp.dest(option.src));
    })
    gulp.task('jsmin',function(){
    return gulp.src([option.dest +'/'+ version + '/static/js/*.js',option.dest +'/'+ version + '/static/imgcut/js/*.js'],{base:option.dest +'/'+ version})
    .pipe(uglify())
    .pipe(gulp.dest(option.dest +'/'+ version));
    })
    gulp.task('cssmin',function(){
    return gulp.src([option.dest +'/'+ version + '/static/css/*.css',option.dest +'/'+ version + '/static/imgcut/css/*.css'],{base:option.dest +'/'+ version})
    .pipe(minifyCss())
    .pipe(gulp.dest(option.dest +'/'+ version));
    })
    gulp.task('zip',function(){
    console.log('壓縮中...')
    return gulp.src([option.dest+'/'+version+'/static/**',])
    .pipe(zip('static.zip'))
    .pipe(gulp.dest(option.dest+'/'+version));
    })
    gulp.task('r',function(cb){
    gulpSequence('rep','prefix',['htmlmin','jsmin','cssmin'],'zip',cb)
    })

這裏引用的插件名可以去npm官網上搜下作用和使用方法，這裏不再詳細敘述，主要講下幾個關鍵的插件：

• gulp-rev-all 給靜態資源加MD5戳，，生成源文件名和打了戳的MD5文件名的一個rev-manifest.json文件（這很關鍵）。
• gulp-prefix 給引用了靜態資源的的HTML文件替換引用和加CDN前綴
• minimist 給任務的執行添加參數 eg: gulp r --v 1.0
• gulp-sequence 將任務的執行按指定的順序執行

說完了一些重要的插件，咱再來講講咱得任務。

• cdn 詳見插件介紹的gulp-rev-all 。
• rep 詳見gulp-prefix
• htmlmin,cssmin,jsmin,zip 給靜態資源壓縮後打成一個zip包，方便部署CDN。
• r 組織任務的執行，防止子任務執行中的異步操作擾亂整個任務的執行。

這裏R任務有個缺點就是沒講CDN任務放在其中，因爲CDN任務中包含了多個異步任務，是的在R任務中產生了同步任務的假象，導致後續的操作和產生的結果錯誤。所以在終端需要執行以下兩步任務：

• gulp cdn --v 1.0  //生成1.0版本
• gulp r

一些配置參數寫在了option對象中，同學們可以按照自己的需求來修改。其中dest是任務輸出目錄，打包好的zip文件在bulid/x.x 目錄下。
介紹完畢~

快來跟我轉戰gulp吧~ 

需要交流一下狂戳這裏~~~~~