markdown 有用的gulp插件的精选列表，用于令人敬畏和简单的前端Web开发。

Posted 2021-05-06

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

# Other lists
- https://rrrepo.co/repo/GulpJS

# Tutorials
- 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](https://github.com/gulpjs/gulp/blob/master/docs/recipes/combining-streams-to-handle-errors.md)
- [Browserify + Globs](https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-with-globs.md)
- [Fast browserify builds with watchify](https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md)
- [Browserify + Uglify with sourcemaps](https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md)
- https://io.pellucid.com/blog/tips-and-tricks-for-faster-front-end-builds
- https://github.com/substack/browserify-handbook

# Notes
- Resolve ["Watchify takes longer after each change"](https://github.com/substack/watchify/issues/187) 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](https://github.com/floatdrop/gulp-watch/blob/master/docs/readme.md#filtering-custom-events)
- [Automaticly bump version changes](https://github.com/gulpjs/gulp/blob/master/docs/recipes/automate-release-workflow.md)

## Global
- [main-bower-files](https://www.npmjs.com/package/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](https://www.npmjs.com/package/wiredep) - adds links to bower depencies files to html/js/css which hold the correct comment tag
- [gulp-sourcemaps](https://www.npmjs.com/package/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](https://github.com/floatdrop/gulp-watch) - better then gulp.watch, because listens to new files
- [gulp-cached](https://github.com/wearefractal/gulp-cached) - in-memory caching for faster builds
- [gulp-concat](https://www.npmjs.com/package/gulp-concat) - concatenate files
- [gulp-rename](https://www.npmjs.com/packages/gulp-rename) - rename files
- [gulp-zip](https://github.com/sindresorhus/gulp-zip) - zip files
- [gulp-remember](https://github.com/ahaurw01/gulp-remember) - remembers files that have passed through it and only adds files that has ever seen back into the stream.


## Javascript
- [gulp-uglify](https://www.npmjs.com/package/gulp-uglify) - minify js
- [browserify](https://www.npmjs.com/package/browserify) - for usage with gulp check [recipes](https://github.com/gulpjs/gulp/tree/master/docs/recipes)
- [envify](https://github.com/hughsk/envify) - replaces `process.env.NODE_ENV` with a environment string which is set during compilation. **[Must have for React production!](https://facebook.github.io/react/downloads.html)**

## CSS
- [gulp-sass](https://www.npmjs.com/package/gulp-sass) - compile sass
- [gulp-postcss](https://www.npmjs.com/package/gulp-postcss) - pipe css through several processors, but parse css only once. Example use prefixing, css-mqpacking the files on one parse
- [css-mqpacker](https://www.npmjs.com/package/css-mqpacker) - pack same media query rules into on media query rule
- [gulp-csso](https://www.npmjs.com/package/gulp-csso) - minifies css, [compared to other minfiers combines identical css](https://github.com/yui/shifter/issues/28)
- [autoprefixer-core](https://www.npmjs.com/package/autoprefixer-core) - autoprefix css without worrying about browser specific prefixes. *Use this instead of [gulp-autoprefixer](https://www.npmjs.com/packages/gulp-autoprefixer) if using gulp-postcss*
- [gulp-sprites-preprocessor](https://github.com/madebysource/gulp-sprites-preprocessor) - generate sprites from css file
- [gulp-base64](https://www.npmjs.com/package/gulp-base64) - encode images to data URI
- [critical](https://github.com/addyosmani/critical) - extracts and inlines critical css for first render


## HTML
- [gulp-useref](https://www.npmjs.com/package/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](https://www.npmjs.com/package/gulp-inject) - A javascript, stylesheet and webcomponent injection plugin for Gulp, i.e. inject file references into your index.html
- [gulp-minify-html](https://www.npmjs.com/package/gulp-minify-html) - minify html
- [gulp-substituter](https://www.npmjs.com/package/gulp-substituter) - replace matched strings in files for defined values


## IMAGES
- [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin) - minify images
- [gulp-svgmin](https://github.com/ben-eb/gulp-svgmin) - minify svg
- [gulp-responsive](https://github.com/mahnunchik/gulp-responsive) - create different image versions
- [gulp-sharp](https://github.com/rizalp/gulp-sharp) - resize images

## Helpers
- [del](https://www.npmjs.com/package/del) - delete files/folders using globs
- [opn](https://www.npmjs.com/package/opn) - open files, websites, executables, crossplatform
- [gulp-load-plugins](https://www.npmjs.com/package/gulp-load-plugins) - autoload gulp plugins from package.json into an javascript object
- [gulp-size](https://www.npmjs.com/package/gulp-size) - echo filesize of selected files
- [gulp-if](https://www.npmjs.com/package/gulp-if) - adds conditionals in gulp pipeline
- [gulp-plumber](https://www.npmjs.com/package/gulp-plumber) - prevent pipe breaking caused by errors from gulp plugins. Example by compiling react, sass, ..
- Browser syncing - [comparision of BrowserSync, CodeKit, LiveReload](http://www.slant.co/topics/1479/compare/~browsersync_vs_codekit_vs_livereload)
    - [browser-sync](https://www.npmjs.com/package/browser-sync)
    - [gulp-livereload](https://www.npmjs.com/packages/gulp-livereload)
- [gulp-streamify](https://www.npmjs.com/package/gulp-streamify) - wrap old gulp plugins with stream support. Example with usage of gulp-browserify
- [gulp-notify](https://www.npmjs.com/package/gulp-notify) - make notifications then tasks complete, start, ..
- [gulp-merge](https://www.npmjs.com/package/gulp-merge) - merge multiple stream operation into one task
- [gulp-duration](https://github.com/hughsk/gulp-duration) - track task durations

### Testing
- [gulp-istanbul](https://github.com/SBoudrias/gulp-istanbul) - istanbul unit test coverage plugin for gulp