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.

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:


grunt.loadNpmTasks('grunt-eslint');
grunt.initConfig({
	eslint: {
		target: ['YOUR_JAVASCRIPT_FILES/*.js']
	}
});
grunt.registerTask('lint', ['eslint']);

Or add the plugin to your gulpfile, don’t forget to change the src parameter:


var eslint = require('gulp-eslint');
gulp.task('lint', function () {
	gulp.src(['YOUR_JAVASCRIPT_FILES/*.js'])
	.pipe(eslint())
	.pipe(eslint.format())
	.pipe(eslint.failAfterError());
});

Run grunt lint or gulp lint tasks to see the outputs.

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:


grunt.loadNpmTasks('grunt-webstandards');
grunt.initConfig({
	webstandards: {
   		'src': ['dist/YOUR_COMPILED_FILES']
	}
});
grunt.registerTask('webstandards', ['webstandards']);

Or add the plugin to your gulpfile, don’t forget to change the src parameter:


var webstandards = require('gulp-webstandards');
gulp.task('webstandards', function(){
	return gulp.src('YOUR_COMPILED_FILES/**/*')
	.pipe(webstandards());
});

Run grunt webstandards or gulp webstandards tasks to get recommendations.

Running grunt webstandards or gulp webstandards

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:


grunt.loadNpmTasks('grunt-mocha-test');
grunt.initConfig({
	mochaTest: {
		test: {
			options: {
				reporter: 'spec',
				captureFile: 'results.txt', 
			},
			src: ['YOUR_JAVASCRIPT_FILES/**/*.js']
		}
	}
});
grunt.registerTask('mocha', 'mochaTest');

Or add the plugin to your gulpfile, don’t forget to change the src parameter:


var mocha = require('gulp-mocha');
gulp.task('mocha', function(){
	return gulp.src('YOUR_JAVASCRIPT_FILES/**/*.js', {
		read: false
	})
	// gulp-mocha needs filepaths so you can't have any plugins before it
	.pipe(mocha({
		reporter: 'nyan'
	}));
});

Run grunt mocha or gulp mocha tasks.

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:

More in-depth learning from our engineers and evangelists:

Interoperability best practices (series):
Coding Lab on GitHub: Cross-browser testing and best practices
Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
Advancing JavaScript without Breaking the Web (from Christian Heilmann)
Unleash 3D rendering with WebGL (from David Catuhe)
Hosted web apps and web platform innovations (from Kiril Seksenov)

Our community open source projects:

vorlon.JS (cross-device remote JavaScript testing)
manifoldJS (deploy cross-platform hosted web apps)
babylonJS (3D graphics made easy)

More free tools and back-end web dev stuff:

Visual Studio Code (lightweight code-editor for Mac, Linux, or Windows)
Visual Studio Dev Essentials (free, subscription-based training and cloud benefits
Code with node.JS with trial on Azure Cloud