基礎教程：http://www.imooc.com/search/article?words=gulp

常用外掛：http://www.mamicode.com/info-detail-517085.html

系列教程：http://www.w3cplus.com/blogs/blueed

視訊教程：http://www.jikexueyuan.com/course/2261.html

細節注意：http://www.cnblogs.com/2050/p/4198792.html

revCollector-路徑替換-詳細介紹：http://blog.csdn.net/hayleyxia/article/details/46969711

revCollector-路徑替換-預設只首次替換成功：http://blog.csdn.net/u010869754/article/details/52182015

gulp.spritesmith-精靈圖：http://www.tuicool.com/articles/umiEbq

gulp-file-include-模板複用功能：https://www.npmjs.com/package/gulp-file-include

淘寶 NPM 映象：https://npm.taobao.org/

注意一點：儘量不要用npm直接安裝外掛，國外的東西網速很慢，很可能出現各種缺少模組的的現象，所以請使用國內的npm映象安裝外掛，連結在上一行

以下是我常用的外掛package.json：

{
  "devDependencies": {
    "browser-sync": "^2.16.0",
    "gulp": "^3.9.1",
    "gulp-file-include": "^0.14.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-load-plugins": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-sass": "^2.3.2",
    "gulp-sequence": "^0.4.6",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.9",
    "gulp.spritesmith": "^6.2.1"
  }
}
 

1. 圖片壓縮外掛 gulp-imagemin 好像跟 node版本有關，如果 node版本過高，貌似會報錯
2. 不建議使用 自動載入外掛 gulp-load-plugins，有點坑

var gulp = require('gulp'),
    sequence = require('gulp-sequence'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    rev = require('gulp-rev'),
    revc = require('gulp-rev-collector');
  
// 壓縮js並加min字尾
gulp.task('uglify', function () {  
    return gulp.src(['./js/minichat.js', './skin/h5chat/js/app.js'])  
    .pipe(rename({suffix:'.min'}))  
    .pipe(uglify())  
    .pipe(gulp.dest('./skin/ding'));  
}); 

// 給檔名加上MD5字串  
gulp.task('rev', function () {  
    return gulp.src(['./css/minichat.css', './skin/h5chat/css/app.css', './skin/ding/minichat.min.js', './skin/ding/app.min.js'])  
        .pipe(rev())  
        .pipe(gulp.dest('./skin/ding'))  
        .pipe(rev.manifest())// 生成清單json
        .pipe(gulp.dest('./skin/ding'));  
});
  
// 替換html中引用的檔名，和任務rev聯合使用  
gulp.task('revc', function() {  
    return gulp.src(['./skin/ding/*.json', './h5chat.html'])// 讀取清單json和html     
        .pipe(revc({  
            replaceReved: true// 必加，模板中已經被替換的檔案還能再被替換  
        }))  
        .pipe(gulp.dest('./skin/ding'));  
});  

    
// 複製頁面，改變html檔名，防止快取
gulp.task('revHtml', function () {  
    return gulp.src('./skin/ding/h5chat.html')  
        .pipe(rev())  
        .pipe(gulp.dest('./'))  
        .pipe(rev.manifest())// 生成清單json
        .pipe(rename({suffix:'.html'}))  
        .pipe(gulp.dest('./skin/ding'));  
});  

// 控制任務執行的順序
gulp.task('sequence', sequence('uglify', 'rev', 'revc', 'revHtml'));
  
// 監控  
gulp.task('watch', function() {  
    gulp.watch(['./css/minichat.css', './skin/h5chat/css/app.css', './js/minichat.js', './skin/h5chat/js/app.js', './h5chat.html'], function (event) {
        sequence('uglify', 'rev', 'revc', 'revHtml') (function (err) {
            if (err) console.log(err)
        })
    })
}); 
 

案例2

// 壓縮js並加min字尾
var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

gulp.task('uglify', function () {
    return gulp.src('./js/*.js')
    .pipe(rename({suffix:'.min'}))
    .pipe(uglify({

    }))
    .pipe(gulp.dest('./js'));
});

案例3

// 自動重新整理  
var gulp = require('gulp');  
var browserSync = require('browser-sync').create();  
  
  
gulp.task('browserSync', function() {  
    browserSync.init({  
        server: "./"  
    });  
  
    gulp.watch(['*.html', 'js/abc/*.js']).on('change', browserSync.reload);  
});

案例4

var gulp = require('gulp');
//載入gulp-load-plugins外掛，並馬上執行它，不建議使用該外掛，很坑，所以以下可能報錯
var plugins = require('gulp-load-plugins')();

//模板複用
gulp.task('fileinclude', function() {
    return gulp.src(['./*.html'])
    .pipe(plugins.fileinclude())
    .pipe(gulp.dest('../'));
});

//sass(檔名前面帶有_的，預設不被編譯)
gulp.task('sass', function() {
    return gulp.src('./scss/*.scss')
    .pipe(plugins.sass({
        outputStyle: 'compressed'
    })).pipe(gulp.dest('../css'));
});

//圖片無失真壓縮
gulp.task('imagemin', function() {
    return gulp.src('./images/*')
    .pipe(plugins.imagemin())
    .pipe(gulp.dest('../images'));
});

//給檔名加上MD5字串
gulp.task('rev', function () {
    return gulp.src('js/*.js')
        .pipe(plugins.rev())
        .pipe(gulp.dest('dist/js'))
        .pipe(plugins.rev.manifest())
        .pipe(gulp.dest('dist'));
});

//替換html中引用的檔名，和任務rev聯合使用
gulp.task('revc', function() {
    return gulp.src(['dist/*.json', 'rev.html'])//讀取清單json和html
        .pipe(plugins.revCollector({
        	replaceReved: true//必加，模板中已經被替換的檔案還能再被替換
        }))
        .pipe(gulp.dest('./'));
});

//自動生成精靈圖
gulp.task('sprite', function () {
    return gulp.src('images/*.png')
    .pipe(plugins.spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.scss',
        cssFormat: 'scss'
    }))
    .pipe(gulp.dest('images'));
});

//監控
gulp.task('watch', function() {
  	gulp.watch('js/*.js', ['rev']);
  	gulp.watch('js/*.js', ['revc']);
});