The Ultimate Gulpfile

UltimateGulp

// ====== Include gulp
var gulp        = require('gulp');

// ===== Include Plugins
var server       = require('gulp-server-livereload');
var plumber     = require('gulp-plumber');
var livereload  = require('gulp-livereload');
var notify      = require('gulp-notify');
var concat      = require('gulp-concat');
var jade        = require('gulp-jade');
var sass        = require('gulp-sass');
var jshint      = require('gulp-jshint');
var stylish     = require('jshint-stylish');
var cssmin      = require('gulp-minify-css');
var uglify      = require('gulp-uglify');
var html2jade   = require('gulp-html2jade');
var rename      = require('gulp-rename');

// ===== Options is for the Jade output. 2 spaces for tab.
var options     = {nspaces:2};

// ===== Variable for output directory
var outputDir   = 'dist/';

// ===== Building a theme/site? Use this variable for dest.
var outputTheme = 'dist/theme001/'

// ====== THE TASK LIST ========
// Comment out the notifys if they bug ya!

// ====== Jade Task
gulp.task('jade', function() {
    return gulp.src(['./jade/**/*.jade', '!./jade/{templates,templates/**/*,includes,convert}/*'])
        .pipe(plumber())
        .pipe(jade({
          pretty: true
        }))
        .pipe(gulp.dest('./dist/'))
        .pipe(gulp.dest('./'))
        .pipe(notify('Jade to HTML - Successful'))
        .pipe(livereload());
});


// ====== Compile SCSS
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest('stylesheets'))
        .pipe(notify('SCSS to CSS - Successful'))
        .pipe(livereload());
});


// ===== JSHint Task
gulp.task('jshint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(notify('Jshint - Successful'));
});


// ===== Compile Final Production Sass with 'gulp build'
gulp.task('prosass', function() {
    return gulp.src('scss/*.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(outputDir + '/stylesheets'))
        .pipe(notify('Production Scss - Successful'));
});


// ===== Finalize Concatenate & Minify JS with 'gulp build'
gulp.task('scripts', function() {
    return gulp.src(['js/**/*.js'])
        .pipe(concat('main.js'))
        .pipe(gulp.dest(outputDir))
        .pipe(rename('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(outputDir + '/js'))
        .pipe(plumber())
        .pipe(notify('Scripts - Successful'))
        .pipe(livereload());
});


// ===== Image Compression Task with 'gulp build'
gulp.task('images', function () {
    var cache = require('gulp-cache'),
    imagemin = require('gulp-imagemin');

    return gulp.src('images/**/*')
        .pipe(cache(imagemin({
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest(outputDir + '/images'))
        .pipe(notify('Images Compressed - Successful'));
});


// ===== Fonts Move Task with 'gulp build'
gulp.task('fonts', function () {
    return gulp.src('fonts/*')
        .pipe(gulp.dest(outputDir + '/fonts'))
        .pipe(notify('Fonts moved - Successful'));
});


// ===== Misc Tasks with 'gulp build'
gulp.task('misc', function () {
    return gulp.src([
        '*.{ico,png,txt}',
        '.htaccess'
        ])
        .pipe(gulp.dest(outputDir))
        .pipe(notify('Misc files moved - Successful'));
});


// ===== Convert HTML to Jade - This ROCKS!!
// (Place html files in folder called html. Run with 'gulp h2j' outputs to jade/convert)
gulp.task('h2j', function () {
    return gulp.src('html/*.html')
        .pipe(html2jade(options))
        .pipe(gulp.dest('jade/convert/'))
        .pipe(notify('HTML to Jade - Successful'));
});


// ===== Build Demo Site with 'gulp theme'
gulp.task('theme', function() {
    gulp.src('dist/**/*')
        .pipe(gulp.dest(outputTheme));    
});


// ====== Server Task with 'gulp webserver'
// open = Open in Default Browser
gulp.task('webserver', function() {
    gulp.src('./')
        .pipe(server({
        host: 'localhost',
        port: 8000,
        livereload: false,
        directoryListing: false,
        open: true
        //defaultFile: './index.html'
    }));
});


// ====== Watch Task with 'gulp watch'
gulp.task('watch', function() {
    livereload.listen();
 
    gulp.watch('./jade/**/*.jade', ['jade']).on('change', livereload.changed);
    gulp.watch('./scss/**/*.scss', ['sass']).on('change', livereload.changed);
    gulp.watch('./stylesheets/**/*.css').on('change', livereload.changed);
    gulp.watch('./css/img/**/*', ['img']).on('change', livereload.changed);
    gulp.watch('./js/**/*.js', ['jshint', 'scripts']).on('change', livereload.changed);
    gulp.watch('./**/*.html').on('change', livereload.changed);
});


// ===== Default Task
gulp.task('default', ['jade', 'sass', 'jshint']);


// ===== Production Build Task
gulp.task('build', ['fonts', 'prosass', 'scripts', 'images']);