Skip to content

Instantly share code, notes, and snippets.

@renarsvilnis
Last active July 7, 2024 20:11
Show Gist options
  • Save renarsvilnis/ab8581049a3efe4d03d8 to your computer and use it in GitHub Desktop.
Save renarsvilnis/ab8581049a3efe4d03d8 to your computer and use it in GitHub Desktop.
Curated list of useful gulp plugins for awesome and easy frontend web development.

Curated list of useful gulp plugins for awesome and easy frontend web development.

Other lists

Tutorials

Notes

Global

  • main-bower-files - fetches all files that meet filter criteria from main bower dependencies. Usefull to filtering out font files '**/*.{eot,svg,ttf,woff,woff2}' and copy them to /dist/fonts/
  • wiredep - adds links to bower depencies files to html/js/css which hold the correct comment tag
  • gulp-sourcemaps - build source maps. Use this instead of building sass or minifier if you do more work to those files afterwards, for example autoprefix the css.
  • gulp-watch - better then gulp.watch, because listens to new files
  • gulp-cached - in-memory caching for faster builds
  • gulp-concat - concatenate files
  • gulp-rename - rename files
  • gulp-zip - zip files
  • gulp-remember - remembers files that have passed through it and only adds files that has ever seen back into the stream.

Javascript

CSS

HTML

  • gulp-useref - parses selected files, checks for build comments which when is used to combine files. Its possible to fetch multiple builds and then do some specific work with each of them for example minimize css and jshint javascript. Prefer this to gulp-inject
  • gulp-inject - A javascript, stylesheet and webcomponent injection plugin for Gulp, i.e. inject file references into your index.html
  • gulp-minify-html - minify html
  • gulp-substituter - replace matched strings in files for defined values

IMAGES

Helpers

Testing

@yairEO
Copy link

yairEO commented Jan 2, 2017

autoprefixer-core was changed to -> autoprefixer

I have been working for years with gulp-css-globbing, which is a must-have.
Another must-have is gulp-eslint, which lints your js files for errors (by configurable rules).
gulp-strip-debug is also nice for removing console lines (for production)
gulp-iconfont & gulp-iconfont-css to create fonts & SCSS files automatically from SVG icons.
also gulp-webserver is very nice for running everything on a super lightweight server, which runs in the default task.

another highly useful plugin is gulp-file-include, which lets you include files into other files with settings.


In reality I use many more plugins, in my own framework which I've created. everything is highly automated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment