This post can say is a duplicate of my previous collection "Essential Plugins for Grunt". The matter is that after many hours of search I didn't find cool plugins for Gulp which aren't present for Grunt except for couple of very specific utilities. Just contrary, but I couldn't ignore a huge number of users of Gulp. I marked all missing plugins because Gulp is able to use them from Grunt, as well as Grunt from Gulp.
Good day, everyone! I don't remember in what article it is exactly, someone skilled developer was thinking about the development process with a explicit call to automate everything that can be automated. And it is better to spend time on automation at once then saving it during the whole project. I am absolutely agree with this opinion.
The web developers have a great tool to automate a number of tasks, which named the Gulp. And my passion for taxonomy forced myself to gather a huge collection of more than 100 best plugins for it. I think that many who are already using Gulp will find a new needed stuff for themselves. Who are not used it before, after looking at the opportunities, will get a good motivation to install it and to understand how this thing works.
And I've put it on GitHub, so that everyone could make Pull Request.
HTML&CSS
autoprefixer - one of the most useful plugins that automatically adds prefixes to CSS properties, based on the statistics caniuse. It is important to say that Autoprefix is just one of many additions of PostCSS project from the Evil Martians.
gulp-browser-sync - probably the most needed tool from the point of view of increasing the productivity of web developers. BrowserSync creates a connection, and then performs live reload to the page in all browsers on all devices whenclient or server files were changed. Plus it can to synchronize the position of the scrolling and filled data in forms.
gulp-useref - parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
gulp-email-design - invaluable tool for creating HTML email templates, which converts all CSS styles to inline, automatically changing all file paths, optionally knows how to upload images on a CDN and even send emails.
gulp-uncss - best solution to optimize CSS files. Plugin parse the HTML code and find all unused and duplicated styles.
gulp-csso - very cool CSS minificator. In addition, there are many CSS optimizers and benchmark tests (GitHub) for them. But recently I saw most powerful Shorthand utility without Gulp, which does folowing:
a {
font-family: Arial;
font-style: italic;
font-size: 14px;
line-height: 18px;
font-weight: bold;
background-image: url('example.png');
background-color: red;
background-size: cover;
background-repeat: no-repeat;
}
=>
a {
font: italic bold 14px/18px Arial;
background: red url('example.png') no-repeat / cover;
}
gulp-htmlmin - neat HTML minificator.
gulp-csscomb - refines the structure of your CSS.
gulp-csslint - CSS linter.
gulp-htmlhint - HTML validator.
JavaScript
gulp-autopolyfiller - a wonderful plugin that is similar to Autoprefixer and pick up all the necessary polyfills for JavaScript, so you can use the latest ECMAScript standards today. Still I recommend a gulp-babel, which converts ES6 and beyond in ES5 code.
gulp-jsfmt - useful plugin for JavaScript from the Rdio developers, which allows you to search for specific snippets, format and produce massive changes in the code. There is also gulp-jsbeautifier.
gulp-jscs - JavaScript Code Style. Great tool with many options to test your code in accordance with existing styleguide from jQuery, Yandex, Google, Airbnb and others.
gulp-modernizr - helps to make the correct architecture of the project with depending of browser capabilities via Modernizr.js.
gulp-express — start (and supervise) an Express.js web server using, works well with socket.io
gulp-requirejs and gulp-browserify - optimize the work with RequireJS and Browserify respectively.
gulp-plato - generate static analysis reports.
gulp-complexity - evaluates code maintainability using Halstead and Cyclomatic metrics.
fixmyjs - automatically fix silly lint errors with help of JSHint (gulp-jshint).
gulp-jscpd — copy/paste detector for programming source code.
gulp-jsonlint - JSON validator.
gulp-uglify - JavaScript compressor.
gulp-concat - concatenate files.
Unit Tests
Graphics
gulpicon - gorgeous plugin that allows you to generate sprites from SVG, convert them to PNG, to record all Data URI and connect the appropriate format depending on browser capabilities.
gulp-iconfont - handy plugin for work with web fonts. Able to create WOFF, WOFF2, EOT, TTF files from SVG.
gulp-responsive - an easy way to generate adaptive image under the required resolution of the devices, with the appropriate prefix in the name.
gulp-sharp - fastest module for work JPEG, PNG, WebP and TIFF images. The plugin is able to change the size, orientation, background, alpha channel and more.
gulp-svgstore - combines all SVG files and writes them in HTML as <symbol> for future use.
gulp-imacss - application and library that transforms image files to data URIs.
gulp-imagemin и gulp-tinypng or fimage compression.
gulp-spritesmith - converting a set of images into a spritesheet and corresponding CSS variables.
Others
gulp-grunt - able to run Grunt tasks from Gulp.
Some of expected
grunt-html-build - universal helper for frontenders. Plugin is able to combine the source files and create templates/blocks to your HTML. Another handy tool for similar goals is grunt-include-replace.
grunt-penthouse and grunt-criticalcss - automatically find the Critical Path in your project. It's important from the point of view of performance. You could read more about it here.
grunt-shipit - Shipit automation and deployment tool.
grunt-githooks - bind Grunt tasks to Git Hooks.
grunt-gitbook - create documentation by terrific GitBook.
grunt-conventional-changelog - generating a changelog from Git metadata.
grunt-phantomas - measure frontend performance.
grunt-usebanner - adds a simple banner (copyright or ASCII headers) to source files and grunt-figlet for help for it.
gulp-watch — keystone in plugin system of Gulp, which run tasks whenever watched files change.
gulp-notify - automatic error messages in system notifications center when Gulp tasks fail. Works for diffrent OS.
gulp-git - able to use Git commands.
gulp-jsdoc - generate JavaScript documentation by running JSDoc3.
gulp-rev - static file asset revisioning through content hashing.
gulp-bump - increments versions in package JSON and gulp-update, which automatically updates packages.
gulp-bower-files - inject Bower packages.
gulp-removelogs - remove console logging statements.
gulp-preprocess - preprocess files based off environment configuration.
gulp-duration — displays the elapsed execution time of Gulp tasks.
gulp-changed and gulp-newer — run Gulp tasks with only those source files modified since the last successful run.
gulp-connect - simple static web server.
gulp-shell - run Shell commands.
gulp-ssh - provides the ability to connect via SSH and SFTP.
gulp-zip - compress files and folders..
gulp-clean and gulp-copy - respectively remove and copy sources.
gulp-filesize - displays sizes of files in a readable format.
gulp-util - utilities for developing Gulp plugins.
Compilers
gulp-less - LESS in CSS. gulp-sass - SASS/SCSS in СSS. gulp-compass - SASS with Compass in CSS. gulp-stylus - Stylus in CSS. gulp-coffee - CoffeeScript in JavaScript. gulp-jade - Jade in HTML. gulp-handlebars - Handlebars templates in JST. gulp-jst - Underscore templates in JST. gulp-react - Facebook React's JSX templates in JST. gulp-nunjucks - Nunjucks templates in JST. gulp-dustjs - Dust templates in JST. gulp-angular-templatecache - AngularJS templates in JST.
Finally
- psi - PageSpeed Insights with reporting.
- tmi - TMI (Too Many Images) - discover your image weight on the web.
- ngrok - Introspected tunnels to localhost.
- pageres - responsive website screenshots.
- matchdep - filter npm module dependencies.
- Maybe some automatization methods you want to use directly in the editor, so look at the The Best Plugins for Sublime Text.