awesome-gulp中文版
一份gulp的資源，插件和使用實例清單， 致力於打造更好的前端工程構建流程。
被老外的awesome 清單刺激到，覺得有必要翻譯一份，為國產的程序員們做點事情，本清單將保持實時更新同步。 PS:進都進來了，就順便看看其他的吧:
項目的Github地址：awesome-react-cn，持續更新中。。。歡迎start。 翻譯得倉促，如有問題，請提issues 如果想貢獻，請Pull Requests。
資源
通用資源
官方文檔
組織
入門教程
Gulp入門
- 使用Gulp構建前端工程
- 通過Gulp.js輕松自動化構建你的前端工程
- Gulp，讓前端工程可視化
- Gulp.js是什么？
- 使用Gulp在你的HTML中直接插入Scripts和Styles標簽
- 5節課學會使用Gulp.js
- 我是怎樣擺脫前端工程的困擾的？
- 第一次開始Gulp Task
- 為什么你不自己寫一個Gulp插件？
- 6個最好的從根本改善你的開發經驗的Gulp實戰練習
- Gulp初學者教程
Gulp 4 入門
Gulp with Browserify
Gulp with Angular
Gulp with Angular and Browserify
Gulp with React and Browserify
Gulp with Ember
其他資源
插件
編譯
- 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 合並成一個通過 元素
- 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 - 基於自定義內容或環境配置預處理文件.
腳手架
模板
- 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的方法.