上百个必备的Grunt插件

admin 10年前

Gruntjs是JavaScript项目的构建工具，也是基于node的一个命令行工具。很多开源JS项目都是使用它搭建。如jQuery、Qunit、CanJS等。它有以下作用

  • 合并JS文件
  • 压缩JS文件
  • 单元测试（基于QUnit）
  • 一句话：完全自动化（automation）

下面是100个Grunt插件集合。

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.

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

grunt-html-build - universal helper for frontenders. Unlike undeservedly more popular grunt-processhtml, this plugin is able not only to combine scripts and styles, but also to create full templates/blocks to your HTML.

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

grunt-uncss and grunt-ucss - simultaneously the two best solutions to optimize CSS files. Both plugin parse the HTML code and find all unused and duplicated styles. The second project from the Opera Software team.

grunt-revizor - very cool compressor from MailRu, which not only minificates CSS, but also reduces the names of all classes in HTML, CSS and JavaScript files.

At this point I want to stop for more details. Today, there are a number of CSS compressors and benchmark tests (GitHub for them. But recently I saw an optimizer that performs 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;  }

Also it works forbackgroundand other combinable properties. But unfortunately, I lost it. If someone will see something like this, please make a pull-request, because such solution together with Revizor will be the best CSS compressor ever.

grunt-contrib-htmlmin - neat HTML minificator.

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-csscomb - refines the structure of your CSS. Also there is a grunt-styleguide for generation styleguides.

grunt-contrib-csslint - CSS linter.

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

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

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

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

grunt-modernizr - helps to make the correct architecture of the project with depending of browser capabilities via Modernizr.js.

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

grunt-wiredep - inject Bower packages.

grunt-plato - generate static analysis reports.

grunt-complexity - evaluates code maintainability using Halstead and Cyclomatic metrics.

fixmyjs - automatically fix silly lint errors with help of JSHint (grunt-contrib-jshint).

grunt-jsonlint and grunt-yamllint - JSON and YAML validators.

grunt-contrib-uglify - JavaScript compressor.

grunt-contrib-concat - concatenate files.

Unit Tests

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

grunt-webfont - handy plugin for work 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, Bootstrap or BEM style, ligatures and Data URI.

grunt-responsive-images - an easy way to generate adaptive image under the required resolution of the devices, with the appropriate prefix in the name. Grunt-responsive-images-extender does the same, but with the selection by the selectors and with the record in thesrcset.

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

grunt-svgstore - combines all SVG files and writes them in HTML as<symbol>for future use.

imacss - application and library that transforms image files to data URIs.

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

grunt-spritesmith - converting a set of images into a spritesheet and corresponding CSS variables.

assemble - Static site generator for Node.js, Grunt.js, and Yeoman, using the Handlebars template engine. Used by 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 because of rather long time of work for large set of files. By the way, for this reason there was Gulp, but this plug-in completely solves productivity problem. Also I want to mention grunt-concurrent, intended for the same purpose and grunt-gulp which allows to start Gulp plugins for Grunt.

grunt-contrib-watch - keystone in plugin system of Grunt, which run tasks whenever watched files change.

grunt-notify - automatic error messages in system notifications center when Grunt tasks fail. Works for diffrent OS.

grunt-git - able to use Git commands.

grunt-githooks - bind Grunt tasks to Git Hooks.

grunt-gitbook - create documentation by terrific GitBook.

grunt-jsdoc - generate JavaScript documentation by running JSDoc3.

grunt-conventional-changelog - generating a changelog from Git metadata. Also there is a grunt-bump, which increments package version.

grunt-remove-logging - remove console logging statements.

node-matchdep - filter npm module dependencies.

grunt-phantomas - measure frontend performance.

grunt-preprocess - preprocess files based off environment configuration.

grunt-rev - useful plugin to work with versions.

grunt-open - open URLs and files.

grunt-contrib-connect - simple static web server.

grunt-exec and grunt-shell - run Shell commands .

grunt-ssh - provides the ability to connect via SSH and SFTP.

grunt-contrib-compress - compress files and folders.

grunt-contrib-clean and grunt-contrib-copy - respectively remove and copy sources.

  • 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 .
  • Maybe some automatization methods you want to use directly in the editor, so look at the The Best Plugins for Sublime Text.