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

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

4.為HTML檔案內的引用加CDN字首

上程式碼：

1. var gulp = require('gulp');  
2.     var minimist = require('minimist');  
3.     var uglify = require('gulp-uglify');  
4.     var minifyHtml = require('gulp-minify-html');  
5.     var minifyCss = require('gulp-minify-css');  
6.     var rev = require('gulp-rev');  
7.     var
    revReplace = require('gulp-rev-replace');  
8.     var prefix = require('gulp-prefix');  
9.     var zip = require('gulp-zip');  
10.     var gulpSequence = require('gulp-sequence');  
11.     var cmd = {  
12.     string: 'v',  
13.     default: { v: '1.0' }  
14.     };  
15.     var option = {  
16.     src:'poster',  
17.     dest:'poster/build'
    ,  
18.     cdn:'http://sns_wf.cdn.sohusce.com'///poster/  
19.     }  
20.     var options = minimist(process.argv.slice(2), cmd);  
21.     var version = options.v;  
22.     //統一加MD5之後替換引用
23.     gulp.task('cdn',function(){  
24.     var revAll = new RevAll({dontRenameFile:[/^\/.*.html/]});// ,/^\/.*.jpg|png/
25.     gulp.src([option.src+'/templates-dev/*.html',option.src+'/static/**'])  
26.     .pipe(revAll.revision())  
27.     .pipe(gulp.dest(option.dest+'/'+version))  
28.     .pipe(revAll.versionFile())  
29.     .pipe(gulp.dest(option.dest+'/'+version))  
30.     .pipe(revAll.manifestFile())  
31.     .pipe(gulp.dest(option.dest+'/'+version));   
32.     });  
33.     gulp.task("rep" ,function(){  
34.     var manifest = gulp.src(option.dest + '/'+ version + "/rev-manifest.json");  
35.     console.log(option.dest +'/'+ version);  
36.     return gulp.src(option.dest +'/'+ version + '/templates-dev/*.html')  
37.     .pipe(revReplace({manifest: manifest}))  
38.     .pipe(gulp.dest(option.src +'/templates' ));  
39.     });  
40.     gulp.task('prefix',function(){  
41.     console.log('加CDN字首...');  
42.     return gulp.src(option.src+'/templates/*.html')  
43.     .pipe(prefix(option.cdn, null))  
44.     .pipe(gulp.dest(option.src+'/templates/'));  
45.     })  
46.     gulp.task('htmlmin',function(){  
47.     return gulp.src([option.src + '/templates/*.html'],{base:option.src })  
48.     .pipe(minifyHtml())  
49.     .pipe(gulp.dest(option.src));  
50.     })  
51.     gulp.task('jsmin',function(){  
52.     return gulp.src([option.dest +'/'+ version + '/static/js/*.js',option.dest +'/'+ version + '/static/imgcut/js/*.js'],{base:option.dest +'/'+ version})  
53.     .pipe(uglify())  
54.     .pipe(gulp.dest(option.dest +'/'+ version));  
55.     })  
56.     gulp.task('cssmin',function(){  
57.     return gulp.src([option.dest +'/'+ version + '/static/css/*.css',option.dest +'/'+ version + '/static/imgcut/css/*.css'],{base:option.dest +'/'+ version})  
58.     .pipe(minifyCss())  
59.     .pipe(gulp.dest(option.dest +'/'+ version));  
60.     })  
61.     gulp.task('zip',function(){  
62.     console.log('壓縮中...')  
63.     return gulp.src([option.dest+'/'+version+'/static/**',])  
64.     .pipe(zip('static.zip'))  
65.     .pipe(gulp.dest(option.dest+'/'+version));  
66.     })  
67.     gulp.task('r',function(cb){  
68.     gulpSequence('rep','prefix',['htmlmin','jsmin','cssmin'],'zip',cb)  
69.     })  

• gulp-rev-all 給靜態資源加MD5戳，，生成原始檔名和打了戳的MD5檔名的一個rev-manifest.json檔案（這很關鍵）。
• gulp-prefix 給引用了靜態資源的的HTML檔案替換引用和加CDN字首
• minimist 給任務的執行新增引數 eg: gulp r --v 1.0

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

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