Courses & Tutorials

Awesome Gulp – Massive Collection of Resources

Spread the love

A curated list of awesome gulp resources, plugins, and boilerplates for a better development workflow automation.

Looking for something else? Take a look at other awesome lists.



[⛔] – A deprecation notice;


General Resources

Official Documentation



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

Gulp with WordPress

Miscellaneous Resources







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

Injecting Assets

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



Live Reload


Flow Control

  • merge-stream – Merge multiple streams into one interleaved stream.
  • streamqueue – Pipe queued streams progressively.
  • run-sequence – Run a series of dependent gulp tasks in order.
  • gulp-if – Conditionally run a task.


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


Miscellaneous Plugins

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



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

Yeoman Generators


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

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button