Microsoft Tech

3 Plugins Every Gruntfile & Gulpfile Needs

    Rami Sayar
    Share

    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:

    Our community open source projects:

    More free tools and back-end web dev stuff:

    CSS Master, 3rd Edition