3 Plugins Every Gruntfile & Gulpfile Needs

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.
[author_more]
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:

Vareslint = 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:

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

Run grunt webstandards or gulp webstandards tasks to get recommendations.

Continue reading %3 Plugins Every Gruntfile & Gulpfile Needs%

by Rami Sayar via SitePoint