February 21, 2015 at 18:30Most Wanted Grunt Plugins
Good day to all! Someone smart, I don’t remember which article on Habré, just recently thought about 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 later save it throughout the entire project.
Web developers have a great tool for automating a ton of tasks called Grunt. And my passion for taxonomy forced myself to put together a huge collection of almost 100 valuable plugins for this collector. I think many who are already using Grunt will find something for themselves, and who is not, looking at the possibilities, they will get good motivation to install it and understand how this thing works.
I also posted a selection on GitHub so 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’s important to say that AutoPrefixer is just one of many add-ons for the Evil Martians PostCSS project .
grunt-browser-sync is probably the most useful tool in terms of improving the productivity of web developers. BrowserSync creates a connection, after which it automatically updates the page in all browsers on all devices when changing not only client or even server files. Plus, it synchronizes the scroll position and the completed data in the forms.
grunt-html-build- universal assistant in layout. The plugin is able to combine source files and create complete templates / blocks for your HTML. Still for similar tasks grunt-include-replace is very good .
grunt-email-design is an invaluable tool for typesetting letters that translates all CSS styles into inline ones, automatically changing all paths to files, optionally knows how to upload images to CDN and even send letters to mail. There is also a separate grunt-email-boilerplate .
grunt-uncss and grunt-ucss are simultaneously the two best solutions for optimizing CSS files. Both plugins parse HTML code and find all unused and duplicated styles. The second project is from the Opera Software team.
grunt-revizor- Mega cool compressor that not only minifies CSS, but also shortens the names of all classes in HTML, CSS and JavaScript files. Today, there are a number of CSS compressors and a comparison table ( GitHub ) for them. But recently, I saw the best Shorthand utility without Grunt, which does something like this:
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 minifier.
grunt-penthouse and grunt-criticalcss - automatically find the Critical Path in your project. An important point in terms of performance, which is described in more detail here .
grunt-csscomb - ennobles the structure of your CSS. There is still grunt-styleguide for generating style guides.
grunt-contrib-csslint - CSS linter.
grunt-html - HTML validator based on validator from W3C.
Javascript
grunt-autopolyfiller is a mega cool plugin that is similar to Autoprefixer and picks up all the necessary polyphiles for JavaScript so you can use the latest ECMAScript standards today. I also recommend grunt-babel , which converts ES6 / ES7 to ES5.
grunt-jsfmt is the most useful JavaScript plugin from the Rdio team, which allows you to search for specific fragments, format and make massive changes to the code. There is also a grunt-jsbeautifier .
grunt-jscs - JavaScript Code Style. A wonderful tool with many configurations for checking your code against existing style guides from jQuery, Yandex, Google, Airbnb and others.
grunt-modernizr- Helps to draw up the correct architecture of the project based on Modernizr.js, depending on the capabilities of the browser.
grunt-express - launches Express.js web server.
grunt-contrib-requirejs and grunt-browserify - optimize RequireJS and Browserify, respectively.
grunt-shipit - Automates deploy with Shipit .
grunt-plato - provides analytics for your code with different metrics in the form of beautiful graphs.
grunt-complexity - code quality checking based on Halstead and Cyclomatic algorithms.
fixmyjs - automatically fix simple errors in code after a lint executed based on JSHint (grunt-contrib-jshint ).
grunt-jscpd - to find 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
Graphics
grunticon is a valuable plugin that allows you to generate sprites from SVG, convert them to PNG, write all Data URIs and connect the desired format depending on the capabilities of the browser.
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 a 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 resolutions with the corresponding prefixes in the name. And grunt-responsive-images-extender does the same thing, but with selectors and entries 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 much more.
grunt-svgstore - combines all connected SVG files and writes them to HTML as
imacss is a very convenient utility that automatically converts PNG, JPG, SVG images connected to CSS to Data URI.
grunt-contrib-imagemin , grunt-imageoptim and grunt-tinypng for image compression.
grunt-spritesmith - automatic sprite generation.
Miscellaneous
assemble - this plugin is a whole generator of static sites for Node.js, Grunt.js and Yeoman with the Handlebars template engine. Used in projects such as the Zurb Foundation, Zurb Ink, H5BP / Effeckt, Less.js / lesscss.org, Topcoat, Web Experience Toolkit, and others.
Jit-grunt - JIT (Just In Time) loader. Some developers criticize Grunt for quite a long time working with many connected files. By the way, for this reason Gulp appeared, but this plugin completely solves the performance problem. I also want to mention grunt-concurrent , designed for the same purpose, and grunt-gulp , which allows you to run Gulp plugins for Grunt.
grunt-contrib-watch- the cornerstone in 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 in the form of 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 based on JSDoc3.
grunt-rev is a useful revision plugin.
grunt-release andgrunt-version - allow you to manage project versions.
grunt-conventional-changelog - Generates a list of changes based on commits in Git. And 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 necessary Bower components.
grunt-remove-logging - automatically removes 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- a preprocessor that refers to the installed configurations.
time-grunt - displays the execution time of tasks.
load-grunt-config is a library that allows you to split the configuration file for various taxa.
grunt-newer - launches 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 the ability to connect via SSH and SFTP.
grunt-contrib-compress - archives folders and files.
grunt-contrib-clean and grunt-contrib-copy - respectively clean and copy the specified sources.
grunt-usebanner - adds banners (copyright or ASCII headers) in the source files and grunt-figlet to help work 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 in 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.
In the end
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 correctly describe dependencies.