gulp經常使用功能集合（開發和生產分離、靜態資源壓縮優化、代碼優化、實時預覽、hash）

gulp經常使用功能集合（開發和生產分離、靜態資源壓縮優化、代碼優化、實時預覽、hash）

tags: gulp 前端自動化開發

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

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

1.功能須要

1. html文件複製、自動更改hash文件連接、文件內容替換

2. css文件複製與hash

3. img文件的複製與hash

4. js文件的複製、壓縮、合併、重命名、hash

5. 對文件的監視與自動更新

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

2.須要的gulp插件與詳解

"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文件，而後進行本身的操做便可，兩者各自作各自的事，出錯了也不會有中斷這樣的影響。

3.gulpfile.js文件代碼詳解。

個人開發目錄

源文件gulpfile.js 提取碼：aea6

1.需引入的插件

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');

2.各個任務詳解

1.複製html task : copyHtml

: 代碼以下

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


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));      //複製到目標文件
});

2.複製css task：copyCss

: 代碼以下

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'));
});

3.複製圖片 task：copyImg

: 代碼以下

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'));
});

4.複製js文件 task：copyJs

: 代碼以下

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'));
});

5.對html中的靜態資源（css,js,image)進行hash後的文件引用替換

: 代碼以下

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));
 });

6.監視文件，並進行自動操做 task : watch

: 代碼以下

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命名，和引用更改
});

7.設置默認任務 task : default

: 代碼以下

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

8.lastWorks 最後的任務

: 代碼以下

gulp.task('cleanCache', function(){
    delete cache.caches['copyHtml','copyImg','copyJs'];
})      //因爲cache不會自動清除緩存的東西，因此須要手動消除


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

9.其餘任務——清除開發文件夾（dist)

: 代碼以下慎用

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

10.新任務開始前的舊任務打包 task：packageProject

: 代碼以下

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'));       //壓縮到指定文件夾
 });

4.總結

如今流行的webpack包管理軟件又要讀前端進行革命了。可是gulp做爲個入門短期內仍是不可以被取代得了的。

5.github項目地址：

點擊這裏