3 Plugins Every Gruntfile & Gulpfile Needs

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

Gruntfiles and gulpfiles are ubiquitously found in web projects these days. Grunt and gulp, both JavaScript task runners (or workflow builders), are used for just about anything, e.g. minification of JavaScript/CSS files, CoffeeScript or TypeScript compilation, browser sync, etc.

They make use of node.js so if you’re unfamiliar with npm and how node.js works, it would be a good idea to read this tutorial series. As your gruntfiles and gulpfiles continue to grow with the multitude of plugins in the ecosystem, there are three pluginsthat you need to not only make your website great, but also make the web a better place.

JavaScript Lint Plugin

A JavaScript linting grunt or gulp plugin will help you write better JavaScript that is prone to fewer errors. In my opinion, no build workflow for the web is complete without a linting plugin. A linting plugin alerts you to problematic code and helps you write cleaner code. There are four popular linting plugins out there: JSLint, JSCS, JSHint, and ESLint. There can be endless debates around which linting plugin is the best. I recommend ESLint for two reasons.

ESLint is pluggable with your custom plugins.

ESLint supports JSX, which makes your life so much better if you are a React developer.

--ADVERTISEMENT--

To get started, install the plugin in your node_modules:

npm install grunt-eslint

Or:

npm install gulp-eslint

Add the plugin to your gruntfile, don’t forget to change the target property:

Web Standards Plugin

A web standards grunt or gulp plugin will help you develop better HTML, CSS, and JavaScript code that follows the best practices of modern web standards. Following web standards will help you achieve a less buggy website that works withpast and future devices, browsers, screen sizes, etc. I have developed a grunt and gulp plugin that helps you follow modern web standards. It’s super straightforward to get started. It is a read-only plugin so it will not modify your files, it will only report potential improvements to your code.

To get started, install the plugin in your node_modules:

npm install grunt-webstandards

Or:

npm install gulp-webstandards

Add the plugin to your gruntfile, don’t forget to change the target property:

Run grunt webstandards or gulp webstandards tasks to get recommendations.

JavaScript Unit-Testing Plugin

As a strong believer in the necessity of unit-testing, every gruntfile or gulpfile should have a testing plugin setup and you really should write unit tests. There are plenty of JavaScript test runners and it seems different frameworks will favor one over the other. I test with Mocha, so let me show you how to set it up.

To get started, install the plugin in your node_modules:

npm install grunt-mocha-test

Or:

npm install gulp-mocha

Add the plugin to your gruntfile, don’t forget to change the src property:

That’s all! If you have any feedback or suggestions, feel free to send me at tweet @ramisayar.

More Hands-on with Web Development

This article is part of the web development series from Microsoft evangelists and engineers on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com: