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 1. docs and api docs 1. 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: 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>

    Hello Gulp


  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


###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


  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