The most needed plugins for Grunt

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 Grunt. And my passion for taxonomy forced myself to build a huge collection of nearly 100 valuable plugins for this collector. I think many who already use Grunt will find something necessary for themselves, and whoever does not, looking at the opportunity, 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.

grunt-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.

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-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. There is also a separate grunt-email-boilerplate .

grunt-uncss and grunt-ucss are both two best solutions for optimizing CSS files. Both plugins analyze HTML code and find all unused and duplicated styles. The second project from the team Opera Software.

grunt-revizor is a mega cool compressor that not only minifies CSS, but also shortens the names of all classes in HTML, CSS and JavaScript files. 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 Grunt that does something like the following:

a { font-family: Arial; font-style: italic; font-size: 14px; line-height: 18px; font-weight: bold; } 

=>

 a { font: italic 700 14px/18px Arial; } 

grunt-contrib-htmlmin is a simple HTML minifiers.

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-csscomb - ennobles the structure of your CSS. There is also a grunt-styleguide for generating styled guides.

grunt-contrib-csslint - CSS linter.

grunt-html - HTML validator based on the W3C validator.

Javascript

grunt-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 grunt-babel , which converts ES6 / ES7 to ES5.

grunt-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 grunt-jsbeautifier .

grunt-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.

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

grunt-express runs the Express.js web server.

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

grunt-shipit - automates deploy using Shipit .

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

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

fixmyjs - automatically fixes simple bugs in the code after a jint based on JSHint ( grunt-contrib-jshint ).

grunt-jscpd - to search for duplicates in the code.

grunt-jsonlint and grunt-yamllint are validators for JSON and YAML files.

grunt-contrib-uglify - javascript compressor.

grunt-contrib-concat - file concatenation.

Unit tests

• grunt-contrib-nodeunit
• grunt-contrib-jasmine
• grunt-contrib-qunit
• grunt-mocha
• grunt-karma

Graphics

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

grunt-webfont is a great plugin for working with web fonts. Able to create WOFF, WOFF2, EOT, TTF files from SVG. Works on Mac, Windows and Linux. Reflects the result in the demo page of any variation: CSS / Sass / LESS / Stylus, in Bootstrap or BEM style, with ligatures and Data URI.

grunt-responsive-images is a simple way to generate adaptive images for the required device permissions with corresponding prefixes in the name. And grunt-responsive-images-extender does the same thing, but with a selection of selectors and an entry in srcset .

grunt-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.

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

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

grunt-contrib-imagemin , grunt-imageoptim and grunt-tinypng for image compression.

grunt-spritesmith - automatic generation of sprites.

miscellanea

assemble - this plugin is a whole static site generator for Node.js, Grunt.js and Yeoman with the template engine Handlebars. Used in projects such as Zurb Foundation, Zurb Ink, H5BP / Effeckt, Less.js / lesscss.org, Topcoat, Web Experience Toolkit, etc.

jit-grunt - JIT (Just In Time) loader. Some developers criticize Grunt for quite a long time with a lot of connected files. By the way, for this reason Gulp appeared, but this plugin completely solves the problem of performance. I also want to mention grunt-concurrent , intended for the same purpose and grunt-gulp , which allows you to run Gulp plugins for Grunt.

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

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

grunt-git - allows you to use git commands.

grunt-githooks - binds Git Hooks to Grunt Tasks.

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

grunt-jsdoc is a documentation generator running on JSDoc3.

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

grunt-release and grunt-version - allow you to manage versions of the project.

grunt-conventional-changelog - generates a list of changes based on commits in Git. And then there is grunt-bump , which monitors the repository in the same way and updates package.json and grunt-dev-update to update the packages themselves.

grunt-wiredep - connects all the necessary Bower components.

grunt-remove-logging - automatically removes the logs.

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-preprocess is a preprocessor that refers to installed configurations.

time-grunt - displays the execution time of the task.

load-grunt-config is a library that allows you to share a configuration file for various tax files.

grunt-newer - runs tasks only for changed files.

grunt-open - opens URLs and files depending on the specified options.

grunt-contrib-connect is a simple web server for static sites.

grunt-exec and grunt-shell allow you to run shell commands.

grunt-ssh - provides connectivity over SSH and SFTP.

grunt-contrib-compress - archives folders and files.

grunt-contrib-clean and grunt-contrib-copy - respectively, clean and copy the specified source.

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

grunt-file-info — displays file sizes and versions in an easy-to-read format.

Compilers

grunt-contrib-less - LESS in CSS.
grunt-contrib-sass and grunt-sass - SASS / SCSS in CSS.
grunt-contrib-compass - SASS with Compass in CSS.
grunt-contrib-stylus - Stylus in CSS.
grunt-contrib-coffee - CoffeeScript in javascript.
grunt-contrib-jade - Jade to HTML.
grunt-contrib-handlebars - Handlebars templates in JST.
grunt-contrib-jst - Underscore templates in JST.
grunt-react - Facebook React's JSX templates in JST.
grunt-nunjucks - Nunjucks templates in JST.
grunt-dustjs - Dust templates in JST.
grunt-html2js - 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.