承接前一篇《做一個合格的前端，gulp自動化構建工具入門教程》故而整理了如下gulp外掛資源大全。
**【我的新作觀點網：http://www.guandn.com (觀點網是一個獵獲新奇、收穫知識、重在獨立思考的網站)。
PS：接下來我會逐一開源觀點網開發過程中的前後端技術，如：lucene全文索引、自定義富文字編輯器、圖片上傳壓縮水印等等。】**
之前我也整理過一篇《javascript功能外掛大集合》,有小夥伴留言說”能有連結就好了“，因此這次整理gulp相關資料的時候，特意錄入了外掛地址，方便小夥伴們查詢學習。
官方文件
快速開始
API文件
CLI 文件
開始寫一個外掛
使用訣竅
Gulp入門
使用Gulp構建前端工程
通過Gulp.js輕鬆自動化構建你的前端工程
Gulp，讓前端工程視覺化
Gulp.js是什麼？
使用Gulp在你的HTML中直接插入Scripts和Styles標籤
5節課學會使用Gulp.js
我是怎樣擺脫前端工程的困擾的？
第一次開始Gulp Task
為什麼你不自己寫一個Gulp外掛？
6個最好的從根本改善你的開發經驗的Gulp實戰練習
Gulp初學者教程
Gulp 4 入門
遷移到Gulp 4的例子
Gulp 4: 新的task執行系統 - gulp.parallel 和 gulp.series
Gulp with Browserify
Gulp + Browserify, the Gulp-y Way
Gulp + Browserify
快速構建Browserify和Watchify
Gulp with Angular
Angular工程需要什麼 - Gulp能提供什麼
Gulp with Angular and Browserify
使用 Gulp, Node and Browserify構建先進的 AngularJS工程結構
Gulp with React and Browserify
Browserify、Gulp 和 React
Taking React to the Next Level: Mixins, Gulp, and Browserify
Gulp with Ember
使用Gulp.js改進你的Ember.js工作流
gulp外掛部分
一、編譯
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-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/rem... 通過外掛處理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 - 基於自定義內容或環境配置預處理檔案.
腳手架
一、模板
web-starter-kit - Google的Web Starter Kit.
gulp-plugin-boilerplate - 建立Gulp外掛的開始模板.
polymer-starter-kit -Polymer 1.0 應用的起點.
este - 同構的web應用最全面的React/Flux開發棧和開始模板.
mnml - 開發響應式HTML5/Sass專案的最小開始模板.
kraken 一個輕量級的、移動端優先的前端開發開始模板.
angularjs-gulp-browserify-boilerplate - 一個使用AngularJS, Sass, gulp, 和 Browserify技術的開始模板.
hapi-ninja - 一個使用Node.js, Hapi, and Swig技術的開始模板.
laravel-5-boilerplate - 一個Laravel 5 開始模板.
react-starterkit - 包含react-router, Reflux, jest, webpack, gulp and Stylus的React開始模板.
二、Yeoman生成器
generator-gulp-webapp - A 一個流行的web應用的gulp生成器.
generator-gulp-angular - 使用Gulp的AngularJS 的Yeoman生成器.
generator-react-gulp-browserify - 一個React庫的Yeoman生成器，包含gulp, Browserify, Browsersync and Bootstrap.
generator-node-gulp - 一個Node.js模組生成器，包含gulp和 Mocha.
generator-gulp-bootstrap - 一個包含Bootstrap, gulp 和libsass的Yeoman生成器·.
generator-angulpify - 一個包含AngularJS, gulp和Browserify的Yeoman生成器.
generator-ionic-gulp - 一個Ionic工廠的Yeoman生成器.
generator-gulp-plugin-boilerplate -一個輸出 gulp plugin boilerplate的腳手架.
generator-jekyllized - 一個包含gulp, Sass, AutoPrefixer,資源優化，快取等的Jekyll工作流.
三、其他
elixir - 一個為你的應用定義基本的gulp任務的乾淨、靈活的API.
gulp-app - 將Gulp作為一個應用(OS X).
lmn-gulp-tasks - gulp任務的單元測試示例.
gulp-chef - 一個優雅的、簡單的重複使用gulp task的方法.