摘要：在資源很多時，例如圖片的復制，這個會加快任務的執行速度，特別是需要實時預覽時，減少延遲。但是作為個入門短時間內還是不能夠被取代得了的。

tags: gulp 前端自動化開發

npm倉庫下載地址
https://www.npmjs.com/package/cddgulp

[TOC]
本人自用在此基礎上的一個完整自用框架——cddgulp
npm點這里
github點這里
另一個基于vuepack改寫的自用的webpack2.x+vue2.x的實時預覽前端腳手架,點這里

html文件復制、自動更改hash文件鏈接、文件內容替換

css文件復制與hash

img文件的復制與hash

js文件的復制、壓縮、合并、重命名、hash

對文件的監視與自動更新

其他配合項包括compass/sas預編譯，browser-sync實時預覽

 "devDependencies": {
    "del": "^2.2.1",
    "gulp": "^3.9.1",
    "gulp-cached": "^1.1.0",
    "gulp-changed": "^1.3.1",
    "gulp-clean-css": "^2.0.12",
    "gulp-concat": "^2.6.0",
    "gulp-csscomb": "^3.0.7",
    "gulp-htmlmin": "^2.0.0",
    "gulp-imagemin": "^3.0.2",
    "gulp-replace": "^0.5.4",
    "gulp-rev": "^7.1.0",
    "gulp-rev-collector": "^1.0.5",
    "gulp-uglify": "^2.0.0"
  }

1.del
: 該插件不是gulp的插件而是node的插件或者一個功能，作用是刪除文件/文件夾。

2.gulp
: 這個就不用多說了，本地gulp插件

3.gulp-cached
: 這個插件用來對文件進行復制時，只是對那行更改過的文件進行復制，減少不必要的資源操作。在資源很多時，例如圖片的復制，這個會加快gulp任務的執行速度，特別是需要實時預覽時，減少延遲。

4.gulp-changed
: 這個插件跟gulp-cacahed插件類似，他主要是在對文件進行復制時，如果該文件沒有改動過，那么就不允許該文件復制到目標文件件。（自己實測時看不出來，而且如果使用cached,就不用使用這個了）

5.gulp-clean-css
: 用來對css文件進行去注釋，和壓縮

6.gulp-concat
: 對文件進行合并，而且可以添加一個string參數，用來對合并的文件進行重命名

7.gulp-csscomb
: 對css進行版本支持

8.gulp-htmlmin
: 對html文件進行壓縮，如去換行，去注釋等

9.gulp-imagemin
: 對jpg、png等格式問的圖片進行無損的壓縮（特別有用，但是在你的node-modules中的插件過多時會存在圖片壓縮過慢的問題問題）

10.gulp-replace
: 用來替換文本文件中的內容

11.gulp-rev
: 對文件進行hash命名，并且生成對應的json文件

12.gulp-rev-collector
: 結合gulp-rev對hash的文件在html文件中進行引用路徑更改

13.gulp-uglify
: 對js文件進行壓縮，有人叫這個作“丑化”，確實挺丑的

本人沒有在gulpfile.js文件使用實時預覽的插件，因為這些任務已經很多了，gulp雖然速度很快，但是執行時也會有些遲緩，所以只是外部使用了browser-sync實時預覽。

此外css預編譯我使用的是sass，在集成到gulp預編譯時如果出現了錯誤的語法，整個gulp監視任務就會完全停止，所以我是用的是外部sass監視。這個可以跟gulp一塊使用，gulp只是監視css文件，然后進行自己的操作即可，二者各自做各自的事，出錯了也不會有中斷這樣的影響。

我的開發目錄

源文件gulpfile.js 提取碼：aea6

var gulp = require("gulp");
var    changed = require("gulp-changed");
var    concat = require("gulp-concat");
var    htmlmin = require("gulp-htmlmin");
var    imagemin = require("gulp-imagemin");
var    uglify = require("gulp-uglify");
var    cleanCss = require("gulp-clean-css");
var cache = require("gulp-cached");
var rev = require("gulp-rev");
var replace = require("gulp-replace");
var del = require("del");
var revCollector = require("gulp-rev-collector");

: 代碼如下

//對常用的東西進行變量化


var dir = "../dist";    //對目標根目錄進行變量

gulp.task("copyHtml", function(){
    gulp.src("*.html")      //當前目錄的HTML文件
    .pipe(cache("copyHtml"))       //只對修改的文件進行復制
    //.pipe(changed(dir))//只有變化的文件能夠通過
    .pipe(htmlmin({collapseWhitespace: true,
        removeComments: true
    }))     //對html文件進行壓縮處理，去換行，去注釋
    .pipe(replace("a.js","main.js"))        //對html文件中的指定的文字進行替換
    .pipe(gulp.dest(dir));      //復制到目標文件
});

: 代碼如下

gulp.task("copyCss",function(){
    del([dir+"/css/**/*"],{force: true});   //  由于每次更改css文件，進行hash的話舊的文件就會殘留，因此每次寫入前需要進行清空。
    gulp.src("css/main.css")
    // .pipe(changed(dir+"/css"))
    .pipe(cleanCss({conpatibility: "ie8"}))     //進行壓縮
    .pipe(rev())        //進行hash
    .pipe(gulp.dest(dir+"/css"))        
    .pipe(rev.manifest())       //產生hash對應的json文件
    .pipe(gulp.dest(dir+"/css"));
});

: 代碼如下

gulp.task("copyImg", function () {
    gulp.src("img/*")
    .pipe(cache("copyImg"))     
    // .pipe(changed(dir+"/img"))
    .pipe(imagemin())   //對圖片進行壓縮
    .pipe(rev())
    .pipe(gulp.dest(dir+"/img"))
    .pipe(rev.manifest())
    .pipe(gulp.dest(dir+"/img"));
});

: 代碼如下

gulp.task("copyJs", function(){
    del([dir+"/js/**/*"],{force: true});    //與css同理刪除
    gulp.src("js/*.js")
    .pipe(cache("copyJs"))
    .pipe(concat("main.js"))    //對js文件進行合并和重命名
    .pipe(uglify())        //對合并后的文件進行壓縮
    .pipe(rev())
    .pipe(gulp.dest(dir+"/js"))
    .pipe(rev.manifest())
    .pipe(gulp.dest(dir+"/js"));
});

: 代碼如下

gulp.task("rev",function(){
      gulp.src([dir+"/**/*.json", dir+"/*.html"])     //找到json，和目標html文件路徑
     .pipe(revCollector({
         replaceReved: true,
         // dirReplacements: {
         //     "a.js":"main.js"
         // }這里主要是對文件路徑中的文字進行修改
     }))     //進行替換
     .pipe(gulp.dest(dir));
 });
 

: 代碼如下

gulp.task("watch",function(){
    gulp.watch("*.html", ["copyHtml"]);     //監視html文件，如果發生變化就進行復制
    gulp.watch("css/main.css", ["copyCss"]);       //監視css文件，如果發生變化就進行復制
    gulp.watch("img/*.{jpg,png}",["copyImg"]);      //監視圖片，如果發生變化就進行復制
    gulp.watch("js/*.js", ["copyJs"]);      //監視js文件，如果發生變化就進行復制
    gulp.watch(dir+"/{**/*.json,/*.html}", ["rev"])     //監視json文件和html文件，如果發生變化就進行hash命名，和引用更改
});

: 代碼如下

gulp.task("default",["copyHtml","copyCss","copyImg","copyJs","watch"]
);

: 代碼如下

gulp.task("cleanCache", function(){
    delete cache.caches["copyHtml","copyImg","copyJs"];
})      //由于cache不會自動清除緩存的東西，所以需要手動消除


gulp.task("lastWorks",["cleanCache"] );

: 代碼如下慎用

 gulp.task("clean", function(){
     del(["../dist/**/*"],{force: true});
 });        //清除dist中所有的文件和文件夾，適合新的項目開始時使用

: 代碼如下

 gulp.task("packageProject",function(){
     var zip = require("gulp-zip"); 
     var fileName = "projectNew_0.zip";
     gulp.src(["../dist/**/*","!../dist/{css,js,img}/*.json"])      //找到目標文件夾并且進行去除json文件處理
     .pipe(zip(fileName))        //對文件進行壓縮和重命名
     .pipe(gulp.dest("../../projectNew"));       //壓縮到指定文件夾
 });

現在流行的webpack包管理軟件又要讀前端進行革命了。但是gulp作為個入門短時間內還是不能夠被取代得了的。

點擊這里