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

tags: gulp 前端自動化開發(fā)

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

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

html文件復(fù)制、自動更改hash文件鏈接、文件內(nèi)容替換

css文件復(fù)制與hash

img文件的復(fù)制與hash

js文件的復(fù)制、壓縮、合并、重命名、hash

對文件的監(jiān)視與自動更新

其他配合項(xiàng)包括compass/sas預(yù)編譯，browser-sync實(shí)時預(yù)覽

 "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
: 這個插件用來對文件進(jìn)行復(fù)制時，只是對那行更改過的文件進(jìn)行復(fù)制，減少不必要的資源操作。在資源很多時，例如圖片的復(fù)制，這個會加快gulp任務(wù)的執(zhí)行速度，特別是需要實(shí)時預(yù)覽時，減少延遲。

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

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

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

7.gulp-csscomb
: 對css進(jìn)行版本支持

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

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

10.gulp-replace
: 用來替換文本文件中的內(nèi)容

11.gulp-rev
: 對文件進(jìn)行hash命名，并且生成對應(yīng)的json文件

12.gulp-rev-collector
: 結(jié)合gulp-rev對hash的文件在html文件中進(jìn)行引用路徑更改

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

本人沒有在gulpfile.js文件使用實(shí)時預(yù)覽的插件，因?yàn)檫@些任務(wù)已經(jīng)很多了，gulp雖然速度很快，但是執(zhí)行時也會有些遲緩，所以只是外部使用了browser-sync實(shí)時預(yù)覽。

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

我的開發(fā)目錄

源文件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");

: 代碼如下

//對常用的東西進(jìn)行變量化


var dir = "../dist";    //對目標(biāo)根目錄進(jìn)行變量

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

: 代碼如下

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

: 代碼如下

gulp.task("copyImg", function () {
    gulp.src("img/*")
    .pipe(cache("copyImg"))     
    // .pipe(changed(dir+"/img"))
    .pipe(imagemin())   //對圖片進(jìn)行壓縮
    .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文件進(jìn)行合并和重命名
    .pipe(uglify())        //對合并后的文件進(jìn)行壓縮
    .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"])     //找到j(luò)son，和目標(biāo)html文件路徑
     .pipe(revCollector({
         replaceReved: true,
         // dirReplacements: {
         //     "a.js":"main.js"
         // }這里主要是對文件路徑中的文字進(jìn)行修改
     }))     //進(jìn)行替換
     .pipe(gulp.dest(dir));
 });
 

: 代碼如下

gulp.task("watch",function(){
    gulp.watch("*.html", ["copyHtml"]);     //監(jiān)視html文件，如果發(fā)生變化就進(jìn)行復(fù)制
    gulp.watch("css/main.css", ["copyCss"]);       //監(jiān)視css文件，如果發(fā)生變化就進(jìn)行復(fù)制
    gulp.watch("img/*.{jpg,png}",["copyImg"]);      //監(jiān)視圖片，如果發(fā)生變化就進(jìn)行復(fù)制
    gulp.watch("js/*.js", ["copyJs"]);      //監(jiān)視js文件，如果發(fā)生變化就進(jìn)行復(fù)制
    gulp.watch(dir+"/{**/*.json,/*.html}", ["rev"])     //監(jiān)視json文件和html文件，如果發(fā)生變化就進(jìn)行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中所有的文件和文件夾，適合新的項(xiàng)目開始時使用

: 代碼如下

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

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

點(diǎn)擊這里