Gulp Recipes

This is a small collection of Gulp recipes to do various things. Some of the recipes I have shown before, but I find it silly making a github repository for each of them, so from now on, I will keep this collection instead.

Gulp ES6 Babel

Compile your ES6 JavaScript to ES5 including Sourcemaps. The example is mainly taken from the babel website.

npm install gulp gulp-babel gulp-sourcemaps babel-preset-2015
var gulp = require("gulp");
var babel = require("gulp-babel");
var sourcemaps = require("gulp-sourcemaps");

gulp.task("default", function () {
  return gulp.src("js/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

Gulp Image Convert

Converts a folder of gulp images into another format

npm install gulp gulp-gm
var gulp = require('gulp');
var gm = require('gulp-gm');

gulp.task('default', function () {
  gulp.src('./images/*.png')
    .pipe(gm(function (gmfile) {
      return gmfile.setFormat('jpg').quality(90);
    }))
    .pipe(gulp.dest('dist'));
});

Gulp Image Resize

Converts a folder of gulp images into another size, in the example it’s the current instagram picture size (1080), so your phone doesn’t have to do all the scaling work.

npm install gulp gulp-gm
var gulp = require('gulp');
var gm = require('gulp-gm');

gulp.task('default', function () {
  gulp.src('images/*')
    .pipe(gm(function (gmfile) {
      gmfile.setFormat('jpg').quality(100);
      return gmfile.resize(1080, 1080);
    }))
    .pipe(gulp.dest('dist'));
});

Gulp JShint

Run your JavaScript files through jshint with Gulp.

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

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

// Watch task
gulp.task('default',function() {
  // run task initially, after that watch
  gulp.start('jshint');
  gulp.watch('./js/*.js',['jshint']);
});

Gulp Task Series

This is how you can run Gulp tasks in series and make sure for example your CSS vendor prefixing task has run before minifying.

To create a chain of Gulp tasks that run after eachother, just define them as dependencies.

var gulp = require('gulp');
var fs = require('fs');

gulp.task('one', function (cb) {
    fs.writeFile('one.txt', 'Gulp stuff in series!', function (err) {
        cb(err);
        /*
        if the above callback receives an error, the whole chain will stop right there, try removing the filename.
        */
    });
});

// task two runs when ['one'] is done
gulp.task('two', ['one'], function() {
  console.log('task two running, after task one')
});

// define multiple dependencies with ['one', 'two'], ['two'] works alone too, because of the dependency in task two
gulp.task('default', ['one', 'two']);

Gulp Watch Less

Make gulp watch for changes in LESS CSS files.

npm install gulp gulp-less
gulp
var gulp = require('gulp');
var sass = require('gulp-less');

gulp.task('styles', function() {
  gulp.src('./scss/test.less')
    .pipe(gulp.dest('./css'))
});

// Watch task
gulp.task('default',function() {
  // run task initially, after that watch
  gulp.start('styles');
  gulp.watch('./less/*.less',['styles']);
});

Gulp Watch Sass

Compile Sass and watch files for changes with Gulp.

npm install gulp gulp-sass
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
  gulp.src('./scss/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'))
});

// Watch task
gulp.task('default',function() {
  // run task initially, after that watch
  gulp.start('styles');
  gulp.watch('./scss/*.scss',['styles']);
});