The most needed plugins for Gulp

This post can be said to be a duplicate of my previous collection “The most needed plugins for Grunt” . The fact is that after many hours of searching I did not find cool plugins for Gulp, which are not available for Grunt with the exception of a couple of very specific utilities. Quite the contrary, but I couldn’t ignore the many Gulp users. I selected all the missing plugins, because Gulp can use them from Grunt, just like Grunt from Gulp.

Good day, everyone! Someone smart, I don’t remember in which article exactly on Habré, literally recently reflected on the development process with an explicit call to automate everything that can be automated. And it is better to spend time on automation once, in order to save it throughout the entire project.

Web developers have a great tool for automating a mass of tasks called Gulp. And my passion for taxonomy forced myself to build a huge collection of nearly 100 valuable plugins for this collector. I think many people who already use Gulp will find something necessary for themselves, and whoever does not, looking at opportunities, will get a good motivation to install it and understand how this thing works.
')
And I also posted a selection on GitHub , so that everyone can add to the collection.

HTML & CSS

autoprefixer is one of the most useful plugins that automatically prefixes CSS properties based on caniuse statistics. It is important to say that the Auto Prefixer is just one of the many additions from the Evil Martians within the PostCSS project.

gulp-browser-sync is probably the most useful tool in terms of increasing the productivity of web developers. BrowserSync creates a connection, after which it auto-updates the page in all browsers on all devices with changes not only to client or even server files. Plus, everything synchronizes the scrolling position and the completed data in the forms.

gulp-useref - parsit specific blocks and concatenates the styles and scripts described in them.

gulp-email-design is an invaluable tool for the layout of letters, which translates all CSS styles into inline, automatically changing all the paths to files, optionally able to upload images to CDN and even send emails.

gulp-uncss is the best solution for optimizing CSS files. The plugin analyzes HTML code and finds all unused and duplicated styles.

gulp-csso is an excellent CSS minifier. To date, there are a number of CSS compressors and a comparative table (GitHub) for them. But recently I saw a better Shorthand utility without Gulp, which does something like the following:

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 is a simple HTML minifiers.

gulp-csscomb - ennobles the structure of your CSS.

gulp-csslint - CSS linter.

gulp-htmlhint - HTML validator.

Javascript

gulp-autopolyfiller is a mega cool plugin that is similar to Autoprefixer and selects all the necessary JavaScript polyfiles so you can use the latest ECMAScript standards today. I also recommend gulp-babel , which converts ES6 / ES7 to ES5.

gulp-jsfmt is a useful plug-in for working with JavaScript from the Rdio team, which allows you to search for specific fragments, format and make massive changes in the code. There is also a gulp-jsbeautifier .

gulp-jscs - JavaScript Code Style. A great tool with many configurations for checking your code in accordance with existing style guides from jQuery, Yandex, Google, Airbnb, and others.

gulp-modernizr - helps to create the right project architecture based on Modernizr.js, depending on the capabilities of the browser.

gulp-express - starts an Express.js web server.

gulp-requirejs and gulp-browserify - optimize the work of RequireJS and Browserify, respectively.

gulp-plato - provides analytics on your code with different metrics in the form of beautiful graphs.

gulp-complexity is a code quality check based on the Halstead and Cyclomatic algorithms.

fixmyjs - automatically fixes simple bugs in the code after a lint based on JSHint ( gulp-jshint ).

gulp-jscpd - for finding duplicates in code.

gulp-jsonlint - validator JSON files.

gulp-uglify - javascript compressor

gulp-concat - concatenation of files.

Unit tests

• gulp-nodeunit
• gulp-jasmine
• gulp-qunit
• gulp-mocha
• gulp-karma

Graphics

gulpicon is a valuable plugin that allows you to generate sprites from SVG, translate them into PNG, record all Data URIs and connect the desired format depending on the browser's capabilities.

gulp-iconfont is a great plugin for working with web fonts. Able to create WOFF, WOFF2, EOT, TTF files from SVG.

gulp-responsive is a simple way to generate adaptive images for the required device resolutions with the corresponding prefixes in the name.

gulp-sharp is the fastest module for working with JPEG, PNG, WebP and TIFF images. The plugin can change the size, orientation, background, alpha channel and more.

gulp-svgstore - combines all connected SVG files and writes them into HTML as <symbol> for further use.

gulp-imacss is a very handy utility that automatically converts PNG, JPG, SVG images connected to CSS into a Data URI.

gulp-imagemin and gulp-tinypng for compressing images.

gulp-spritesmith - automatic generation of sprites.

miscellanea

gulp-grunt - allows you to run Grunt plugins for Gulp.

Some of the missing ones are:

grunt-html-build is a universal layout assistant. The plugin can merge source files and create complete templates / blocks for your HTML. Grunt-include-replace is also very good for similar tasks.

grunt-penthouse and grunt-criticalcss - automatically find the Critical Path in your project. An important point in terms of performance, as described in more detail here .

grunt-shipit - automates deploy using Shipit.

grunt-githooks - binds Git Hooks to Grunt Tasks.

grunt-gitbook - Create documentation with the awesome GitBook utility.

grunt-conventional-changelog - generates a list of changes based on commits in Git.

grunt-proxy and grunt-connect-proxy - connect support for proxying API calls during development.

grunt-phantomas is an excellent tool for measuring project performance.

grunt-usebanner - adds banners (copyright or ASCII headers) in source files and grunt-figlet to help with this.

gulp-watch is the cornerstone of the Gulp plugin system. It monitors all the specified files or entire directories and in case of any changes, performs the tasks described in the configurations.

gulp-notify - displays errors when building Gulp as system messages, and most importantly, what works for different operating systems.

gulp-git - allows you to use git commands.

gulp-jsdoc is a documentation generator that runs on JSDoc3.

gulp-rev is a useful plugin for working with revisions.

gulp-release - allows you to manage versions in your project.

gulp-bump - monitors the repository and updates package.json and gulp-update , which updates the packages themselves.

gulp-bower-files - connects all the necessary Bower components.

gulp-removelogs - automatically removes the logs.

gulp-preprocess is a preprocessor that refers to installed configurations.

gulp-duration - displays the execution time of the task.

gulp-changed and gulp-newer - run tasks only for changed files.

gulp-connect is a simple web server for static sites.

gulp-shell - allows you to run Shell commands.

gulp-ssh provides connectivity over SSH and SFTP.

gulp-zip - archives folders and files.

gulp-clean and gulp-copy - respectively, clean and copy the specified source.

gulp-filesize — displays file sizes in an easy-to-read format.

gulp-util - various utilities for developing Gulp plug-ins.

Compilers

gulp-less - LESS in CSS.
gulp-sass - SASS / SCSS in CSS.
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.

At last

psi - PageSpeed ​​Insights with reporting.
tmi - TMI (Too Many Images) - discover your image weight on the web.
ngrok - Introspected tunnels to localhost.
pageres is a handy utility for creating screenshots of sites in different resolutions.
Perhaps, some automation methods will be more convenient for you to use directly in the editor - Best plugins for SublimeText.
matchdep - helps to properly describe the dependencies.