Gulpfile for prototype based on Jade.

gulpfile-for-prototype.js

'use strict';

/////// COMMON ///////

var gulp = require('gulp');
var del = require('del');
var path = require('path');
var runSequence = require('run-sequence');

// Load plugins
var $ = require('gulp-load-plugins')();
var browserify = require('browserify');
var transform = require('vinyl-transform');

// Templates
gulp.task('views:develop', function() {
    return gulp.src('assets/templates/*.jade')
        .pipe($.plumber())
        .pipe($.jade({ pretty: true }))
        .pipe(gulp.dest('public'))
        .pipe($.size({ title: 'views:develop' }));
});

// Styles
gulp.task('styles', function() {
    return gulp.src('assets/styles/*.scss')
        .pipe($.plumber())
        .pipe($.rubySass({
            compass: true,
            style: 'compressed'
        }))
        .pipe($.autoprefixer('last 1 version'))
        .pipe(gulp.dest('public/styles'))
        .pipe($.size({ title: 'styles' }));
});

// Scripts
gulp.task('scripts', function() {

    var browserified = transform(function(filename) {
        var b = browserify(filename);
        return b.bundle()
            .on('error', function (err) {
                console.log(err.toString());
                this.emit('end');
            });
    });

    return gulp.src('./assets/scripts/*.js')
        .pipe($.jshint('.jshintrc'))
        .pipe($.jshint.reporter('jshint-stylish'))
        .pipe(browserified)
        .pipe(gulp.dest('public/scripts'))
        .pipe($.size({ title: 'scripts' }));
});

// Testing
gulp.task('jest', function() {
    var nodeModules = path.resolve('./node_modules');
    return gulp.src('assets/scripts/**/__tests__')
        .pipe($.jest({
            scriptPreprocessor: nodeModules + '/gulp-jest/preprocessor.js',
            unmockedModulePathPatterns: [nodeModules + '/react']
        }));
});

// Images
gulp.task('images', function() {
    return gulp.src('assets/images/**/*')
        .pipe($.plumber())
        .pipe($.cache($.imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('public/images'))
        .pipe($.size({ title: 'images' }));
});

// Fonts
gulp.task('fonts', function () {
    return gulp.src('public/bower_components/**/fonts/**/*.{otf,eot,svg,ttf,woff}')
        .pipe($.flatten())
        .pipe(gulp.dest('public/fonts'))
        .pipe($.size({ title: 'fonts' }));
});

/////// DEVELOPMENT ///////

// Clean
gulp.task('clean:develop', function(cb) {
    del([
        'public/**/*.html',
        'public/styles',
        'public/scripts',
        '.sass-cache'
    ], cb);
});

// Prepare for development
gulp.task('prepare:develop', function (cb) {
    runSequence(
        'clean:develop',
        [
            'views:develop',
            'styles',
            'scripts',
            'images',
            'fonts'
        ],
    cb);
});

// Start Web Server
gulp.task('serve', function() {
    gulp.src('public')
        .pipe($.webserver({
            livereload: true,
            open: true
        }));
});

// Watch
gulp.task('watch', ['prepare:develop'], function() {
    gulp.start('serve');
    gulp.watch('assets/templates/**/*.jade', ['views:develop']);
    gulp.watch('assets/styles/**/*.scss', ['styles']);
    gulp.watch('assets/scripts/**/*.js', ['scripts', 'jest']);
    gulp.watch('assets/images/**/*', ['images']);
});

/////// BUILD ///////

// HTML
gulp.task('views:build', ['views:develop', 'styles', 'scripts', 'images', 'fonts'], function() {

    var jsFilter = $.filter('**/*.js');
    var saveLicense = require('uglify-save-license');
    var useref = $.useref;
    var assets = useref.assets({
            searchPath: 'public'
        });

    return gulp.src('public/**/*.html')
        .pipe($.plumber())
        .pipe(assets)
        .pipe(jsFilter)
        .pipe($.uglify({ preserveComments: saveLicense }))
        .pipe(jsFilter.restore())
        .pipe($.rev())
        .pipe(useref.restore())
        .pipe(useref())
        .pipe($.revReplace())
        .pipe(gulp.dest('public'))
        .pipe($.size({ title: 'views' }));
});

// Clean Cache
gulp.task('clean:cache', function (cb) {
    return $.cache.clearAll(cb);
});

// Clean
gulp.task('clean:build', ['clean:develop', 'clean:cache'], function(cb) {
    del([
        'public/css',
        'public/js',
        'public/fonts',
        'public/images'
    ], cb);
});

// Clean temporary assets
gulp.task('clean:temporary', function (cb) {
    del([
        'public/styles',
        'public/scripts',
        '.sass-cache'
    ], cb);
});

// Build
gulp.task('default', function(cb) {
    runSequence(
        'clean:build',
        'views:build',
        'clean:temporary',
    cb);
});