Gulp資料大全 入門、插件、腳手架、包清單

awesome-gulp中文版

一份 gulp的資源，插件和使用實例清單， 致力於打造更好的前端工程構建流程。

資源

通用資源

• 官網
• Github庫
• 插件註冊
• NPM模塊
• 插件黑名單

官方文檔

• 快速開始
• API文檔
• CLI 文檔
• 開始寫一個插件
• 使用訣竅

組織

• StackOverflow
• Twitter

入門教程

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清單

插件

編譯

• 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-es6-transpiler - [過期的] ES6編譯成ES5 經過 es6-transpiler.
• gulp-myth - Myth - a polyfill for future versions of the CSS spec.
• gulp-cssnext - [過期的] 使用下一代的 CSS 規範經過 cssnext.

合併

• 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 合併成一個經過<symbol> 元素
• 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的方法.

證書