Prerequisites

• Develop: Command Line: NPM

Getting started

See: GulpJS.com

Set up a brand new package.json file:

npm init

Install gulp globally (should only have to do this once):

npm install --global gulp-cli

Update gulp globally:

npm update --global gulp-cli

Test that gulp is working:

gulp -v

Install gulp locally (and save to package.json):

npm install gulp --save-dev

Use the local version of Gulp

Sometimes you need to use the version of Gulp installed in your project:

node_modules/gulp/bin/gulp.js {taskName}`

Troubleshoot async builds

If you add or remove paths/globs in .src() calls, then gulp watch may not recognize them (and fail silently). Manually run the gulp default task (which runs gulp clean as a dependency) to erase the /min /dist /build folders so the default tasks start fresh.

Resources

• Gulp Docs: gulp.task()
• Johannes Schickling: Synchronous tasks and dependencies with Gulp

gulp-ruby-sass

More stable, but slower. Has external source maps. Requires ruby and sass gem to be installed.

File: gulpfile.js

var sass    = require('gulp-ruby-sass');
var notify  = require('gulp-notify');
var plumber = require('gulp-plumber');

gulp.task('styles', function () {
    return gulp.src('assets/scss/**/*.scss')
        .pipe(plumber({ errorHandler: handleError }))
        .pipe(sass({
            quiet: true,
            sourcemap: true,
            style: 'compressed'
        }))
        .pipe(autoprefixer('last 2 version', 'safari 6', 'ie >= 10', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('assets/css'))
        .pipe(notify({ message: 'Styles task complete' }));
});

gulp-sass

Faster, but compresses slightly worse. Source maps are inline not external. Only requires npm to compile.

Source maps are currently broken: https://github.com/sass/node-sass/issues/337

File: gulpfile.js

var sass    = require('gulp-sass');
var notify  = require('gulp-notify');
var plumber = require('gulp-plumber');

gulp.task('styles', function () {
    return gulp.src('assets/scss/**/*.scss')
        .pipe(plumber({ errorHandler: handleError }))
        .pipe(sass({
            //sourceComments: 'map',
            outputStyle: 'compressed'
        }))
        .pipe(autoprefixer('last 2 version', 'safari 6', 'ie >= 10', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('assets/css'))
        .pipe(notify({ message: 'Styles task complete' }));
});

gulp-compass

Install gulp-compass

npm install --save-dev gulp-compass

File: config.rb

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
#http_path = "/skin/frontend/gravdept/default/"
http_path = "/"
css_dir = "public/css"
sass_dir = "assets/scss"
images_dir = "public/img"
javascripts_dir = "public/js"

#output_style = :expanded
output_style = :compressed

#environment = :development
environment = :production

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
color_output = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass

File: gulpfile.js

var compass = require('gulp-compass');
var notify  = require('gulp-notify');
var plumber = require('gulp-plumber');

gulp.task('styles-compass', function () {
    return gulp.src('assets/scss/**/*.scss')
        .pipe(plumber({ errorHandler: handleError }))
        .pipe(compass({
            config_file: './config.rb',
            css: 'public/css',
            sass: 'assets/scss'
        }))
        .pipe(notify({ message: 'Styles task complete' }));
});