Gulp资料大全:入门、插件、脚手架、包清单

awesome-gulp中文版

被老外的awesome 清单刺激到，觉得有必要翻译一份，为国产的程序员们做点事情，本清单将保持实时更新同步。 PS:进都进来了，就顺便看看其他的吧:

awesome-nodejs-cn

awesome-angularjs-cn

awesome-react-cn

awesome-npm-cn

awesome-react-native-cn

资源

通用资源

官网

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 合并成一个通过 元素

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的方法.