gulpfile.js

// Load plugins
var gulp            = require('gulp');
var notify          = require('gulp-notify');
var jade            = require('gulp-jade');
var sass            = require('gulp-sass');
var minifyCss       = require('gulp-minify-css');
var autoprefixer    = require('gulp-autoprefixer');
var browserSync     = require('browser-sync').create();





// Directories
var outputDir       = './builds/development';
var templatesDir    = './source/templates/**/*.jade';
var stylesDir       = './source/styles/**/*.{sass,scss}';





// Templates
gulp.task('templates', function() {
    gulp.src(templatesDir)
        .pipe(jade({
            pretty: true // (un)compressed
        }))
        .pipe(gulp.dest(outputDir))
        .pipe(notify('Templates task complete'));
});





// Styles
gulp.task('styles', function() {
    gulp.src(stylesDir)
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: true
        }))
        // .pipe(minifyCss({compatibility: 'ie8'}))
        .pipe(gulp.dest(outputDir + '/css'))
        .pipe(notify('Styles task complete'));
});





// Reload browsers
gulp.task('bs-reload', function () {
    browserSync.reload()
});





// Server
gulp.task('serve', ['templates', 'styles'], function() {
    browserSync.init({
        server: "./builds/development"
    });
    gulp.watch(templatesDir, ['templates', 'bs-reload']);
    gulp.watch(stylesDir, ['styles', 'bs-reload']);
});





// Default
gulp.task('default', ['serve']);