鑑於一開始研究gulp，最頭疼的就是不知道紛繁複雜的gulp外掛的作用，我覺得有必要寫一篇wiki科普一下。
1.gulp-sass
安裝方法：npm install gulp-sass --save-dev
作用：預編譯 sass 檔案為 css 檔案
例子：
  'use strict';
 
  var gulp = require('gulp');
  var sass = require('gulp-sass');
 
  gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest('./css'));
  });
2.gulp-concat
安裝方法：npm install gulp-concat --save-dev
作用:合併javascript檔案，減少網路請求
例子：
  var gulp = require('gulp'),
      concat = require('gulp-concat');
 
  gulp.task('testConcat', function () {
      gulp.src('src/js/*.js')
          .pipe(concat('all.js'))//合併後的檔名
          .pipe(gulp.dest('dist/js'));
  });
3.gulp-clean-css
安裝方法:npm install gulp-clean-css --save-dev
作用：壓縮css檔案，減小檔案大小，並給引用url新增版本號避免快取
例子：
  var gulp = require('gulp');
  var cleanCSS = require('gulp-clean-css');
 
  gulp.task('minify-css', function() {
    return gulp.src('styles/*.css')
      .pipe(cleanCSS({compatibility: 'ie8'}))  //相容性
      .pipe(gulp.dest('dist'));
  });
4.gulp-less
安裝方法：npm install gulp-less --save-dev
作用：將less檔案編譯成css，當有less檔案發生改變自動編譯less，並保證less語法錯誤或出現異常時能正常工作並提示錯誤資訊。
例子：
  var gulp = require('gulp'),
      less = require('gulp-less');
 
  gulp.task('testLess', function () {
      gulp.src('src/less/index.less')
          .pipe(less())
          .pipe(gulp.dest('src/css'));
  });
5.gulp-autoprefixer
安裝方法：npm install gulp-autoprefixer --save-dev
作用：根據設定瀏覽器版本自動處理瀏覽器字首
例子：
  var gulp = require('gulp'),
      autoprefixer = require('gulp-autoprefixer');
 
  gulp.task('testAutoFx', function () {
      gulp.src('src/css/index.css')
          .pipe(autoprefixer({
              browsers: ['last 2 versions', 'Android >= 4.0'],  //主流瀏覽器的最新兩個版本，安卓4.0以上
              cascade: true, //是否美化屬性值 預設：true 像這樣：
              //-webkit-transform: rotate(45deg);
              //        transform: rotate(45deg);
              remove:true //是否去掉不必要的字首 預設：true 
          }))
          .pipe(gulp.dest('dist/css'));
  });
6.gulp-uglify
安裝方法：npm install gulp-uglify --save-dev
作用：壓縮javascript檔案，減小檔案大小
例子：
  var gulp = require('gulp'),
      uglify = require('gulp-uglify');
 
  gulp.task('jsmin', function () {
      gulp.src('src/js/index.js')
          .pipe(uglify())
          .pipe(gulp.dest('dist/js'));
  });
7.gulp-minify-html
安裝方法：npm install gulp-minify-html --save-dev
作用：壓縮html檔案
例子：
  gulp.task('minify-html', function () {
      gulp.src('src/*.html') // 要壓縮的html檔案
      .pipe(minifyHtml())    //壓縮
      .pipe(gulp.dest('dist/html'));
  });
8.gulp-rename
安裝方法：npm install gulp-rename --save-dev
作用：重新命名檔案流中的檔案
例子：
  var gulp = require('gulp'),
      rename = require('gulp-rename'),
 
  gulp.task('rename', function () {
      gulp.src('src/1.js')
      .pipe(rename('1.min.js')) //會將1.js重新命名為1.min.js
      .pipe(gulp.dest('js'));
  });
9.gulp-jshint
安裝方法：npm install gulp-jshint --save-dev
作用：檢查js程式碼
例子：
  var gulp = require('gulp'),
      jshint = require("gulp-jshint");
 
  gulp.task('jsLint', function () {
      gulp.src('src/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter()); // 輸出檢查結果
  });
10.gulp-livereload
安裝方法:npm install gulp-livereload --save-dev
作用：當代碼變化時，它可以幫我們自動重新整理頁面
例子：
  var gulp = require('gulp'),
      less = require('gulp-less'),
      livereload = require('gulp-livereload');
  gulp.task('less', function() {
    gulp.src('less/*.less')
      .pipe(less())
      .pipe(gulp.dest('css'))
      .pipe(livereload());
  });
  gulp.task('watch', function() {
    livereload.listen(); //要在這裡呼叫listen()方法
    gulp.watch('less/*.less', ['less']);
 });
11.browser-sync
安裝方法：npm install browser-sync --save-dev
作用：也是用來自動重新整理頁面的
例子：具體方法見我另一篇部落格,地址是：http://blog.csdn.net/han123xue/article/details/52689779
12.gulp-load-plugins
安裝方法:npm install gulp-load-plugins
作用：自動幫你載入package.json檔案裡的gulp外掛，並且不會一開始就載入全部的，而是當你使用哪個才載入哪個
例子：
  var gulp = require('gulp');
  var $ = require('gulp-load-plugins')();
  gulp.task('lint', function () {
    return gulp.src(jsFilePath)
      .pipe($.jshint())
      .pipe($.jshint.reporter('default'));
  });
好了，gulp外掛還有很多，等著大家去探索，我暫且就介紹這麼多。