Style Guidelines for GulpJS

 

• Avoid magic strings out of gulp file in order to make things simple, maintainable and easy to read. Introduce them in gulp.config.js file for instance file path, global gulp variables, wildcard strings etc

 

• Use gulp-load-plugins for lazy loading, Loads in any gulp plugins and attaches them to the global scope, or an object of your choice.

$ npm install --save-dev gulp-load-plugins

Code Before:

    var gulp = require('gulp');
    var jshint = require('gulp-jshint');

    gulp.task('jshint', function () {
        return gulp
        .src('./file.js')
        .pipe(jshint())
        .pipe(jshint.reporter('YOUR_REPORTER_HERE'));
    });

Code Before:

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('jshint', function () {
        return gulp
        .src('./file.js')
        .pipe($.jshint())
            .pipe($.jshint.reporter('YOUR_REPORTER_HERE'));
    });

 

• Use yargs for picking up argument from CLI. Using this plugin you may get node.js command line arguments.

npm install yargs

For example:

    var args = require('yargs').argv;
    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('jshint', function () {
        return gulp
        .src('./file.js')
        .pipe($.if(args.verbose, $.print()))
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish', { verbose: true }))
            .pipe($.jshint.reporter('YOUR_REPORTER_HERE'));
    });

Command: gulp jshint –verbose

verbose is argument to show file list

 

• Use gulp-util for utility function like log(), isStream(), isBuffer(), noop()

npm install gulp-util

For example:

    var gutil = require('gulp-util');

    gulp.task('hello', function () {
        gutil.log('Hello World');
    });

Command: gulp hello

 

• Use gulp-print for printing names of files to the console in order to check status of the gulp pipe.

npm install gulp-print

For example:

   var gulp = require('gulp'); 
   var $ = require('gulp-load-plugins')({ lazy: true });
 
   gulp.task('print', function() {
      gulp.src('test/*.js')
        .pipe($.print())
    });

Command: gulp print

 

• Use gulp-if for conditionally control the flow of vinyl objects.

npm install gulp-if

For example:

    var gulp = require('gulp'); 
    var $ = require('gulp-load-plugins')({ lazy: true }); 
    var args = require('yargs').argv;

    gulp.task('if', function() {
      gulp.src('test/*.js')
        .pipe($.if(args.admin, $.uglify()))
        .pipe(gulp.dest('./dist/'));
    });

Command: gulp if true

if user passed true as value for admin argument then js files as per source will be minfied

 

• Use gulp-task-listing as first step in defualt task in order to provide an easy way to get a listing of your tasks from your gulpfile.

npm install gulp-task-listing

For example:

    var gulp = require('gulp'); 
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('help', $.taskListing);
    gulp.task('default', ['help']);

Command: gulp default

 

 

• Use gulp-plumber to prevent pipe breaking caused by errors from gulp plugins. It handle error gracefully instead of .on(‘error’, errorfunction)

npm install gulp-plumber

For example:

    var gulp = require('gulp'); 
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('error', function () {
        return gulp
        .src('./file.js')
        .pipe($.plumber())
        .pipe($.uglify())
        .pipe(gulp.dest('./dist/'));
    });

Command: gulp error

 

 

What is Gulp.JS

Installing Gulp.js