Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
125 lines (95 sloc) 3.79 KB

1. Project Setup  <  Previous Page

2. Build Configuration

By default, gulp searches for gulpfile.js from which it reads task definitions for the build.

By convention, all node files should contain require calls at the top. We will need gulp for IO and to create task definitions, gulp plugins for browserify and sass, and del to implement clean tasks.

'use strict';

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var sass = require('gulp-sass');
var del = require('del');

In gulp, each type of compilation is done in a separate pipeline (which is called a gulp task). Data objects, which represent files, flow through these pipelines. These objects are called vinyls. Stream of vinyls is piped from one plugin to another, each of which may transform the stream (file names may be changed, file contents may be altered, objects may be augmented, filtered, or added to the stream).

2.1. Clean Tasks

We need a clean task for each type of compilation. There will be 3 types of source files in the project (HTML, CSS, and JavaScript), so we need 3 clean tasks. Sorce code of each clean task will be identical, just with different glob pattern used to delete files. Code below creates clean:html, clean:css and clean:js.

[ 'html', 'css', 'js' ].forEach(function(ext) {
  gulp.task('clean:'+ ext, function(callback) {
    return del([ 'dist/*.'+ ext ], callback);

In order to delete files with del module, gulp must be used in asynchronuous mode (task function has a callback which is called by del).

2.2. Build Tasks

No transformation is needed for HTML source file. It must only be copied into build folder. For clean:html to be invoked before this task, it must be passed as a dependency.

gulp.task('html', [ 'clean:html' ], function() {
  gulp.src([ 'src/index.html' ])

Piping Sass sources through sass plugin will produce browser-readable CSS.

gulp.task('css', [ 'clean:css' ], function() {
  gulp.src([ 'src/style.scss' ])
      .pipe(sass.sync().on('error', sass.logError))

Browserify is not a gulp plugin, so using it is a bit tricky. Browserify's bundle method returns compiled JavaScript in form of a simple text stream. vinyl-source-stream plugin consumes this text stream and makes an gulp-compatible vinyl stream out of its content. File name must be provided twice. First time for browserify, second time to create vinyl object.

gulp.task('javascript', [ 'clean:js' ], function() {
  return browserify('src/script.js').bundle()
      .pipe(source('script.js', './src').on('error', gutil.log))

2.3. Default Task

Lastly, a task that connects everything.

gulp.task('default', [ 'html', 'css', 'javascript' ]);

To invoke default task from the command line just type gulp. At this point, invoking it will not produce anything since no sources are yet written, but remember to run gulp after all sources are in place.

Next Page  >  3. JavaScript Module