gulp.md

Gulp

gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow. For web development (if that's your thing) it can help you by doing CSS preprocessing, JS transpiling, minification, live reloading, and much more.

Source

Description

Gulp is a task runner that we can use to manage some aspects of our Web App. Like Rake for Ruby, it manages different aspects of our build environment.

With the right configuration, you could host an independent server, or even plan out your deployment routine with Gulp. For this app, we are letting Sinatra do the heavy lifting, and using gulp to manage the compiling of our assets.

Instructions

gulp will have already been installed when you run $ npm install, as it is listed as a devDependency in the package.json.

gulp, like rake, can run tasks that you write for it. You write these tasks in a file, gulpfile.js Here is the gulpfile for this project.

var gulp = require('gulp');
var concat = require('gulp-concat');
var rimraf = require('gulp-rimraf');

var assetsGlob = 'assets/**/*.js'
var scriptDest= 'public/javascripts'
var jsFiles = [
  "assets/javascripts/main.js",
  "assets/javascripts/boot.js"
]

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

gulp.task("scripts", function() {
  gulp.src(jsFiles)
    .pipe(concat('main.js'))
    .pipe(gulp.dest(scriptDest));
});

gulp.task('watch', function () {
  // Watch the assets for changes
  var watcher = gulp.watch(assetsGlob, ['scripts']); 
});

gulp.task('build', ['scripts']);
gulp.task('default', ['build']);

This file (which contains only javascript) defines 5 'tasks' that can be run with gulp: clean, scripts, watch, build, and default. Let's dig deeper into what they're doing, and imagine what our workflow looks like.

clean: Clearing out the Garbage

gulp.task('clean', function () {
  // Delete All The Scripts!
  return gulp.src(scriptDest, { read: false }) 
    .pipe(rimraf());         
});

$ gulp clean

clean is a task that cleans out the public javascript folder of all existing scripts - but that's okay! The public javascript folder (here, the variable scriptDest is not where we are going to be writing our Javascript code - it's only the dest-ination.

We generally don't want to run this too often - in some cases, we may want to hard-delete our compiled code. For our purposes, this is largely a task we'll use in other tasks.

scripts: Including and Compiling

gulp.task("scripts", function() {
  gulp.src(jsFiles)
    .pipe(concat('main.js'))
    .pipe(gulp.dest(scriptDest));
});

$ gulp scripts

scripts does the heavy lifting of our build process. It reads the files defined in jsFiles, and concats them into a single main.js file.

var jsFiles = [
  "assets/javascripts/main.js",
  "assets/javascripts/boot.js"
]

This variable holds the different javascript files you want to conactenate into a single file. This new file, main.js, is then sent to a new dest-ination: public/javascripts.

This means that a conceivable workflow for writing our Javascript files looks like:

1. • Edit the Javascript files in assets/javascripts
2. • run gulp scripts, compiling the files in assets/javascripts into a single file, public/javascripts/main.js
3. • Profit!

watch: The Automator magic

gulp.task('watch', function () {
  // Watch the assets for changes
  var watcher = gulp.watch(assetsGlob, ['scripts']); 
});

$ gulp watch

watch is a helpful task that we can use to make editing our javascript even easier. When we run gulp watch, gulp keeps an eye on our assets folder. Whenever we change (and save) files in that folder, gulp will automatically run scripts for us.

Since gulp watch is an ongoing process, you'll want to run it in another window (much like a server).

build: A thorough refresh

gulp.task('build', ['clean', 'scripts']);

$ gulp build

build is a task that is just a composite of two other tasks: clean and scripts. Calling build calls those, in order.

default: setting up gulp

gulp.task('default', ['build']);

$ gulp

default simply sets up what should happen when you call gulp with no task name. Here, we call build