Follow me if you want to grow your full-stack JavaScript skills with my screencasts and courses.

Gulp

Resources

Neal: @cggriffin

Gulp: http://gulpjs.com/

Environment

Create a directory and initialize a new Node application

terminal
    
    $ mkdir learning-gulp
    $ cd learning-gulp
    $ npm init
    

Install gulp globally and witin the Node app, create the first gulpfile.js

terminal
    
    $ npm install -g gulp
    $ npm install --save-dev gulp
    $ touch gulpfile.js
    

Install gulp globally and within the Node app, then create the first gulpfile.js

gulpfile.js
    
    var gulp = require('gulp');

    gulp.task('default', function() {
      console.log("I have configured a gulpfile");
    });
    

We run it using the gulp command, and get the following output

terminal
    
    $ gulp


    [gulp] Using gulpfile ~/projects/learning-gulp/gulpfile.js
    [gulp] Starting 'default'
    I have configured a gulpfile
    [gulp] Finished 'default' after 97ms
    

Processing sass

We install the sass plugin

terminal
    
    $ npm install gulp-ruby-sass --save-dev
    

We configure our gulpfile to use the sass plugin

gulpfile.js
    
    var gulp = require('gulp'),
        sass = require('gulp-ruby-sass');

    gulp.task('process-styles', function() {
      return gulp.src('main.scss')
        .pipe(sass({style: 'expanded' }))
        .pipe(gulp.dest('.'))
    });
    

We run the process-styles task

terminal
    
    $ gulp process-styles
    [gulp] Using gulpfile ~/projects/learning-gulp/gulpfile.js
    [gulp] Starting 'process-styles'
    I have configured a gulpfile
    [gulp] Finished 'process-styles' after 97ms
    

We install minification and autoprefixing plugins

terminal
    
    $ npm install gulp-autoprefixer --save-dev
    $ npm install gulp-minify-css --save-dev
    

We configure CSS minifying and autoprefixing

gulpfile.js
    
    var gulp = require('gulp'),
        sass = require('gulp-ruby-sass');
        autoprefixer = require('gulp-autoprefixer'),
        minifycss = require('gulp-minify-css'),
        rename = require('gulp-rename'),
        concat = require('gulp-concat');


    gulp.task('process-styles', function() {
      return gulp.src('src/styles/main.scss')
        .pipe(sass({style: 'expanded'}))
        .pipe(autoprefixer('last 2 version'))
        .pipe(gulp.dest('dest/styles/'))
        .pipe(rename({suffix: '.min'} ))
        .pipe(minifycss())
        .pipe(gulp.dest('dest/styles/'))
    });
    

Processing JS

We install minification and autoprefixing plugins

terminal
    
    $ npm install gulp-concat --save-dev
    $ npm install gulp-uglify--save-dev
    

Now we can utilize the uglify and concat plugins to combine and minify our JS

gulpfile.js
    
    var gulp = require('gulp'),
        sass = require('gulp-ruby-sass');
        autoprefixer = require('gulp-autoprefixer'),
        minifycss = require('gulp-minify-css'),
        rename = require('gulp-rename'),
        concat = require('gulp-concat'),
        uglify = require('gulp-uglify');

    gulp.task('process-scripts', function() {
      return gulp.src('src/scripts/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dest/scripts/'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dest/scripts/'))
    });

    

Auto running the tasks

We create a task to watch changes to our JS and kick off the process-scripts task automatically

gulpfile.js
    

    gulp.task('watch', function() {
      gulp.watch('src/scripts/*.js', ['process-scripts'])
    });