可供使用的外掛：

編譯

gulp-sass - 通過 libsass將Sass編譯成 CSS

gulp-ruby-sass - 通過 Ruby Sass將Sass編譯成CSS

gulp-compass - 通過 Ruby Sass和CompassSass編譯成CSS

gulp-less - Less編譯成 CSS.

gulp-stylus - Stylus 編譯成 CSS.

gulp-postcss - Pipe CSS 通過 PostCSS processors with a single parse.

gulp-coffee - Coffeescript 編譯成 JavaScript.

gulp-typescript - TypeScript編譯成JavaScript.

gulp-react - Facebook React JSX 模板編譯成JavaScript.

webpack-stream - 將webpack整合在Gulp中使用。

gulp-babel - ES6編譯成ES5 通過 babel.

gulp-traceur - ES6編譯成ES5 通過 Traceur.

gulp-regenerator - ES6編譯成ES5 通過 Regenerator.

gulp-myth - Myth - a polyfill for future versions of the CSS spec.

合併

gulp-concat - 合併檔案.

壓縮

gulp-clean-css - 壓縮 CSS 通過 clean-css.

gulp-csso - 壓縮 CSS 通過 CSSO.

gulp-uglify - 壓縮 JavaScript 通過 UglifyJS2.

gulp-htmlmin - 壓縮 HTML 通過 html-minifier.

gulp-minify-html - 壓縮 HTML 通過 Minimize（包已被棄用，建議使用gulp-htmlmin）

gulp-imagemin - 壓縮 PNG, JPEG, GIF and SVG 圖片 通過 imagemin.

gulp-svgmin - 通過Gulp壓縮 SVG 檔案

優化

gulp-uncss - 移除未使用的CSS選擇器通過 UnCSS.

gulp-css-base64 - 將CSS檔案中所有的資源(有url()宣告的)變成base64-encoded 資料的URI字串

gulp-svg2png - 將SVGs轉換成PNGs

gulp-responsive - 生成不同尺寸的圖片

gulp-svgstore -將svg files 合併成一個通過 元素

gulp-iconfont - 通過SVG icons建立 icon fonts

資源注入

gulp-useref - 解析HTML檔案中特殊標籤裡面的script或style標籤，合併成一個script或css檔案，並替換。

gulp-inject - 將指定的css或js檔案以標籤的形式插入到HTML中的指定標誌內。

wiredep - 將Bower依賴自動注入HTML檔案中。

模板

gulp-angular-templatecache - 在$templateCache中聯絡並註冊AngularJS模板

gulp-jade - Jade 轉換成 HTML.

gulp-handlebars - Handlebars模板轉換成 JavaScript.

gulp-hb - Handlebars 模板轉換成 HTML.

gulp-nunjucks - Nunjucks模板轉換成JavaScript.

gulp-dustjs - Dust模板轉換成JavaScript.

gulp-riot - Riot模板轉換成JavaScript.

gulp-markdown - Markdown → HTML.

gulp-template - Lodash 模板轉換成JavaScript.

gulp-swig - Swig模板轉換成HTML.

gulp-remark - Gulp plugin for [remark]的Gulp外掛(https://github.com/wooorm/remark) 通過外掛處理markdown

程式碼校驗

gulp-csslint - 通過CSSLint自動校驗CSS.

gulp-htmlhint - 通過HTMLHint校驗HTML.

gulp-jshint - 通過JSHint發現錯誤和潛在的問題.

gulp-jscs - 通過jscs檢查JavaScript程式碼風格.

gulp-coffeelint - 一種用來保證CoffeeScript程式碼風格統一的檢查。

gulp-tslint - gulp的TypeScript程式碼校驗外掛.

gulp-eslint - ECMAScript/JavaScript程式碼校驗.

gulp-w3cjs - 通過w3cjs檢驗HTML.

gulp-lesshint - 通過lesshint校驗LESS.

實時載入

browser-sync - 保證多個瀏覽器或裝置網頁同步顯示 (recipes).

gulp-livereload - Gulp的實時載入外掛.

快取

gulp-changed - 僅讓發生改變的檔案通過.

gulp-cached - 一個簡單的檔案記憶體快取.

gulp-remember - 記憶並回收通過了的檔案.

gulp-newer - 只讓新的原始碼通過.

流控制

merge-stream - 合併多個流到一個插入的流.

streamqueue - 逐漸輸入佇列的流.

run-sequence - 按要求執行一些依賴的Gulptask.

gulp-if - 按照條件執行task.

日誌

gulp-notify - Gulp的通知外掛.

gulp-size - 顯示你的專案的大小.

gulp-debug - 通過除錯檔案流來觀察那些檔案通過了你的Gulp管道.

測試

gulp-mocha - 執行Mocha測試用例.

gulp-jasmine - 在Node.js中執行Jasmine 2 測試用例.

gulp-protractor - 為Protractor測試用例包裹Gulp.

gulp-coverage - 為Node.js覆蓋相對於執行的測試執行獨立的報告.

gulp-karma - 通過Gulp執行Karma測試用例.

gulp-ava- 通過Gulp執行AVA 測試用例.

其他外掛

gulp-util - 包含一系列有用外掛.

gulp-plumber - 防止錯誤引起管道中斷Prevent pipe breaking caused by errors.

gulp-load-plugins - 自動載入Gulp外掛.

main-bower-files - 構建時自動獲取bower庫的檔案.

autoprefixer - 解析CSS且根據規則新增瀏覽器相容性字首.

gulp-sourcemaps - 提供source map支援.

gulp-replace - Gulp的一個字串替換外掛.

gulp-rename - 輕鬆重新命名檔案.

gulp-rev - 在靜態檔名的後面新增hash值，如: unicorn.css → unicorn-d41d8cd98f.css.

del - 使用globs刪除檔案/資料夾.

gulp-exec - 執行一個shell命令.

gulp-strip-debug - 除去javascript程式碼中的console,alert,debugger宣告.

gulp-cssimport - 解析CSS檔案，找到imports,將連線檔案替換成imort宣告.

gulp-inline-css - 將HTML中的css屬性放到style標籤中.

gulp-gh-pages - 將內容釋出到GiHub有頁面.

gulp-ng-annotate - 通過ng-annotate新增Angular依賴注入.

gulp-bump - 通過Gulp Bump任何semvar JSON版本.

gulp-file-include - 通過Gulp Include檔案.

gulp-zip - 以ZIP格式壓縮檔案.

gulp-git - 通過Gulp執行git命令.

gulp-filter - 使用globbing過濾檔案.

gulp-preprocess - 基於自定義內容或環境配置預處理檔案.

常用外掛用法介紹：

1、gulp： 測試、檢查、合併、壓縮、格式化、部署，監聽，優化網頁效能。

首先丟擲一個問題：我們為什麼用gulp？首先先問自己一個問題：平時用sass/less寫css，用jade寫/html程式碼，那麼這些檔案的的測試、檢查、合併、壓縮、格式化、部署，監聽。應該怎麼完成呢？就來壓縮合並來講，可以減少多個css，js檔案請求，優化網頁效能，這樣的工作是否應該有一個很好的解決方案呢？—答案就是gulp

使用npm進行安裝：

npm install gulp -g  //全域性安裝gulp
npm install gulp --save  //本地安裝gulp

使用方法：

gulp有4個屬性，即src，dest，watch，task：

 gulp.task(name[, deps], fn)//定義一個使用 Orchestrator 實現的任務（task）。name:任務的名字，如果你需要在命令列中執行你的某些任務，那麼，請不要在名字中使用空格。deps:型別： Array,一個包含任務列表的陣列，這些任務會在你當前任務執行之前完成。fn:該函式定義任務所要執行的一些操作。

 gulp.src(globs[, options])  //輸出（Emits）符合所提供的匹配模式（glob）或者匹配模式的陣列（array of globs）的檔案,globs型別： String 或 Array

注意：
gulp.src('./src/css/*.css')中有第二個引數base，可以指定基礎路徑，如果不設定，則預設基礎路徑為 * 之前的路徑。
base：'./src/css'
如果設定了 gulp.src('./src/css/*.css',{base：'./'})
則base是'./'
gulp.dest('./dist/css')傳入的引數就是base路徑
base:'./dist/css'
舉個栗子來解釋什麼是替換
gulp.src('./src/css/*.css').pipe().pipe(gulp.dest('./dist/css'))；
那麼最後檔案處理完成的最終路徑是./dist/css/*.css
如果是gulp.src('./src/css/*.css',{base：'./'}).pipe().pipe(gulp.dest('./dist/css'))；
那麼最後檔案處理完成的最終路徑是./dist/css/src/css/*.css


 gulp.dest(path[, options]) //能被 pipe 進來，並且將會寫檔案。並且重新輸出（emits）所有資料，因此你可以將它 pipe 到多個資料夾。如果某資料夾不存在，將會自動建立它。path型別： String or Function

 gulp.watch(glob[, opts], tasks)//監視檔案，並且可以在檔案發生改動時候做一些事情。glob:型別： String or Array,tasks:型別： Array

2、gulp-sass： 通過 libsass將Sass編譯成 CSS

使用npm進行安裝：

npm install gulp-sass --save-dev

使用方法：

1.編譯sass資料夾下的scss型別的檔案為css檔案的寫法：

'use strict';
var gulp = require('gulp');//引入gulp
var sass = require('gulp-sass');//引入gulp-sass
gulp.task('sass', function () {   //建立sass任務名
  return gulp.src('./sass/**/*.scss')  //讀取"./sass/**/"目錄下的所有scss型別檔案
    .pipe(sass().on('error', sass.logError)) //呼叫sass方法編譯成css檔案並列印錯誤日誌，sass()方法用於轉換sass到css
    .pipe(gulp.dest('./css')); //將生成的css檔案放到"./css"資料夾下
});
gulp.task('sass:watch', function () {  //監聽sass檔案的變化
  gulp.watch('./sass/**/*.scss', ['sass']); //在sass任務執行之後，監聽./sass/**/下的所有scss型別檔案
});

2.同步編譯轉換的寫法：

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError)) //呼叫sass.sync方法同步編譯成css檔案並列印錯誤日誌
    .pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {//監聽sass檔案的變化
  gulp.watch('./sass/**/*.scss', ['sass']);
});

3、gulp-less：Less編譯成 CSS

使用gulp-less外掛將less檔案編譯成css，當有less檔案發生改變自動編譯less，並保證less語法錯誤或出現異常時能正常工作並提示錯誤資訊。

使用npm進行安裝：

npm install gulp-less --save-dev

使用方法：

1.編譯less型別的檔案為css檔案的寫法：

var gulp=require('gulp'),//引入gulp
var less=require('gulp-less');//引入gulp-less
gulp.task('testLess',function(){  //建立testLess任務名
    gulp.src('src/less/index.less') //讀取"src/less/"目錄下的所有index.less型別檔案
        .pipe(less())  //呼叫less()將less檔案轉換成css檔案
        .pipe(gulp.dest('src/css')); ////將生成的css檔案放到"src/css"資料夾下
});

2.編譯多個less型別檔案的寫法：

var gulp=require('gulp'),
var less=require('gulp-less');
gulp.task('testLesslist',function(){
    gulp.src(['src/index.less','src/less/detail.less'])//多個檔案以陣列形式傳入
        .pipe(less())
        .pipe(gulp.dest('src/css'));//將會在src/css下生成index.css以及detail.css
});

4、gulp-stylus： Stylus 編譯成 CSS

使用npm進行安裝：

npm install --save-dev gulp-stylus

使用方法：

1.基本寫法：

var gulp = require('gulp');//引入gulp
var stylus = require('gulp-stylus');//引入gulp-stylus
gulp.task('one', function () {//建立one任務
  return gulp.src('./css/one.styl')//讀取"./css/"資料夾下one.styl檔案
    .pipe(stylus()) //呼叫stylus方法轉換成css
    .pipe(gulp.dest('./css/build'));//css檔案放到"./css/build"目錄下
});

2.gulp-stylus壓縮生成的css：

gulp.task('compress', function () {
  return gulp.src('./css/compressed.styl')
    .pipe(stylus({
      compress: true //需要壓縮
    }))
    .pipe(gulp.dest('./css/build'));
});

5、gulp-clean-css：編譯css後壓縮，一般都要壓縮，用gulp-clean-css 壓縮 CSS

使用gulp-clean-css壓縮css檔案，減小檔案大小，並給引用url新增版本號避免快取。（之前的有同樣功能的gulp-minify-css已被廢棄）

使用npm進行安裝：

npm install gulp-clean-css --save-dev

使用方法：

1.基本寫法：

var gulp = require('gulp'), //引入gulp
var cssmin = require('gulp-clean-css'); //引入gulp-clean-css
gulp.task('testCssmin', function () { //建立testCssmin任務
    gulp.src('src/css/*.css') //讀取"src/css/"資料夾下所有的css檔案
        .pipe(cleanCSS()) //呼叫cleanCSS方法壓縮css
        .pipe(gulp.dest('dist/css')); //壓縮的css檔案放到"dist/css"目錄下
});

2.cssmin方法更多引數使用：

var gulp = require('gulp'),
    cssmin = require('gulp-clean-css');
gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cleanCSS({
            advanced: false, //型別：Boolean 預設：true [是否開啟高階優化（合併選擇器等）]
            compatibility: 'ie7',//保留ie7及以下相容寫法 型別：String 預設：''or'*' [啟用相容模式； 'ie7'：IE7相容模式，'ie8'：IE8相容模式，'*'：IE9+相容模式]
            keepBreaks: true,//型別：Boolean 預設：false [是否保留換行]
            keepSpecialComments: '*'//保留所有特殊字首 當你用autoprefixer生成的瀏覽器字首，如果不加這個引數，有可能將會刪除你的部分字首
        }))
        .pipe(gulp.dest('dist/css'));
});

6、gulp-csso： 壓縮 CSS 通過 CSSO

使用npm進行安裝：

npm install gulp-csso --save-dev

使用方法：

1.基本寫法：

var gulp = require('gulp');//引入gulp
var csso = require('gulp-csso');//引入gulp-csso

gulp.task('default', function () { //建立default任務
    return gulp.src('./main.css')//讀取"./main.css"檔案
        .pipe(csso())//呼叫csso方法壓縮css
        .pipe(gulp.dest('./out'));//壓縮的css檔案放到"./out"目錄下
});

7、gulp-coffee： Coffeescript 編譯成 JavaScript

使用npm進行安裝：

npm install --save-dev gulp-coffee

使用方法：

1.基本寫法：

var gulp = require('gulp'); //引入gulp
var coffee = require('gulp-coffee');//引入gulp-coffee
gulp.task('coffee', function() { //建立coffee任務
  gulp.src('./src/*.coffee')//讀取"./src"資料夾下所有的coffee檔案
    .pipe(coffee())//呼叫coffee方法轉換成js
    .pipe(gulp.dest('./public/'));//js檔案放到"./public"目錄下
});

8、gulp-typescript： typeScript編譯成JavaScript

使用npm進行安裝：

npm install --global gulp-cli
npm install gulp
npm install gulp-typescript typescript

使用方法：

1.基本寫法：

var gulp = require('gulp');//引入gulp
var ts = require('gulp-typescript');//引入gulp-typescript
gulp.task('default', function () {//建立default任務
    return gulp.src('src/**/*.ts')//讀取"src/**"資料夾下所有的ts檔案
        .pipe(ts({
            noImplicitAny: true, 
            outFile: 'output.js' //輸出檔名為"output.js"
        }))
        .pipe(gulp.dest('built/local'));//js檔案放到"built/local"目錄下
});

9、gulp-uglify： 通過 UglifyJS2壓縮 JavaScript（一般js都要壓縮）

使用gulp-uglify壓縮javascript檔案，減小檔案大小。

使用npm進行安裝：

npm install --save-dev gulp-uglify

使用方法：

1.基本寫法：

var gulp=require('gulp'),  //引入gulp
var uglify=require('gulp-uglify');  //引入gulp-uglify
gulp.task('jsmin',function(){  //建立jsmin任務
    gulp.src('src/js/index.js')  //讀取"src/js/index.js"檔案
        .pipe(uglify())  //呼叫uglify壓縮js檔案
        .pipe(gulp.dest('dist/js'));  //壓縮後的檔案放到"dist/js"資料夾下
});

2.壓縮多個js檔案

var gulp=require('gulp'),  
var uglify=require('gulp-uglify');  
gulp.task('jsmin',function(){  
    gulp.src(['src/js/index.js','src/js/detail.js'])//多個檔案以陣列形式傳入  
        .pipe(uglify())  
        .pipe(gulp.dest('dist/js'));  
});  

3.帶引數的使用

var gulp=require('gulp'),  
    uglify=require('gulp-uglify');  
gulp.task('jsmin',function(){  
    //壓縮src/js目錄下的所有js檔案  
    //除了test1.js和test2.js（**匹配src/js的0個或多個子資料夾）  
    gulp.src(['src/js/*.js','!src/js/**/{test1,test2}.js'])  
        .pipe(uglify({  
            mangle:true,//型別：Boolean 預設：true 是否修改變數名  
            compress:true,//型別：Boolean 預設：true 是否完全壓縮  
            preserveComments:'all'//保留所有註釋  
        }))  
        .pipe(gulp.dest('dist/js'));  
}); 

10、gulp-babel：ES6編譯成ES5 通過 babel

使用npm進行安裝：

npm install --save-dev gulp-babel @babel/core @babel/preset-env

使用方法：

1.基本寫法：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () =>
    gulp.src('src/app.js') //讀取"src/app.js"app.js檔案
        .pipe(babel({
            presets: ['@babel/env']//presets欄位設定轉碼規則
        }))
        .pipe(gulp.dest('dist'))//js檔案放到"dist"目錄下
);

11、gulp-concat： 合併檔案，用來減少網路請求。

使用npm進行安裝：

npm install --save-dev gulp-concat

使用方法：

1.合併某個資料夾下的所有此型別的檔案寫法：

var gulp = require('gulp');//引用gulp
var concat = require('gulp-concat');//引入gulp-concat外掛
gulp.task('scripts', function() {//建立名為“scripts”的task
  return gulp.src('./lib/*.js')  //讀取lib資料夾下的所有js檔案
    .pipe(concat('all.js'))   //將讀取的所有js檔案合併到all.js檔案中
    .pipe(gulp.dest('./dist/'));  //將輸出的all.js檔案放到dist資料夾下，即“./dist/all.js”
});

2.合併特定檔案的寫法：

var concat = require('gulp-concat');
gulp.task('scripts', function() {
  return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])//讀取多個特定的檔案合併
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

12、gulp-replace： gulp的一個字串替換外掛

使用npm進行安裝：

npm install --save-dev gulp-replace

使用方法：

1.基本寫法：

var gulp = require('gulp');//引用gulp
var replace = require('gulp-replace');//引入gulp-replace外掛
gulp.task('templates', function(){
  gulp.src(['file.txt']) //讀取file.txt檔案
    .pipe(replace('bar', 'foo')) //用foo替換bar
    .pipe(gulp.dest('build/'));//將file.txt內容替換後放到"build/"資料夾
});

13、gulp-htmlmin： 壓縮 HTML 通過 html-minifier

使用gulp-htmlmin壓縮html，可以壓縮頁面javascript、css，去除頁面空格、註釋，刪除多餘屬性等操作。

使用npm進行安裝：

npm install gulp-htmlmin --save-dev

使用方法：

1.基本寫法：

var gulp = require('gulp');//引用gulp
var htmlmin = require('gulp-htmlmin');//引入gulp-htmlmin外掛
gulp.task('minify', function() {
  return gulp.src('src/*.html')//讀取src下的所有html檔案
    .pipe(htmlmin({collapseWhitespace: true})) collapseWhitespace: true,//壓縮HTML
    .pipe(gulp.dest('dist'));//將輸出檔案放到dist資料夾下
});

2.多引數的用法：

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: true,//省略布林屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));//將輸出檔案放到dist/html資料夾下
});

14、gulp-imagemin：壓縮 PNG, JPEG, GIF and SVG 圖片 通過 imagemin

使用gulp-imagemin壓縮圖片檔案（包括PNG、JPEG、GIF和SVG圖片）

使用npm進行安裝：

npm install gulp-imagemin --save-dev

使用方法：

1.基本寫法：

var gulp = require('gulp'),//引用gulp
    imagemin = require('gulp-imagemin');//引入gulp-imagemin外掛

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')//讀取src/img下的所有png,jpg,gif,ico字尾名的檔案
        .pipe(imagemin()) //呼叫imagemin方法壓縮圖片
        .pipe(gulp.dest('dist/img'));//將輸出檔案放到dist/img資料夾下
});

2.多引數的用法：

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //型別：Number  預設：3  取值範圍：0-7（優化等級）
            progressive: true, //型別：Boolean 預設：false 無失真壓縮jpg圖片
            interlaced: true, //型別：Boolean 預設：false 隔行掃描gif進行渲染
            multipass: true //型別：Boolean 預設：false 多次優化svg直到完全優化
        }))
        .pipe(gulp.dest('dist/img'));
});

3.深度壓縮圖片：

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    //確保本地已安裝imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
    pngquant = require('imagemin-pngquant');
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
            use: [pngquant()] //使用pngquant深度壓縮png圖片的imagemin外掛
        }))
        .pipe(gulp.dest('dist/img'));
});

4.只壓縮修改的圖片。壓縮圖片時比較耗時，在很多情況下我們只修改了某些圖片，沒有必要壓縮所有圖片，使用”gulp-cache”只壓縮修改的圖片，沒有修改的圖片直接從快取檔案讀取（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）。

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    //確保本地已安裝gulp-cache [cnpm install gulp-cache --save-dev]
    cache = require('gulp-cache');
    gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});

文章參考：