Useful Gulp Plugin

Gulp is a famous task automation tool in node community. Unlike Grunt which depend heavily with configuration and temp file, Gulp uses stream to perform and chaining a task.

Right now, I’m not writing about how Gulp work but below is some gulp plugin and sample how to use it in your gulpfile.js

Browser-Sync http://www.browsersync.io/

Seems to be a non stop synchronised browser testing framework. It has a lots of nice of features like simple http server, live reload and mirrored multiple browsers so that your action like scroll, click, and refresh are mirrored between multiple browsers while you test.

gulp.task('browser-sync', function() {
 browserSync.init({
     server: {
         baseDir: "./"
     },
     port: 8080,
     files: ["*/**/*.*"]
 });
});

Nodemon

Watch and restart node server automatically for you

wiredep + gulp-inject

inject your bower file and your custom javascript/css.

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

gulp.task('index', function () {
var target = gulp.src('./src/index.html');
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});

return target.pipe(inject(sources))
 .pipe(gulp.dest('./src'));
});

dont forget to add below placeholder in your index.html file

<!-- inject:js -->
<!-- endinject -->

<!-- inject:css -->
<!-- endinject -->
         

JsHint + JsCs

Style checking and best practise javascript writing

gulp.task('vet', function() {
 log('Analyzing source with JSHint and JSCS');
 var source = ['*/**/*.js',
                 '!node_modules/**/*.*',
                 '!3rdParty/**/*.*'
 ];
 return gulp
     .src(source)
     .pipe($.if(args.verbose, $.print()))
     .pipe($.jscs())
     .pipe($.jshint())
     .pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
     .pipe($.jshint.reporter('fail'));
});

// log function
function log(msg) {
 if (typeof(msg) === 'object') {
     for (var item in msg) {
         if (msg.hasOwnProperty(item)) {
             $.util.log($.util.colors.blue(msg[item]));
         }
     }
 } else {
     $.util.log($.util.colors.blue(msg));
 }
}
         

List Task

Sometimes you wrote lots of gulp task and this plugin will show all registered gulp task

gulp.task('help', $.taskListing);

Image Minification

gulp-imagemin

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('default', function () {
 return gulp.src('src/images/*')
     .pipe(imagemin({
         progressive: true,
         svgoPlugins: [{removeViewBox: false}],
         use: [pngquant()]
     }))
     .pipe(gulp.dest('dist/images'));
});
         

Angular TemplateCache

Warm up your angular template

var templateCache = require('gulp-angular-templatecache');

gulp.task('default', function () {
return gulp.src('templates/**/*.html')
 .pipe(templateCache())
 .pipe(gulp.dest('public'));
});

Utilities

• Clean Up

var del = require('del');

function clean(path, done) {
log('Cleaning: ' + $.util.colors.blue(path));
del(path, done);
}

• gulp-if

  Put some conditional logic in your gulp

• gulp-util

  Can use for logging and print a message into terminal windows

// log function
function log(msg) {
if (typeof(msg) === 'object') {
 for (var item in msg) {
     if (msg.hasOwnProperty(item)) {
         $.util.log($.util.colors.blue(msg[item]));
     }
 }
} else {
 $.util.log($.util.colors.blue(msg));
}
}

• gulp-load-plugins

  Loads in any gulp plugins and attaches them to the global scope , or an object of your choice.

  var $ = require('gulp-load-plugins');
  
  // then you can call your plugin with $.pluginName
   var gulpLoadPlugins = require('gulp-load-plugins');