參考打包教程：
http://www.cnblogs.com/tugenhua0707/p/4069769.html
http://www.cnblogs.com/tugenhua0707/p/4982646.html
http://www.tuicool.com/articles/viequay
https://github.com/Platform-CUF/use-gulp
實現要點：
1、如何運行gulp的任務，加入新建好一個如下任務：
// 語法檢查 gulp.task('jshint', function () { gulp.src('js/**/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });
那么在命令行上運行：gulp jshint
2、為什么安裝了全局還要安裝本地，參考這個：http://www.cnblogs.com/EasonJim/p/6207201.html
3、對於npm的命令詳解，參考這個：http://www.cnblogs.com/EasonJim/p/6206179.html
4、我使用的node.js版本為：v7.4.0，如下所示：
以下為我項目上的一個打包配置文件，如下：
（注意：這個沒有解決同步執行問題）
var gulp = require('gulp');//gulp主組件 var htmlmin = require('gulp-htmlmin');//html壓縮組件 var jshint = require('gulp-jshint');//js語法檢查 var concat = require('gulp-concat');//多個文件合並為一個 var minifyCss = require('gulp-minify-css');//壓縮CSS為一行； var uglify = require('gulp-uglify');//js文件壓縮 var del = require('del');//文件刪除 var rev = require('gulp-rev');//對文件名加MD5后綴 var revCollector = require('gulp-rev-collector');//路徑替換 var gulpRemoveHtml = require('gulp-remove-html');//標簽清除，參考：https://www.npmjs.com/package/gulp-remove-html var removeEmptyLines = require('gulp-remove-empty-lines');//清除空白行，參考：https://www.npmjs.com/package/gulp-remove-empty-lines var replace = require('gulp-replace');//文件名替換，參考：https://www.npmjs.com/package/gulp-replace var buildBasePath = 'build/';//構建輸出的目錄 // 語法檢查 gulp.task('jshint', function () { gulp.src('js/**/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); //刪除Build文件 gulp.task('clean:Build', function () { del([ buildBasePath+'**/*', ]); }); //復制文件夾 gulp.task('copy', function() { gulp.src('plugins/**/*') .pipe(gulp.dest(buildBasePath+'plugins')); }); gulp.task('copyimg', function() { //如果下面執行了md5資源文件img，那么這步可以省略 gulp.src('img/**/*') .pipe(gulp.dest(buildBasePath+'img')); }); //合並js,css文件之后壓縮代碼 //js gulp.task('minifyjs', function(){ gulp.src('js/**/*.js') .pipe(concat('build.js'))//合成到一個js .pipe(gulp.dest(buildBasePath+'js'))//輸出到js目錄 .pipe(uglify())//壓縮js到一行 .pipe(concat('build.min.js'))//壓縮后的js .pipe(gulp.dest(buildBasePath+'js'));//輸出到js目錄 }); //jsmd5，壓縮后並用md5進行命名，下面使用revCollector進行路徑替換 gulp.task('minifyjsmd5', function() { gulp.src('js/**/*.js') .pipe(concat('build.min.js'))//壓縮后的js .pipe(uglify())//壓縮js到一行 .pipe(rev())//文件名加MD5后綴 .pipe(gulp.dest(buildBasePath+'js'))//輸出到js目錄 .pipe(rev.manifest('rev-js-manifest.json'))////生成一個rev-manifest.json .pipe(gulp.dest('rev'));//將 rev-manifest.json 保存到 rev 目錄內 }); //css gulp.task('minifycss', function (){ gulp.src('css/**/*.css') .pipe(concat('build.css'))//合成到一個css .pipe(gulp.dest(buildBasePath+'css'))//輸出到css目錄 .pipe(minifyCss())//壓縮css到一樣 .pipe(concat('build.min.css'))//壓縮后的css .pipe(gulp.dest(buildBasePath+'css'));//輸出到css目錄 }); //cssmd5，壓縮后並用md5進行命名，下面使用revCollector進行路徑替換 gulp.task('minifycssmd5', function (){ gulp.src('css/**/*.css') .pipe(concat('build.min.css'))//壓縮后的css .pipe(minifyCss())//壓縮css到一樣 .pipe(rev())//文件名加MD5后綴 .pipe(gulp.dest(buildBasePath+'css'))//輸出到css目錄 .pipe(rev.manifest('rev-css-manifest.json'))//生成一個rev-manifest.json .pipe(gulp.dest('rev'));//將 rev-manifest.json 保存到 rev 目錄內 }); //imgmd5，壓縮后並用md5進行命名，下面使用revCollector進行路徑替換 gulp.task('minifyimgmd5', function (){ gulp.src(['img/**/*.jpg','img/**/*.png']) .pipe(rev())//文件名加MD5后綴 .pipe(gulp.dest(buildBasePath+'img'))//輸出到css目錄 .pipe(rev.manifest('rev-img-manifest.json'))//生成一個rev-manifest.json .pipe(gulp.dest('rev'));//將 rev-manifest.json 保存到 rev 目錄內 }); //html壓縮 gulp.task('html',function(){ var options = { removeComments: true,//清除HTML注釋 collapseWhitespace: false,//壓縮HTML collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css" minifyJS: true,//壓縮頁面JS minifyCSS: true//壓縮頁面CSS }; gulp.src('*.html') .pipe(gulpRemoveHtml())//清除特定標簽 .pipe(removeEmptyLines({removeComments: true}))//清除空白行 .pipe(htmlmin(options)) .pipe(gulp.dest(buildBasePath)); }); //生產使用，替換文件名，common.js替換為build.min.js gulp.task('replacejs', function(){ gulp.src([buildBasePath+'*.html']) .pipe(replace('common.js', 'build.min.js')) .pipe(gulp.dest(buildBasePath)); }); //生產使用，替換文件名，common.css替換為build.min.css gulp.task('replacecss', function(){ gulp.src([buildBasePath+'*.html']) .pipe(replace('common.css', 'build.min.css')) .pipe(gulp.dest(buildBasePath)); }); //開發使用，替換文件名，common.js替換為build.js gulp.task('replacejsdev', function(){ gulp.src([buildBasePath+'*.html']) .pipe(replace('common.js', 'build.js')) .pipe(gulp.dest(buildBasePath)); }); //開發使用，替換文件名，common.css替換為build.css gulp.task('replacecssdev', function(){ gulp.src([buildBasePath+'*.html']) .pipe(replace('common.css', 'build.css')) .pipe(gulp.dest(buildBasePath)); }); //使用rev替換成md5文件名，這里包括html和css的資源文件也一起 gulp.task('rev', function() { //html，針對js,css,img gulp.src(['rev/**/*.json', buildBasePath+'**/*.html']) .pipe(revCollector({replaceReved:true })) .pipe(gulp.dest(buildBasePath)); }); gulp.task('revimg', function() { //css，主要是針對img替換 gulp.src(['rev/**/rev-img-manifest.json', buildBasePath+'css/*.css']) .pipe(revCollector({replaceReved:true })) .pipe(gulp.dest(buildBasePath+'css')); }); //監視文件的變化，有修改時，自動調用default缺省默認任務 gulp.task('watch', function () { gulp.watch('**/*.html', ['default']); }); //缺省默認任務，輸出的js和css文件都帶參數 /*執行順序： * 1、清除編譯輸出目錄build的全部文件 * 2、復制第三方組件依賴到build文件夾 * 3、使用帶md5對js文件進行壓縮打包一個文件，命名根據gulp-rev插件md5之后的命名進行命名，如build-asdf123.min.js，並輸出到build/js文件夾 * 4、使用帶md5對cs文件進行壓縮打包一個文件，命名根據gulp-rev插件md5之后的命名進行命名，如build-asd323.min.css，並輸出到build/cs文件夾 * 5、（可選）使用帶md5對img文件夾的全部文件進行重命名，命名根據gulp-rev插件md5之后的命名進行命名，如common-asdf123.jpg，並輸出到build/img文件夾；如果這部不操作，下面第10步將不執行。 * 6、將build目錄下的全部html頁面進行壓縮處理，采用gulp-minhtml插進 * 7、由於項目上使用了模塊開發，然后每個頁面上都會引入common.js文件，而合並后的js文件為build.min.js，所以使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上 * 8、再次在build目錄上，將html進行common.css文件替換成build.min.css * 9、使用gulp-rev-collectorc插件對剛才生成帶參數的js和css文件在html頁面上進行替換，如build.min.js替換成build-asdf123.min.js。還是輸出到build目錄。 * 10、（可選）使用gulp-rev-collectorc插件對剛才生成帶參數的img文件在css文件上進行替換，如common.jpg替換成common-asdf12.jpg。輸出到目錄 * */ gulp.task('default',['clean:Build','copy','minifyjsmd5','minifycssmd5','minifyimgmd5','html','replacejs','replacecss','rev','revimg']); //默認任務2，輸出的js和css文件不帶參數 /*執行順序： * 1、清除編譯輸出目錄build的全部文件 * 2、復制第三方組件依賴到build文件夾 * 3、對js文件進行壓縮打包一個文件，命名如build.min.js，並輸出到build/js文件夾 * 4、對cs文件進行壓縮打包一個文件，命名如build.min.css，並輸出到build/cs文件夾 * 5、將build目錄下的全部html頁面進行壓縮處理，采用gulp-minhtml插進 * 6、由於項目上使用了模塊開發，然后每個頁面上都會引入common.js文件，而合並后的js文件為build.min.js，所以使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上 * 7、再次在build目錄上，將html進行common.css文件替換成build.min.css * */ gulp.task('default2', ['clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejs','replacecss']); //開發使用默認任務，js和css不帶參數，且不合並 /*執行順序： * 1、清除編譯輸出目錄build的全部文件 * 2、復制第三方組件依賴到build文件夾 * 3、對js文件進行壓縮打包一個文件，命名如build.js，並輸出到build/js文件夾 * 4、對cs文件進行壓縮打包一個文件，命名如build.css，並輸出到build/cs文件夾 * 5、將build目錄下的全部html頁面進行壓縮處理，采用gulp-minhtml插進 * 6、由於項目上使用了模塊開發，然后每個頁面上都會引入common.js文件，而合並后的js文件為build.js，所以使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上 * 7、再次在build目錄上，將html進行common.css文件替換成build.css * */ gulp.task('defaultdev', ['clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejsdev','replacecssdev']);
但是很糾結的一個問題，我這樣去執行默認任務：gulp，發現沒有按順序執行。
下載將改寫上面的配置，加入同步順序執行。我收集了一些同步執行的資料，參考這個：http://www.cnblogs.com/EasonJim/p/6209725.html
以下為我增加同步執行的方法：
var gulp = require('gulp');//gulp主組件 var htmlmin = require('gulp-htmlmin');//html壓縮組件 var jshint = require('gulp-jshint');//js語法檢查 var concat = require('gulp-concat');//多個文件合並為一個 var minifyCss = require('gulp-minify-css');//壓縮CSS為一行； var uglify = require('gulp-uglify');//js文件壓縮 var rev = require('gulp-rev');//對文件名加MD5后綴 var revCollector = require('gulp-rev-collector');//路徑替換 var gulpRemoveHtml = require('gulp-remove-html');//標簽清除，參考：https://www.npmjs.com/package/gulp-remove-html var removeEmptyLines = require('gulp-remove-empty-lines');//清除空白行，參考：https://www.npmjs.com/package/gulp-remove-empty-lines var replace = require('gulp-replace');//文件名替換，參考：https://www.npmjs.com/package/gulp-replace var gulpSequence = require('gulp-sequence');//同步執行，參考：https://github.com/teambition/gulp-sequence var clean = require('gulp-clean');//清除文件插件，參考：https://github.com/teambition/gulp-clean var buildBasePath = 'build/';//構建輸出的目錄 //刪除Build文件 gulp.task('clean:Build', function (cb) { return gulp.src(buildBasePath, {read: false}) .pipe(clean()); }); //復制文件夾 gulp.task('copy', function() { return gulp.src('plugins/**/*') .pipe(gulp.dest(buildBasePath+'plugins')); }); gulp.task('copyimg', function() { //如果下面執行了md5資源文件img，那么這步可以省略 return gulp.src('img/**/*') .pipe(gulp.dest(buildBasePath+'img')); }); //合並js,css文件之后壓縮代碼 //js gulp.task('minifyjs', function(){ return gulp.src('js/**/*.js') .pipe(concat('build.js'))//合成到一個js .pipe(gulp.dest(buildBasePath+'js'))//輸出到js目錄 .pipe(uglify())//壓縮js到一行 .pipe(concat('build.min.js'))//壓縮后的js .pipe(gulp.dest(buildBasePath+'js'));//輸出到js目錄 }); //jsmd5，壓縮后並用md5進行命名，下面使用revCollector進行路徑替換 gulp.task('minifyjsmd5', function() { return gulp.src('js/**/*.js') .pipe(concat('build.min.js'))//壓縮后的js .pipe(uglify())//壓縮js到一行 .pipe(rev())//文件名加MD5后綴 .pipe(gulp.dest(buildBasePath+'js'))//輸出到js目錄 .pipe(rev.manifest('rev-js-manifest.json'))////生成一個rev-manifest.json .pipe(gulp.dest('rev'));//將 rev-manifest.json 保存到 rev 目錄內 }); //css gulp.task('minifycss', function (){ return gulp.src('css/**/*.css') .pipe(concat('build.css'))//合成到一個css .pipe(gulp.dest(buildBasePath+'css'))//輸出到css目錄 .pipe(minifyCss())//壓縮css到一樣 .pipe(concat('build.min.css'))//壓縮后的css .pipe(gulp.dest(buildBasePath+'css'));//輸出到css目錄 }); //cssmd5，壓縮后並用md5進行命名，下面使用revCollector進行路徑替換 gulp.task('minifycssmd5', function (){ return gulp.src('css/**/*.css') .pipe(concat('build.min.css'))//壓縮后的css .pipe(minifyCss())//壓縮css到一樣 .pipe(rev())//文件名加MD5后綴 .pipe(gulp.dest(buildBasePath+'css'))//輸出到css目錄 .pipe(rev.manifest('rev-css-manifest.json'))//生成一個rev-manifest.json .pipe(gulp.dest('rev'));//將 rev-manifest.json 保存到 rev 目錄內 }); //imgmd5，壓縮后並用md5進行命名，下面使用revCollector進行路徑替換 gulp.task('minifyimgmd5', function (){ return gulp.src(['img/**/*.jpg','img/**/*.png','img/**/*.gif']) .pipe(rev())//文件名加MD5后綴 .pipe(gulp.dest(buildBasePath+'img'))//輸出到css目錄 .pipe(rev.manifest('rev-img-manifest.json'))//生成一個rev-manifest.json .pipe(gulp.dest('rev'));//將 rev-manifest.json 保存到 rev 目錄內 }); //html壓縮 gulp.task('html',function(){ var options = { removeComments: true,//清除HTML注釋 collapseWhitespace: false,//壓縮HTML collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css" minifyJS: true,//壓縮頁面JS minifyCSS: true//壓縮頁面CSS }; return gulp.src('*.html') .pipe(gulpRemoveHtml())//清除特定標簽 .pipe(removeEmptyLines({removeComments: true}))//清除空白行 .pipe(htmlmin(options)) .pipe(gulp.dest(buildBasePath)); }); //生產使用，替換文件名，common.js替換為build.min.js gulp.task('replacejs', function(){ return gulp.src([buildBasePath+'*.html']) .pipe(replace('common.js', 'build.min.js')) .pipe(gulp.dest(buildBasePath)); }); //生產使用，替換文件名，common.css替換為build.min.css gulp.task('replacecss', function(){ return gulp.src([buildBasePath+'*.html']) .pipe(replace('common.css', 'build.min.css')) .pipe(gulp.dest(buildBasePath)); }); //開發使用，替換文件名，common.js替換為build.js gulp.task('replacejsdev', function(){ return gulp.src([buildBasePath+'*.html']) .pipe(replace('common.js', 'build.js')) .pipe(gulp.dest(buildBasePath)); }); //開發使用，替換文件名，common.css替換為build.css gulp.task('replacecssdev', function(){ return gulp.src([buildBasePath+'*.html']) .pipe(replace('common.css', 'build.css')) .pipe(gulp.dest(buildBasePath)); }); //使用rev替換成md5文件名，這里包括html和css的資源文件也一起 gulp.task('rev', function() { //html，針對js,css,img return gulp.src(['rev/**/*.json', buildBasePath+'**/*.html']) .pipe(revCollector({replaceReved:true })) .pipe(gulp.dest(buildBasePath)); }); gulp.task('revimg', function() { //css，主要是針對img替換 return gulp.src(['rev/**/rev-img-manifest.json', buildBasePath+'css/*.css']) .pipe(revCollector({replaceReved:true })) .pipe(gulp.dest(buildBasePath+'css')); }); //監視文件的變化，有修改時，自動調用default缺省默認任務 gulp.task('watch', function () { gulp.watch('**/*.html', ['default']); }); //缺省默認任務，輸出的js和css文件都帶參數 /*執行順序： * 1、清除編譯輸出目錄build的全部文件 * 2、復制第三方組件依賴到build文件夾 * 3、使用帶md5對js文件進行壓縮打包一個文件，命名根據gulp-rev插件md5之后的命名進行命名，如build-asdf123.min.js，並輸出到build/js文件夾 * 4、使用帶md5對cs文件進行壓縮打包一個文件，命名根據gulp-rev插件md5之后的命名進行命名，如build-asd323.min.css，並輸出到build/cs文件夾 * 5、（可選）使用帶md5對img文件夾的全部文件進行重命名，命名根據gulp-rev插件md5之后的命名進行命名，如common-asdf123.jpg，並輸出到build/img文件夾；如果這部不操作，下面第10步將不執行。 * 6、將build目錄下的全部html頁面進行壓縮處理，采用gulp-minhtml插進 * 7、由於項目上使用了模塊開發，然后每個頁面上都會引入common.js文件，而合並后的js文件為build.min.js，所以使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上 * 8、再次在build目錄上，將html進行common.css文件替換成build.min.css * 9、使用gulp-rev-collectorc插件對剛才生成帶參數的js和css文件在html頁面上進行替換，如build.min.js替換成build-asdf123.min.js。還是輸出到build目錄。 * 10、（可選）使用gulp-rev-collectorc插件對剛才生成帶參數的img文件在css文件上進行替換，如common.jpg替換成common-asdf12.jpg。輸出到目錄 * */ gulp.task('default',gulpSequence('clean:Build','copy','minifyjsmd5','minifycssmd5','minifyimgmd5','html','replacejs','replacecss','rev','revimg')); //默認任務2，輸出的js和css文件不帶參數 /*執行順序： * 1、清除編譯輸出目錄build的全部文件 * 2、復制第三方組件依賴到build文件夾 * 3、對js文件進行壓縮打包一個文件，命名如build.min.js，並輸出到build/js文件夾 * 4、對cs文件進行壓縮打包一個文件，命名如build.min.css，並輸出到build/cs文件夾 * 5、將build目錄下的全部html頁面進行壓縮處理，采用gulp-minhtml插進 * 6、由於項目上使用了模塊開發，然后每個頁面上都會引入common.js文件，而合並后的js文件為build.min.js，所以使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上 * 7、再次在build目錄上，將html進行common.css文件替換成build.min.css * */ gulp.task('default2', gulpSequence('clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejs','replacecss')); //開發使用默認任務，js和css不帶參數，且不合並 /*執行順序： * 1、清除編譯輸出目錄build的全部文件 * 2、復制第三方組件依賴到build文件夾 * 3、對js文件進行壓縮打包一個文件，命名如build.js，並輸出到build/js文件夾 * 4、對cs文件進行壓縮打包一個文件，命名如build.css，並輸出到build/cs文件夾 * 5、將build目錄下的全部html頁面進行壓縮處理，采用gulp-minhtml插進 * 6、由於項目上使用了模塊開發，然后每個頁面上都會引入common.js文件，而合並后的js文件為build.js，所以使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上 * 7、再次在build目錄上，將html進行common.css文件替換成build.css * */ gulp.task('defaultdev', gulpSequence('clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejsdev','replacecssdev'));
同步任務使用了gulp-sequence插件，其中del插件去除，這個無論如何都是異步的stream，所以替換成了gulp-clean插件。
最后，我發現插件html標簽這個插件也是需要用到的，比如像上面我不替換common.js，直接add一個編譯后的標簽時，使用這個插件：https://www.npmjs.com/package/gulp-inject
然后好像一些近乎完美，可是一個隱含的問題沒有測試出，就是watch，當你運行watch時，會出現順序執行的錯誤： Error: The thunkFunction already filled，其實這個錯誤是用了gulp-sequence插件導致的，解決辦法參考：https://github.com/teambition/gulp-sequence/issues/2，原理就是加入callback回調。更新后的js文件如下：
var gulp = require('gulp');//gulp主組件 var htmlmin = require('gulp-htmlmin');//html壓縮組件 var jshint = require('gulp-jshint');//js語法檢查 var concat = require('gulp-concat');//多個文件合並為一個 var minifyCss = require('gulp-minify-css');//壓縮CSS為一行； var uglify = require('gulp-uglify');//js文件壓縮 var rev = require('gulp-rev');//對文件名加MD5后綴 var revCollector = require('gulp-rev-collector');//路徑替換 var gulpRemoveHtml = require('gulp-remove-html');//標簽清除，參考：https://www.npmjs.com/package/gulp-remove-html var removeEmptyLines = require('gulp-remove-empty-lines');//清除空白行，參考：https://www.npmjs.com/package/gulp-remove-empty-lines var replace = require('gulp-replace');//文件名替換，參考：https://www.npmjs.com/package/gulp-replace var gulpSequence = require('gulp-sequence');//同步執行，參考：https://github.com/teambition/gulp-sequence var clean = require('gulp-clean');//清除文件插件，參考：https://github.com/teambition/gulp-clean var buildBasePath = 'build/';//構建輸出的目錄 //刪除Build文件 gulp.task('clean:Build', function (cb) { return gulp.src(buildBasePath, {read: false}) .pipe(clean()); }); //復制文件夾 gulp.task('copy', function() { return gulp.src('plugins/**/*') .pipe(gulp.dest(buildBasePath+'plugins')); }); gulp.task('copyimg', function() { //如果下面執行了md5資源文件img，那么這步可以省略 return gulp.src('img/**/*') .pipe(gulp.dest(buildBasePath+'img')); }); //合並js,css文件之后壓縮代碼 //js gulp.task('minifyjs', function(){ return gulp.src('js/**/*.js') .pipe(concat('build.js'))//合成到一個js .pipe(gulp.dest(buildBasePath+'js'))//輸出到js目錄 .pipe(uglify())//壓縮js到一行 .pipe(concat('build.min.js'))//壓縮后的js .pipe(gulp.dest(buildBasePath+'js'));//輸出到js目錄 }); //jsmd5，壓縮后並用md5進行命名，下面使用revCollector進行路徑替換 gulp.task('minifyjsmd5', function() { return gulp.src('js/**/*.js') .pipe(concat('build.min.js'))//壓縮后的js .pipe(uglify())//壓縮js到一行 .pipe(rev())//文件名加MD5后綴 .pipe(gulp.dest(buildBasePath+'js'))//輸出到js目錄 .pipe(rev.manifest('rev-js-manifest.json'))////生成一個rev-manifest.json .pipe(gulp.dest('rev'));//將 rev-manifest.json 保存到 rev 目錄內 }); //css gulp.task('minifycss', function (){ return gulp.src('css/**/*.css') .pipe(concat('build.css'))//合成到一個css .pipe(gulp.dest(buildBasePath+'css'))//輸出到css目錄 .pipe(minifyCss())//壓縮css到一樣 .pipe(concat('build.min.css'))//壓縮后的css .pipe(gulp.dest(buildBasePath+'css'));//輸出到css目錄 }); //cssmd5，壓縮后並用md5進行命名，下面使用revCollector進行路徑替換 gulp.task('minifycssmd5', function (){ return gulp.src('css/**/*.css') .pipe(concat('build.min.css'))//壓縮后的css .pipe(minifyCss())//壓縮css到一樣 .pipe(rev())//文件名加MD5后綴 .pipe(gulp.dest(buildBasePath+'css'))//輸出到css目錄 .pipe(rev.manifest('rev-css-manifest.json'))//生成一個rev-manifest.json .pipe(gulp.dest('rev'));//將 rev-manifest.json 保存到 rev 目錄內 }); //imgmd5，壓縮后並用md5進行命名，下面使用revCollector進行路徑替換 gulp.task('minifyimgmd5', function (){ return gulp.src(['img/**/*.jpg','img/**/*.png','img/**/*.gif']) .pipe(rev())//文件名加MD5后綴 .pipe(gulp.dest(buildBasePath+'img'))//輸出到css目錄 .pipe(rev.manifest('rev-img-manifest.json'))//生成一個rev-manifest.json .pipe(gulp.dest('rev'));//將 rev-manifest.json 保存到 rev 目錄內 }); //html壓縮 gulp.task('html',function(){ var options = { removeComments: true,//清除HTML注釋 collapseWhitespace: false,//壓縮HTML collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css" minifyJS: true,//壓縮頁面JS minifyCSS: true//壓縮頁面CSS }; return gulp.src('*.html') .pipe(gulpRemoveHtml())//清除特定標簽 .pipe(removeEmptyLines({removeComments: true}))//清除空白行 .pipe(htmlmin(options)) .pipe(gulp.dest(buildBasePath)); }); //生產使用，替換文件名，common.js替換為build.min.js gulp.task('replacejs', function(){ return gulp.src([buildBasePath+'*.html']) .pipe(replace('common.js', 'build.min.js')) .pipe(gulp.dest(buildBasePath)); }); //生產使用，替換文件名，common.css替換為build.min.css gulp.task('replacecss', function(){ return gulp.src([buildBasePath+'*.html']) .pipe(replace('common.css', 'build.min.css')) .pipe(gulp.dest(buildBasePath)); }); //開發使用，替換文件名，common.js替換為build.js gulp.task('replacejsdev', function(){ return gulp.src([buildBasePath+'*.html']) .pipe(replace('common.js', 'build.js')) .pipe(gulp.dest(buildBasePath)); }); //開發使用，替換文件名，common.css替換為build.css gulp.task('replacecssdev', function(){ return gulp.src([buildBasePath+'*.html']) .pipe(replace('common.css', 'build.css')) .pipe(gulp.dest(buildBasePath)); }); //使用rev替換成md5文件名，這里包括html和css的資源文件也一起 gulp.task('rev', function() { //html，針對js,css,img return gulp.src(['rev/**/*.json', buildBasePath+'**/*.html']) .pipe(revCollector({replaceReved:true })) .pipe(gulp.dest(buildBasePath)); }); gulp.task('revimg', function() { //css，主要是針對img替換 return gulp.src(['rev/**/rev-img-manifest.json', buildBasePath+'css/*.css']) .pipe(revCollector({replaceReved:true })) .pipe(gulp.dest(buildBasePath+'css')); }); //監視文件的變化，有修改時，自動調用default缺省默認任務 gulp.task('watch', function () { gulp.watch('**/*.html', ['default']); }); //監視文件的變化，有修改時，自動調用default2缺省默認任務 gulp.task('watch2', function () { gulp.watch('**/*.html', ['default2']); }); //監視文件的變化，有修改時，自動調用defaultdev缺省默認任務 gulp.task('watchdev', function () { gulp.watch('**/*.html', ['defaultdev']); }); //缺省默認任務，輸出的js和css文件都帶參數 /*執行順序： * 1、清除編譯輸出目錄build的全部文件 * 2、復制第三方組件依賴到build文件夾 * 3、使用帶md5對js文件進行壓縮打包一個文件，命名根據gulp-rev插件md5之后的命名進行命名，如build-asdf123.min.js，並輸出到build/js文件夾 * 4、使用帶md5對cs文件進行壓縮打包一個文件，命名根據gulp-rev插件md5之后的命名進行命名，如build-asd323.min.css，並輸出到build/cs文件夾 * 5、（可選）使用帶md5對img文件夾的全部文件進行重命名，命名根據gulp-rev插件md5之后的命名進行命名，如common-asdf123.jpg，並輸出到build/img文件夾；如果這部不操作，下面第10步將不執行。 * 6、將build目錄下的全部html頁面進行壓縮處理，采用gulp-minhtml插進 * 7、由於項目上使用了模塊開發，然后每個頁面上都會引入common.js文件，而合並后的js文件為build.min.js，所以使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上 * 8、再次在build目錄上，將html進行common.css文件替換成build.min.css * 9、使用gulp-rev-collectorc插件對剛才生成帶參數的js和css文件在html頁面上進行替換，如build.min.js替換成build-asdf123.min.js。還是輸出到build目錄。 * 10、（可選）使用gulp-rev-collectorc插件對剛才生成帶參數的img文件在css文件上進行替換，如common.jpg替換成common-asdf12.jpg。輸出到目錄 * */ gulp.task('default',function(cb){gulpSequence('clean:Build','copy','minifyjsmd5','minifycssmd5','minifyimgmd5','html','replacejs','replacecss','rev','revimg')(cb);}); //默認任務2，輸出的js和css文件不帶參數 /*執行順序： * 1、清除編譯輸出目錄build的全部文件 * 2、復制第三方組件依賴到build文件夾 * 3、對js文件進行壓縮打包一個文件，命名如build.min.js，並輸出到build/js文件夾 * 4、對cs文件進行壓縮打包一個文件，命名如build.min.css，並輸出到build/cs文件夾 * 5、將build目錄下的全部html頁面進行壓縮處理，采用gulp-minhtml插進 * 6、由於項目上使用了模塊開發，然后每個頁面上都會引入common.js文件，而合並后的js文件為build.min.js，所以使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上 * 7、再次在build目錄上，將html進行common.css文件替換成build.min.css * */ gulp.task('default2',function(cb){gulpSequence('clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejs','replacecss')(cb);}); //開發使用默認任務，js和css不帶參數，且不合並 /*執行順序： * 1、清除編譯輸出目錄build的全部文件 * 2、復制第三方組件依賴到build文件夾 * 3、對js文件進行壓縮打包一個文件，命名如build.js，並輸出到build/js文件夾 * 4、對cs文件進行壓縮打包一個文件，命名如build.css，並輸出到build/cs文件夾 * 5、將build目錄下的全部html頁面進行壓縮處理，采用gulp-minhtml插進 * 6、由於項目上使用了模塊開發，然后每個頁面上都會引入common.js文件，而合並后的js文件為build.js，所以使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上 * 7、再次在build目錄上，將html進行common.css文件替換成build.css * */ gulp.task('defaultdev',function(cb){gulpSequence('clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejsdev','replacecssdev')(cb);});
最后附上package.json文件：
{ "name": "test", "version": "1.0.0", "description": "test", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "jim", "license": "MIT", "devDependencies": { "del": "^2.2.2", "gulp": "^3.9.1", "gulp-awaitable-tasks": "^1.0.0", "gulp-clean": "^0.3.2", "gulp-concat": "^2.6.1", "gulp-htmlmin": "^3.0.0", "gulp-jshint": "^2.0.4", "gulp-minify-css": "^1.2.4", "gulp-order": "^1.1.1", "gulp-remove-empty-lines": "0.0.8", "gulp-remove-html": "^1.3.0", "gulp-rename": "^1.2.2", "gulp-replace": "^0.5.4", "gulp-rev": "^7.1.2", "gulp-rev-collector": "^1.0.5", "gulp-sequence": "^0.4.6", "gulp-sync": "^0.1.4", "gulp-sync-task": "^1.0.3", "gulp-uglify": "^2.0.0", "jshint": "^2.9.4", "run-sequence": "^1.2.2" } }