Gulp

Awesome Gulp

> 精选清单 gulp 资源、插件和样板，以实现更好的开发工作流程自动化.

寻找其他东西？ 看看其他 awesome lists.

Contribution

:octocat: 欢迎所有贡献. 随意贡献（guidelines).

Legend

[] - 弃用通知；

Resources

General Resources

• Official Website
• Github Repository
• Plugin Registry
• NPM Module
• Blacklisted Plugins

Official Documentation

• Getting Started
• API Documentation
• CLI Documentation
• Writing a Plugin
• Recipes

Community

• StackOverflow
• Twitter

Tutorials

Gulp Tutorials

• Building with Gulp
• Automate Your Tasks Easily with Gulp.js
• Gulp - The Vision, History, and Future of the Project
• Introduction to Gulp.js
• Video: Learning Gulp
• Using Gulp to Inject Scripts and Styles Tags Directly into Your HTML
• 5 Lessons Learned Using Gulp.js
• Automating Linkage: How I Learned to Stop Worrying and Love the Build
• Setting Up Gulp Tasks for the First Time
• Why You Shouldn’t Create a Gulp Plugin (or, How to Stop Worrying and Learn to Love Existing Node Packages)
• 6 Gulp Best Practices You Can Use Today to Radically Improve Your Development Experience
• Gulp for Beginners

Gulp 4 Tutorials

• Migrating to Gulp 4 by Example
• Gulp 4: The new task execution system - gulp.parallel and gulp.series

Gulp with Browserify

• Gulp + Browserify, the Gulp-y Way
• Gulp + Browserify
• Fast Browserify Builds with Watchify

Gulp with Angular

• What Every Angular Project Likely Needs - and a Gulp Build to Provide It

Gulp with Angular and Browserify

• Advanced AngularJS Structure with Gulp, Node and Browserify

Gulp with Angular and Webpack

• Angular, Webpack and Gulp for an SPA: Part I
• Angular, Webpack and Gulp for an SPA: Part II
• Angular, Webpack and Gulp for an SPA: Part III

Gulp with React and Browserify

• Browserify and Gulp with React
• Taking React to the Next Level: Mixins, Gulp, and Browserify

Gulp with Ember

• Improving Your Ember.js Workflow Using Gulp.js

Gulp with WordPress

• Advanced WordPress Development Using Gulp

Miscellaneous Resources

• Gulp Cheatsheet
• Playground for Gulp Recipes

Plugins

Compilation

• gulp-sass - Sass → CSS 与 libsass.
• gulp-ruby-sass - Sass → CSS 与 Ruby Sass.
• gulp-compass - Sass → 使用 Ruby Sass 和 Compass 的 CSS.
• gulp-less - Less → CSS.
• gulp-stylus - Stylus → CSS.
• gulp-postcss - 通过管道 CSS PostCSS 具有单个解析的处理器.
• gulp-coffee - Coffeescript → JavaScript.
• gulp-typescript - TypeScript → JavaScript.
• gulp-react - Facebook React JSX 模板 → JavaScript.
• webpack-stream - 跑步 webpack 作为一个流来方便地与 gulp 集成.

Transpilation

• gulp-babel - ES6 → ES5 与 babel.
• gulp-traceur - ES6 → ES5 使用 Traceur.
• gulp-regenerator - ES6 → ES5 与 Regenerator.
• gulp-es6-transpiler - [] ES6 → ES5 with es6-transpiler.
• gulp-myth - Myth - 用于 CSS 规范未来版本的 polyfill.
• gulp-cssnext - [] 使用明天的 CSS 语法，今天使用 cssnext.

Concatenation

• gulp-concat - 连接文件.

Minification

• gulp-clean-css - 缩小 CSS clean-css.
• gulp-csso - 缩小 CSS CSSO.
• gulp-uglify - 缩小 JavaScript UglifyJS2.
• gulp-htmlmin - 缩小 HTML html-minifier.
• gulp-imagemin - 缩小 PNG、JPEG、GIF 和 SVG 图像 imagemin.
• gulp-svgmin - 使用 gulp 缩小 SVG 文件.

Optimization

• gulp-uncss - 删除未使用的 CSS 选择器 UnCSS.
• gulp-css-base64 - 将 CSS 文件中找到的所有资源（在 url() 声明中的资源）转换为 base64 编码的数据 URI 字符串.
• gulp-svg2png - 将 SVG 转换为 PNG.
• gulp-responsive - 生成不同尺寸的图像.
• gulp-svgstore - 将 svg 文件与 合并为一个<symbol> 元素.
• gulp-iconfont - 从多个 SVG 图标创建图标字体.

Injecting Assets

• gulp-useref - 解析 HTML 文件中的构建块以替换对未优化脚本或样式表的引用.
• gulp-inject - 将每个文件转换为字符串并将每个转换后的字符串注入目标流文件中的占位符.
• wiredep - 将 Bower 依赖项连接到您的源代码.

Templating

• 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 - 降价 → HTML.
• gulp-template - Lodash 模板 → JavaScript.
• gulp-swig - Swig 模板 → HTML.
• gulp-remark - Gulp 插件 remark - 由插件驱动的降价处理器

Linting

• gulp-csslint - 自动检查 CSS CSSLint.
• gulp-htmlhint - HTMLHint 包装器来验证您的 HTML.
• gulp-jshint - 检测 JavaScript 中的错误和潜在问题 JSHint.
• gulp-jscs - 检查 JavaScript 代码风格 jscs.
• gulp-coffeelint - 一个风格检查器，有助于保持 CoffeeScript 代码干净.
• gulp-tslint - TypeScript gulp 的 linter 插件.
• gulp-eslint - 识别并报告在 ECMAScript/JavaScript 代码中发现的模式.
• gulp-w3cjs - 验证 HTML w3cjs.
• gulp-lesshint - 减少文件 lesshint.
• gulp-check-unused-css - 检查您的 HTML 模板是否有未使用的 CSS 类.

Live Reload

• browser-sync - 在构建网站时保持多个浏览器和设备同步（recipes).
• gulp-livereload - 用于实时加载的 Gulp 插件.

Caching

• gulp-changed - 仅通过更改的文件.
• gulp-cached - 一个简单的内存文件缓存.
• gulp-remember - 记住并调用通过它的文件.
• gulp-newer - 仅通过较新的源文件.

Flow Control

• merge-stream - 将多个流合并为一个交错的流.
• streamqueue - 逐步管道排队流.
• run-sequence - 按顺序运行一系列依赖的 gulp 任务.
• gulp-if - 有条件地运行任务.

Logging

• gulp-notify - gulp 的通知插件.
• gulp-size - 显示项目的大小.
• gulp-debug - 调试乙烯基文件流以查看哪些文件通过您的 gulp 管道运行.
• gulp-beer - 更好的错误报告与交互式系统通知和错误显示的自定义服务器.

Testing

• gulp-mocha - 跑步 Mocha 测试.
• gulp-jasmine - 跑步 Jasmine 2 在 Node.js 中测试.
• gulp-protractor - Gulp 包装器 Protractor 测试.
• gulp-coverage - 独立于测试运行器的 Node.js 覆盖率报告.
• gulp-karma - gulp 的 Karma 测试运行程序.
• gulp-ava- 跑步 AVA 用 gulp 测试.

Miscellaneous Plugins

• gulp-util - 一组有用的实用程序.
• gulp-plumber - 防止错误导致管道破裂.
• gulp-load-plugins - 自动加载 gulp 插件.
• main-bower-files - 通过动态获取库文件简化构建过程设置.
• autoprefixer - 通过 Can I Use 解析 CSS 并将供应商前缀添加到规则中.
• gulp-sourcemaps - 提供源地图支持.
• gulp-replace - 用于 gulp 的字符串替换插件.
• gulp-rename - 轻松重命名文件.
• gulp-rev - 通过将内容哈希附加到文件名来修改静态资产：unicorn.css → unicorn-d41d8cd98f.css.
• del - 使用 glob 删除文件/文件夹.
• gulp-exec - 运行 shell 命令.
• gulp-strip-debug - 从 JavaScript 代码中剥离控制台、警报和调试器语句.
• gulp-cssimport - 解析 CSS 文件，查找导入，获取链接文件的内容并用它替换导入语句.
• gulp-inline-css - 将 CSS 属性内嵌到 HTML 文件的样式属性中.
• gulp-gh-pages - 将内容发布到 Github 页面.
• gulp-ng-annotate - 添加 AngularJS 依赖注入注解 ng-annotate.
• gulp-bump - 碰撞任何 semver JSON 版本.
• gulp-file-include - 包含带有 gulp 的文件.
• gulp-zip - ZIP 压缩文件.
• gulp-git - 使用 gulp 运行 Git 命令.
• gulp-filter - 使用 globbing 过滤乙烯基流中的文件.
• gulp-preprocess - 根据自定义上下文或环境配置预处理文件.
• gulp-eval - 评估 JS 表达式或需要 CommonJS 模块和 JSON 文件.

Scaffolding

Boilerplates

• web-starter-kit - 谷歌网络初学者工具包.
• gulp-plugin-boilerplate - 用于启动创建 gulp 插件的样板.
• polymer-starter-kit - Polymer 1.0 应用程序的起点.
• este - 最完整的 React/Flux 开发堆栈和同构功能 Web 应用程序的入门工具包.
• mnml - 启动响应式 HTML5/Sass 项目的最小样板.
• kraken - 面向前端 Web 开发人员的轻量级、移动优先样板.
• angularjs-gulp-browserify-boilerplate - 使用 AngularJS、Sass、gulp 和 Browserify 的样板.
• hapi-ninja - Node.js、Hapi 和 Swig 样板.
• laravel-5-boilerplate - Laravel 5 样板项目.
• react-starterkit - React 入门套件，包含 react-router、Reflux、jest、webpack、gulp 和 Stylus.
• gulp-front - 基于 gulp、pug、stylus、postcss、webpack 和 babel 的前端样板和模块化 BEM css 框架.
• Front End Starter - 由 Gulp、HTML5 bolierplate、Sass、PostCss 和 Webpack（用于 Babel 转译）提供支持的前端项目样板.

Yeoman Generators

• generator-gulp-webapp - 用于现代网络应用程序的 gulp 生成器.
• generator-gulp-angular - 带有 gulp 的 AngularJS 的 Yeoman 生成器.
• generator-react-gulp-browserify - 用于 React 库的 Yeoman 生成器. 它包括 gulp、Browserify、Browsersync 和 Bootstrap.
• generator-node-gulp - 一个 Node.js 模块生成器，包括 gulp 和 Mocha.
• generator-gulp-bootstrap - Yeoman generator for Bootstrap, gulp & libsass.
• generator-angulpify - 涉及 AngularJS、gulp 和 Browserify 的 Yeoman 生成器.
• generator-ionic-gulp - 用于带有 gulp 的 Ionic 项目的 Yeoman 生成器.
• generator-gulp-plugin-boilerplate - 搭建一个 gulp plugin boilerplate.
• generator-jekyllized - 带有 gulp、Sass、AutoPrefixer、资产优化和缓存清除等功能的 Jekyll 工作流.

Miscellaneous

• elixir - 一个干净、流畅的 API，用于为你的 Laravel 应用程序定义基本的 gulp 任务.
• gulp-app - Gulp 作为应用程序 (OS X).
• lmn-gulp-tasks - gulp 任务单元测试示例.
• gulp-chef - 一种优雅、直观的方式来重用 gulp 任务.

License

在法律允许的范围内， Philipp Alferov 已放弃该作品的所有版权和相关或邻接权.