A simple gulpfile example

Readme.md

Build-tools and Live Reload

As creating for the web has gotten more complex, build tools have become an essential part of my workflow. These tools are usually used to automate repetitive tasks such as pre-processing CSS stylesheets from Sass or Less, or compiling JavaScript from many smaller files. They can also reload browsers when files change -- not having to constantly mash reload is a significant productivity boost. Working without auto-refresh now feels like trying to type in mittens.

Gulp and Grunt run from the Terminal, CodeKit and LiveReload are standalone Mac apps. Gulp is relatively new, is very fast and its task definition files are written in JavaScript. Grunt is more established, works well and has a ton of people using it, but can be slower and requires a lot more configuration using verbose JSON files. CodeKit and LiveReload help with common workflows, Gulp and Grunt can do just about anything imaginable.

I’d been happily using Grunt for a while, but increasing buzz around Gulp was impossible to ignore and I decided to give it a try. I was immediately sold on Gulp's speed and how quickly I was able to write basic tasks. Before Grunt, I used CodeKit.

Gulp is still a young project and definitely rough around the edges, but I still prefer it to Grunt. Wrapping my head around Node Streams took a little work, but that knowledge investment isn’t limited to this tool. There’s also some really good thinking going into Gulp 4, and many of Gulp's warts will be fixed when the new version is released.

I'm working towards moving our gulpfiles into a public repository, but for now here's a simple gulpfile for building an HTML template. In less than 1/10 of a second, it does the following:

• Compiles and injects CSS styles from SCSS source files.
• Copies the images folder to the build directory
• Creates a zip archive of all images, also in the build directory
• Starts a LiveReload server, injects a code snippet and watches files for changes

gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('node-sass');
var rename = require('gulp-rename');
var replace = require('gulp-replace');
var zip = require('gulp-zip');
var rimraf = require('gulp-rimraf');
var webserver = require('gulp-webserver');

gulp.task('build', ['images'], function() {
  var css = sass.renderSync({
    file: 'template/scss/styles.scss'
  });
  gulp.src('template/screenshot.jpg').pipe(gulp.src('build'));
  return gulp.src('template/responsive.html')
    .pipe(replace('/* INSERT_CSS_HERE */', css))
    .pipe(rename('index.html'))
    .pipe(gulp.dest('build'));
});

gulp.task('clean', function() {
  return gulp.src('build', {
      read: false
    })
    .pipe(rimraf());
});

gulp.task('images', function() {
  return gulp.src('template/images/*')
    .pipe(gulp.dest('build/images'))
    .pipe(zip('images.zip'))
    .pipe(gulp.dest('build'));
});

gulp.task('webserver', ['build'], function() {
  return gulp.src('build')
    .pipe(webserver({
      livereload: true,
      fallback: 'index.html'
    }));
});

gulp.task('watch', ['webserver'], function() {
  return gulp.watch('template/**', ['build']);
});