060 Gulp

27 Jul 2014

Gulp is a streaming build system. In this episode we will go through the basics of installing gulp with a few tasks as well as watching the tasks while we develop.

Download video: mp4

Sample code: Github

Version: 3.8.6

Similar episodes: 009 Package Managers, 021 GruntJS

Background on Gulp

  1. main website
  2. docs and api docs
  3. plugins

Things to learn with Gulp

1. install

  1. with npm

    npm init
    
    name: (gulp) demo-gulp
    version: (0.0.0) 0.1.0
    description: a simple demo for gulp
    entry point: (index.js) index.html
    test command:
    git repository:
    keywords: demo, js, css
    author: <your_name>
    license: (ISC) MIT
    
  2. install gulp globally

    npm install -g gulp
    
  3. install gulp

    npm install gulp --save-dev
    

2. first task - minify css

  1. minify css
  2. create the css file to minify at css/style.css

    body {
      background: cornflowerblue;
      /* margin: 0; */
    }
    
  3. search for minify css in the plugin list

  4. install the plugin

    npm install gulp-minify-css --save-dev
    
  5. create gulpfile.js for just one task to minify css

    var gulp = require('gulp'),
      minifyCSS = require('gulp-minify-css');
    
    gulp.task('style', function() {
      return gulp
        .src('css/style.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest('assets'));
    });
    

3. second task - uglify js

  1. minify javascript
  2. search for the plugin uglify javascript
  3. add file index.html

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>Hello Gulp</title>
      <link rel="stylesheet" href="assets/style.css">
    </head>
    <body>
    
      <h1 id="now"></h1>
      <script src="assets/script.js"></script>
    
    </body>
    </html>
    
  4. add the javascript file js/script.js

    (function () {
      console.log('hello gulp!');
      document.getElementById('now').innerText = Date();
    })();
    
  5. install the plugin gulp-uglify

    npm install gulp-uglify --save-dev
    
  6. add task to gulpfile.js

    var uglify = require('gulp-uglify');
    
    gulp.task('script', function() {
      return gulp
        .src('js/script.js')
        .pipe(uglify())
        .pipe(gulp.dest('assets'));
    });
    
  7. run the task in the command line

    gulp script
    
  8. execute both the tasks

    gulp.task('default', ['style', 'script']);
    
  9. run all the tasks in the command line

    gulp
    

4. third task - clean built files

  1. install delete files plugin

    npm install del --save-dev
    
  2. integrate the task

    gulp.task('delete', function() {
      del(['assets/*'], function (err) {
        console.log('Files deleted');
      });
    })
    
  3. run the task in the command line

    gulp delete
    

5. add on to tasks

  1. add file renaming to building javascript
  2. install the plugin

    npm install gulp-rename --save-dev
    
  3. add on the tasks to both script and style

    var rename = require('gulp-rename');
    
    gulp.task('style', function() {
      return gulp
        .src('css/style.css')
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('assets'));
    })
    
    gulp.task('script', function() {
      return gulp
        .src('js/script.js')
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('assets'));
    });
    

6. watch the tasks

  1. add on to gulpfile.js

    ...
    gulp.task('watch', function() {
      gulp.watch('css/style.css', ['style']);
      gulp.watch('js/script.js', ['script']);
    });
    
    gulp.task('default', ['delete', 'style', 'script', 'watch']);
    
  2. try it out in the command line and change the files

    gulp
    
  3. integrate jshint

    npm install gulp-jshint --save-dev
    
  4. amend file gulpfile.js accordingly

    var jshint = require('gulp-jshint');
    
    ...
    gulp.task('script', function() {
      return gulp
        .src('js/script.js')
        .pipe(uglify())
        .pipe(jshint())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('assets'));
    });
    ...
    
  5. try to fail the javascript hinting by removing a bracket or so

  6. prevent pipe breaking caused by errors with plumber

    npm install --save-dev gulp-plumber
    
  7. add on to gulpfile.js

    var plumber = require('gulp-plumber');
    
    ...
    gulp.task('script', function() {
      return gulp
        .src('js/script.js')
        .pipe(plumber())            // add plumber
        .pipe(uglify())
        .pipe(jshint())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('assets'));
    });
    

More Resources on Gulp

  1. Articles
  2. Gulp cheatsheet
  3. Stream adventures from Nodeschool
  4. An intro to Gulp.JS
  5. Managing Your Build Tasks With Gulp.js
  6. Getting started with gulp
  7. Setting up Gulp with LiveReload, Sass and other Tasks
  8. Advanced gulp file

Build Link of this episode

Tagtree TV