gulp實現打包js/css/img/html文件，並對js/css/img文件加上版本號

時間  2019-11-18
標籤 gulp 實現 打包 css img html 文件 加上 本號 欄目 JavaScript 简体版
原文   原文鏈接

參考打包教程：javascript

http://www.cnblogs.com/tugenhua0707/p/4069769.htmlcss

http://www.cnblogs.com/tugenhua0707/p/4982646.htmlhtml

http://www.tuicool.com/articles/viequayjava

https://github.com/Platform-CUF/use-gulpnode

實現要點：git

一、如何運行gulp的任務，加入新建好一個以下任務：github

// 語法檢查
gulp.task('jshint', function () {
    gulp.src('js/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

那麼在命令行上運行：gulp jshintnpm

二、爲何安裝了全局還要安裝本地，參考這個：http://www.cnblogs.com/EasonJim/p/6207201.htmljson

三、對於npm的命令詳解，參考這個：http://www.cnblogs.com/EasonJim/p/6206179.htmlgulp

四、我使用的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文件都帶參數
/*執行順序：
* 一、清除編譯輸出目錄build的所有文件
* 二、複製第三方組件依賴到build文件夾
* 三、使用帶md5對js文件進行壓縮打包一個文件，命名根據gulp-rev插件md5以後的命名進行命名，如build-asdf123.min.js，並輸出到build/js文件夾
* 四、使用帶md5對cs文件進行壓縮打包一個文件，命名根據gulp-rev插件md5以後的命名進行命名，如build-asd323.min.css，並輸出到build/cs文件夾
* 五、（可選）使用帶md5對img文件夾的所有文件進行重命名，命名根據gulp-rev插件md5以後的命名進行命名，如common-asdf123.jpg，並輸出到build/img文件夾；若是這部不操做，下面第10步將不執行。
* 六、將build目錄下的所有html頁面進行壓縮處理，採用gulp-minhtml插進
* 七、因爲項目上使用了模塊開發，而後每一個頁面上都會引入common.js文件，而合併後的js文件爲build.min.js，因此使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上
* 八、再次在build目錄上，將html進行common.css文件替換成build.min.css
* 九、使用gulp-rev-collectorc插件對剛纔生成帶參數的js和css文件在html頁面上進行替換，如build.min.js替換成build-asdf123.min.js。仍是輸出到build目錄。
* 十、（可選）使用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文件不帶參數
/*執行順序：
 * 一、清除編譯輸出目錄build的所有文件
 * 二、複製第三方組件依賴到build文件夾
 * 三、對js文件進行壓縮打包一個文件，命名如build.min.js，並輸出到build/js文件夾
 * 四、對cs文件進行壓縮打包一個文件，命名如build.min.css，並輸出到build/cs文件夾
 * 五、將build目錄下的所有html頁面進行壓縮處理，採用gulp-minhtml插進
 * 六、因爲項目上使用了模塊開發，而後每一個頁面上都會引入common.js文件，而合併後的js文件爲build.min.js，因此使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上
 * 七、再次在build目錄上，將html進行common.css文件替換成build.min.css
 * */
gulp.task('default2', ['clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejs','replacecss']);
//開發使用默認任務，js和css不帶參數，且不合並
/*執行順序：
 * 一、清除編譯輸出目錄build的所有文件
 * 二、複製第三方組件依賴到build文件夾
 * 三、對js文件進行壓縮打包一個文件，命名如build.js，並輸出到build/js文件夾
 * 四、對cs文件進行壓縮打包一個文件，命名如build.css，並輸出到build/cs文件夾
 * 五、將build目錄下的所有html頁面進行壓縮處理，採用gulp-minhtml插進
 * 六、因爲項目上使用了模塊開發，而後每一個頁面上都會引入common.js文件，而合併後的js文件爲build.js，因此使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上
 * 七、再次在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文件都帶參數
/*執行順序：
* 一、清除編譯輸出目錄build的所有文件
* 二、複製第三方組件依賴到build文件夾
* 三、使用帶md5對js文件進行壓縮打包一個文件，命名根據gulp-rev插件md5以後的命名進行命名，如build-asdf123.min.js，並輸出到build/js文件夾
* 四、使用帶md5對cs文件進行壓縮打包一個文件，命名根據gulp-rev插件md5以後的命名進行命名，如build-asd323.min.css，並輸出到build/cs文件夾
* 五、（可選）使用帶md5對img文件夾的所有文件進行重命名，命名根據gulp-rev插件md5以後的命名進行命名，如common-asdf123.jpg，並輸出到build/img文件夾；若是這部不操做，下面第10步將不執行。
* 六、將build目錄下的所有html頁面進行壓縮處理，採用gulp-minhtml插進
* 七、因爲項目上使用了模塊開發，而後每一個頁面上都會引入common.js文件，而合併後的js文件爲build.min.js，因此使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上
* 八、再次在build目錄上，將html進行common.css文件替換成build.min.css
* 九、使用gulp-rev-collectorc插件對剛纔生成帶參數的js和css文件在html頁面上進行替換，如build.min.js替換成build-asdf123.min.js。仍是輸出到build目錄。
* 十、（可選）使用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文件不帶參數
/*執行順序：
 * 一、清除編譯輸出目錄build的所有文件
 * 二、複製第三方組件依賴到build文件夾
 * 三、對js文件進行壓縮打包一個文件，命名如build.min.js，並輸出到build/js文件夾
 * 四、對cs文件進行壓縮打包一個文件，命名如build.min.css，並輸出到build/cs文件夾
 * 五、將build目錄下的所有html頁面進行壓縮處理，採用gulp-minhtml插進
 * 六、因爲項目上使用了模塊開發，而後每一個頁面上都會引入common.js文件，而合併後的js文件爲build.min.js，因此使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上
 * 七、再次在build目錄上，將html進行common.css文件替換成build.min.css
 * */
gulp.task('default2', gulpSequence('clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejs','replacecss'));
//開發使用默認任務，js和css不帶參數，且不合並
/*執行順序：
 * 一、清除編譯輸出目錄build的所有文件
 * 二、複製第三方組件依賴到build文件夾
 * 三、對js文件進行壓縮打包一個文件，命名如build.js，並輸出到build/js文件夾
 * 四、對cs文件進行壓縮打包一個文件，命名如build.css，並輸出到build/cs文件夾
 * 五、將build目錄下的所有html頁面進行壓縮處理，採用gulp-minhtml插進
 * 六、因爲項目上使用了模塊開發，而後每一個頁面上都會引入common.js文件，而合併後的js文件爲build.js，因此使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上
 * 七、再次在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文件都帶參數
/*執行順序：
* 一、清除編譯輸出目錄build的所有文件
* 二、複製第三方組件依賴到build文件夾
* 三、使用帶md5對js文件進行壓縮打包一個文件，命名根據gulp-rev插件md5以後的命名進行命名，如build-asdf123.min.js，並輸出到build/js文件夾
* 四、使用帶md5對cs文件進行壓縮打包一個文件，命名根據gulp-rev插件md5以後的命名進行命名，如build-asd323.min.css，並輸出到build/cs文件夾
* 五、（可選）使用帶md5對img文件夾的所有文件進行重命名，命名根據gulp-rev插件md5以後的命名進行命名，如common-asdf123.jpg，並輸出到build/img文件夾；若是這部不操做，下面第10步將不執行。
* 六、將build目錄下的所有html頁面進行壓縮處理，採用gulp-minhtml插進
* 七、因爲項目上使用了模塊開發，而後每一個頁面上都會引入common.js文件，而合併後的js文件爲build.min.js，因此使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上
* 八、再次在build目錄上，將html進行common.css文件替換成build.min.css
* 九、使用gulp-rev-collectorc插件對剛纔生成帶參數的js和css文件在html頁面上進行替換，如build.min.js替換成build-asdf123.min.js。仍是輸出到build目錄。
* 十、（可選）使用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文件不帶參數
/*執行順序：
 * 一、清除編譯輸出目錄build的所有文件
 * 二、複製第三方組件依賴到build文件夾
 * 三、對js文件進行壓縮打包一個文件，命名如build.min.js，並輸出到build/js文件夾
 * 四、對cs文件進行壓縮打包一個文件，命名如build.min.css，並輸出到build/cs文件夾
 * 五、將build目錄下的所有html頁面進行壓縮處理，採用gulp-minhtml插進
 * 六、因爲項目上使用了模塊開發，而後每一個頁面上都會引入common.js文件，而合併後的js文件爲build.min.js，因此使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上
 * 七、再次在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不帶參數，且不合並
/*執行順序：
 * 一、清除編譯輸出目錄build的所有文件
 * 二、複製第三方組件依賴到build文件夾
 * 三、對js文件進行壓縮打包一個文件，命名如build.js，並輸出到build/js文件夾
 * 四、對cs文件進行壓縮打包一個文件，命名如build.css，並輸出到build/cs文件夾
 * 五、將build目錄下的所有html頁面進行壓縮處理，採用gulp-minhtml插進
 * 六、因爲項目上使用了模塊開發，而後每一個頁面上都會引入common.js文件，而合併後的js文件爲build.js，因此使用gulp-replace插進對html頁面進行替換，並將html文件輸出到build目錄上
 * 七、再次在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"
  }
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程