Awesome Gulp Overview

:tropical_drink: A curated list of awesome gulp resources, plugins, and boilerplates for a better development workflow automation - http://alferov.github.io/awesome-gulp

🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 alferov/awesome-gulp · ⭐ 593 · 🏷️ Miscellaneous

[ Daily / Weekly / Overview ]

Awesome Gulp

A curated list of awesome gulp (⭐33k) resources, plugins, and boilerplates for a better development workflow automation.

Looking for something else? Take a look at other awesome lists (⭐223k).

Contribution

:octocat: All contributions welcome. Feel free to contribute (guidelines).

Contents

• Legend
• Resources
  • General Resources
  • Official Documentation
  • Community
  • Tutorials
    • Gulp Tutorials
    • Gulp 4 Tutorials
    • Gulp with Browserify
    • Gulp with Angular
    • Gulp with Angular and Browserify
    • Gulp with Angular and Webpack
    • Gulp with React and Browserify
    • Gulp with Ember
  • Miscellaneous Resources
• Plugins
  • Compilation
  • Transpilation
  • Concatenation
  • Minification
  • Optimization
  • Injecting Assets
  • Templating
  • Linting
  • Live Reload
  • Caching
  • Flow Control
  • Logging
  • Testing
  • Miscellaneous Plugins
• Scaffolding
  • Boilerplates
  • Yeoman Generators
• Miscellaneous

Legend

[:no_entry:] - A deprecation notice;

Resources

General Resources

• Official Website
• Github Repository (⭐33k)
• Plugin Registry
• NPM Module
• Blacklisted Plugins (⭐278)

Official Documentation

• Getting Started (⭐33k)
• API Documentation (⭐33k)
• CLI Documentation (⭐33k)
• Writing a Plugin (⭐33k)
• Recipes (⭐33k)

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 (⭐33k)

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 (⭐1.4k)
• Playground for Gulp Recipes (⭐507)

Plugins

Compilation

• gulp-sass (⭐1.6k) - Sass → CSS with libsass (⭐4.3k).
• gulp-ruby-sass (⭐470) - Sass → CSS with Ruby Sass.
• gulp-compass (⭐175) - Sass → CSS with Ruby Sass & Compass.
• gulp-less (⭐567) - Less (⭐17k) → CSS.
• gulp-stylus (⭐224) - Stylus (⭐11k) → CSS.
• gulp-postcss (⭐763) - Pipe CSS through PostCSS (⭐27k) processors with a single parse.
• gulp-coffee (⭐225) - Coffeescript (⭐16k) → JavaScript.
• gulp-typescript (⭐773) - TypeScript (⭐85k) → JavaScript.
• gulp-react (⭐236) - Facebook React (⭐196k) JSX templates → JavaScript.
• webpack-stream (⭐1.4k) - Run webpack (⭐62k) as a stream to conveniently integrate with gulp.

Transpilation

• gulp-babel (⭐1.3k) - ES6 → ES5 with babel (⭐42k).
• gulp-traceur (⭐169) - ES6 → ES5 using Traceur (⭐8.2k).
• gulp-regenerator (⭐18) - ES6 → ES5 with Regenerator (⭐3.7k).
• gulp-es6-transpiler (⭐47) - [:no_entry:] ES6 → ES5 with es6-transpiler (⭐217).
• gulp-myth (⭐39) - Myth (⭐4.4k) - a polyfill for future versions of the CSS spec.
• gulp-cssnext (⭐53) - [:no_entry:] Use tomorrow's CSS syntax, today, using cssnext (⭐5.4k).

Concatenation

• gulp-concat (⭐791) - Concatenate files.

Minification

• gulp-clean-css (⭐642) - Minify CSS with clean-css (⭐4k).
• gulp-csso (⭐241) - Minify CSS with CSSO (⭐3.6k).
• gulp-uglify (⭐1.2k) - Minify JavaScript with UglifyJS2 (⭐12k).
• gulp-htmlmin (⭐733) - Minify HTML with html-minifier (⭐4.7k).
• gulp-imagemin (⭐1.9k) - Minify PNG, JPEG, GIF and SVG images with imagemin (⭐5.2k).
• gulp-svgmin (⭐344) - Minify SVG files with gulp.

Optimization

• gulp-uncss (⭐960) - Remove unused CSS selectors with UnCSS (⭐9.3k).
• gulp-css-base64 (⭐65) - Transform all resources found (those within a url() declaration) in CSS files into base64-encoded data URI strings.
• gulp-svg2png (⭐56) - Convert SVGs to PNGs.
• gulp-responsive (⭐513) - Generate images at different sizes.
• gulp-svgstore (⭐651) - Combine svg files into one with <symbol> elements.
• gulp-iconfont (⭐841) - Create icon fonts from several SVG icons.

Injecting Assets

• gulp-useref (⭐715) - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
• gulp-inject (⭐817) - Transform each file to a string and inject each transformed string into placeholders in the target stream files.
• wiredep (⭐1.2k) - Wire Bower dependencies to your source code.

Templating

• gulp-angular-templatecache (⭐525) - Concatenate and register AngularJS templates in the $templateCache.
• gulp-jade (⭐526) - Jade (⭐21k) → HTML.
• gulp-handlebars (⭐172) - Handlebars (⭐17k) templates → JavaScript.
• gulp-hb (⭐146) - Handlebars (⭐17k) templates → HTML.
• gulp-nunjucks (⭐151) - Nunjucks (⭐7.9k) templates → JavaScript.
• gulp-dustjs (⭐18) - Dust (⭐2.9k) templates → JavaScript.
• gulp-riot (⭐105) - Riot (⭐15k) templates → JavaScript.
• gulp-markdown (⭐177) - Markdown → HTML.
• gulp-template (⭐283) - Lodash (⭐55k) templates → JavaScript.
• gulp-swig (⭐69) - Swig (⭐3.1k) templates → HTML.
• gulp-remark (⭐10) - Gulp plugin for remark (⭐5.7k) - markdown processor powered by plugins

Linting

• gulp-csslint - Automated linting of CSS with CSSLint (⭐4.7k).
• gulp-htmlhint (⭐82) - HTMLHint (⭐2.9k) wrapper to validate your HTML.
• gulp-jshint (⭐422) - Detect errors and potential problems in JavaScript with JSHint (⭐8.8k).
• gulp-jscs (⭐318) - Check JavaScript code style with jscs (⭐5k).
• gulp-coffeelint (⭐55) - A style checker that helps keep CoffeeScript (⭐16k) code clean.
• gulp-tslint (⭐119) - TypeScript (⭐85k) linter plugin for gulp.
• gulp-eslint (⭐559) - Identify and report on patterns found in ECMAScript/JavaScript code.
• gulp-w3cjs (⭐56) - Validate HTML with w3cjs (⭐158).
• gulp-lesshint (⭐14) - Lint less files with lesshint (⭐118).
• gulp-check-unused-css (⭐363) - Check your HTML templates for unused CSS classes.

Live Reload

• browser-sync (⭐12k) - Keep multiple browsers & devices in sync when building websites (recipes (⭐387)).
• gulp-livereload (⭐774) - Gulp plugin for livereload.

Caching

• gulp-changed (⭐744) - Only pass through changed files.
• gulp-cached (⭐450) - A simple in-memory file cache.
• gulp-remember (⭐150) - Remember and recall files passed through it.
• gulp-newer (⭐228) - Pass through newer source files only.

Flow Control

• merge-stream (⭐209) - Merge multiple streams into one interleaved stream.
• streamqueue (⭐63) - Pipe queued streams progressively.
• run-sequence (⭐973) - Run a series of dependent gulp tasks in order.
• gulp-if (⭐658) - Conditionally run a task.

Logging

• gulp-notify (⭐596) - Notification plugin for gulp.
• gulp-size (⭐233) - Display the size of your project.
• gulp-debug (⭐224) - Debug vinyl file streams to see what files are run through your gulp pipeline.
• gulp-beer (⭐11) - Better Error Reporting with interactive system notifications and custom server for error displaying.

Testing

• gulp-mocha (⭐377) - Run Mocha (⭐22k) tests.
• gulp-jasmine (⭐111) - Run Jasmine 2 (⭐15k) tests in Node.js.
• gulp-protractor (⭐136) - Gulp wrapper for Protractor (⭐8.8k) tests.
• gulp-coverage (⭐60) - Coverage reporting for Node.js that is independent of the test runner.
• gulp-karma (⭐313) - Karma test runner for gulp.
• gulp-ava (⭐56)- Run AVA (⭐20k) tests with gulp.

Miscellaneous Plugins

• gulp-util (⭐836) - Set of useful utilities.
• gulp-plumber (⭐809) - Prevent pipe breaking caused by errors.
• gulp-load-plugins (⭐761) - Automatically load in gulp plugins.
• main-bower-files (⭐591) - Simplify build process setup by dynamically getting the library files.
• autoprefixer (⭐21k) - Parse CSS and add vendor prefixes to rules by Can I Use.
• gulp-sourcemaps (⭐1.1k) - Provide source map support.
• gulp-replace (⭐489) - A string replace plugin for gulp.
• gulp-rename (⭐690) - Rename files easily.
• gulp-rev (⭐1.5k) - Static asset revisioning by appending content hash to filenames: unicorn.css → unicorn-d41d8cd98f.css.
• del (⭐1.3k) - Delete files/folders using globs.
• gulp-exec (⭐163) - Run a shell command.
• gulp-strip-debug (⭐248) - Strip console, alert, and debugger statements from JavaScript code.
• gulp-cssimport (⭐36) - Parses a CSS file, finds imports, grabs the content of the linked file and replaces the import statement with it.
• gulp-inline-css (⭐270) - Inline your CSS properties into the style attribute in an HTML file.
• gulp-gh-pages (⭐606) - Publish contents to Github pages.
• gulp-ng-annotate (⭐268) - Add AngularJS dependency injection annotations with ng-annotate (⭐2.1k).
• gulp-bump (⭐262) - Bump any semver JSON version.
• gulp-file-include (⭐665) - Include files with gulp.
• gulp-zip (⭐269) - ZIP compress files.
• gulp-git (⭐402) - Run Git commands with gulp.
• gulp-filter (⭐316) - Filter files in a vinyl stream using globbing.
• gulp-preprocess - Preprocess files based on custom context or environment configuration.
• gulp-eval (⭐6) - Eval JS-expression or require CommonJS modules and JSON files.

Scaffolding

Boilerplates

• web-starter-kit (⭐18k) - Google Web Starter Kit.
• gulp-plugin-boilerplate (⭐76) - Boilerplate to kickstart creating gulp plugins.
• polymer-starter-kit (⭐2.5k) - A starting point for Polymer 1.0 apps.
• este (⭐5.4k) - The most complete React/Flux dev stack and starter kit for isomorphic functional web apps.
• mnml (⭐707) - Minimal boilerplate to start a responsive HTML5/Sass project.
• kraken (⭐758) - A lightweight, mobile-first boilerplate for front-end web developers.
• angularjs-gulp-browserify-boilerplate (⭐1k) - Boilerplate using AngularJS, Sass, gulp, and Browserify.
• hapi-ninja (⭐380) - A Node.js, Hapi, and Swig boilerplate.
• laravel-5-boilerplate (⭐5.4k) - A Laravel 5 boilerplate project.
• react-starterkit (⭐349) - React starter kit that contains react-router, Reflux, jest, webpack, gulp and Stylus.
• gulp-front (⭐260) - Frontend boilerplate and modular BEM css framework based on gulp, pug, stylus, postcss, webpack and babel.
• Front End Starter (⭐21) - A boilerplate for frontend projects powered by Gulp, HTML5 bolierplate, Sass, PostCss and Webpack(for Babel transpiling).

Yeoman Generators

• generator-gulp-webapp (⭐3.8k) - A gulp generator for modern webapps.
• generator-gulp-angular (⭐3.7k) - Yeoman generator for AngularJS with gulp.
• generator-react-gulp-browserify (⭐422) - A Yeoman Generator for React library. It includes gulp, Browserify, Browsersync and Bootstrap.
• generator-node-gulp (⭐34) - A Node.js module generator including gulp and Mocha.
• generator-gulp-bootstrap (⭐69) - Yeoman generator for Bootstrap, gulp & libsass.
• generator-angulpify (⭐140) - Yeoman generator involving AngularJS, gulp and Browserify.
• generator-ionic-gulp (⭐137) - A Yeoman generator for Ionic Projects with gulp.
• generator-gulp-plugin-boilerplate (⭐48) - Scaffold out a gulp plugin boilerplate (⭐76).
• generator-jekyllized (⭐327) - Jekyll workflow with gulp, Sass, AutoPrefixer, asset optimization and cache busting and much more.

Miscellaneous

• elixir (⭐1.1k) - A clean, fluent API for defining basic gulp tasks for your Laravel applications.
• gulp-app (⭐965) - Gulp as an app (OS X).
• lmn-gulp-tasks (⭐22) - Example of gulp tasks unit testing.
• gulp-chef - An elegant, intuitive way to reuse gulp tasks.

License

To the extent possible under law, Philipp Alferov has waived all copyright and related or neighboring rights to this work.