Curated list of useful gulp plugins for awesome and easy frontend web development.
- http://denbuzze.com/post/5-lessons-learned-using-gulpjs/
- http://markgoodyear.com/2014/01/getting-started-with-gulp/
- http://lab.brightnorth.co.uk/2014/08/13/automating-linkage-how-i-learned-to-stop-worrying-and-love-the-build/
- http://blog.overzealous.com/post/74121048393/why-you-shouldnt-create-a-gulp-plugin-or-how-to
- Combining streams to handle errors
- Browserify + Globs
- Fast browserify builds with watchify
- Browserify + Uglify with sourcemaps
- https://io.pellucid.com/blog/tips-and-tricks-for-faster-front-end-builds
- https://github.com/substack/browserify-handbook
- Resolve "Watchify takes longer after each change" by adding babel transfrom to the watchify instead of rebuild.
- Make Watchify faster by reducing the default delay option.
- Filter watch events, example do processing on new files files
- Automaticly bump version changes
- 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.
- gulp-uglify - minify js
- browserify - for usage with gulp check recipes
- envify - replaces
process.env.NODE_ENVwith a environment string which is set during compilation. Must have for React production!
- gulp-sass - compile sass
- gulp-postcss - pipe css through several processors, but parse css only once. Example use prefixing, css-mqpacking the files on one parse
- css-mqpacker - pack same media query rules into on media query rule
- gulp-csso - minifies css, compared to other minfiers combines identical css
- autoprefixer-core - autoprefix css without worrying about browser specific prefixes. Use this instead of gulp-autoprefixer if using gulp-postcss
- gulp-sprites-preprocessor - generate sprites from css file
- gulp-base64 - encode images to data URI
- critical - extracts and inlines critical css for first render
- 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
- gulp-imagemin - minify images
- gulp-svgmin - minify svg
- gulp-responsive - create different image versions
- gulp-sharp - resize images
- del - delete files/folders using globs
- opn - open files, websites, executables, crossplatform
- gulp-load-plugins - autoload gulp plugins from package.json into an javascript object
- gulp-size - echo filesize of selected files
- gulp-if - adds conditionals in gulp pipeline
- gulp-plumber - prevent pipe breaking caused by errors from gulp plugins. Example by compiling react, sass, ..
- Browser syncing - comparision of BrowserSync, CodeKit, LiveReload
- gulp-streamify - wrap old gulp plugins with stream support. Example with usage of gulp-browserify
- gulp-notify - make notifications then tasks complete, start, ..
- gulp-merge - merge multiple stream operation into one task
- gulp-duration - track task durations
- gulp-istanbul - istanbul unit test coverage plugin for gulp
autoprefixer-corewas changed to ->autoprefixerI 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-debugis also nice for removingconsolelines (for production)gulp-iconfont&gulp-iconfont-cssto create fonts & SCSS files automatically from SVG icons.also
gulp-webserveris very nice for running everything on a super lightweight server, which runs in thedefaulttask.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.