gulpfile.js

'use strict';

var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
var gulpif = require('gulp-if');
var svg2png = require('gulp-svg2png');
var critical = require('critical');
var inlineBase64 = require('gulp-inline-base64');
// load gulp-* plugins
var $ = require('gulp-load-plugins')();
var minifyCss = require('gulp-minify-css');

//not watching
var watching = false;

// handle (mostly sass) errors
function handleError(err) {
    console.log(err.toString());
    if (watching) {
        this.emit('end');
    }
}

// compile scss and prefix css
gulp.task('styles', function () {
    return gulp.src('app/styles/*.scss')
        .pipe($.sass({
            outputStyle: 'expanded',
            precision: 4,
            includePaths: [
                './bower_components/susy/sass'
            ],
            onError: console.error.bind(console, 'Sass error:')
        }))
        .pipe($.postcss([
            require('autoprefixer-core')({browsers: ['last 3 versions', '> 5%', 'IE >= 9']}),
            require('postcss-merge-rules')(),
            require('postcss-unique-selectors')(),
            require('postcss-discard-duplicates')()
        ]))
        .pipe(gulpif('*.css', $.combineMediaQueries({
            log: true
        })))
        .pipe(gulpif('**/**/screen.css', $.stylestats()))
        .pipe(gulp.dest('.tmp/styles'))
        .pipe($.size());
});

// modernizr script
gulp.task('modernizr', function () {
    return gulp.src('./bower_components/modernizr/modernizr.js')
        .pipe(gulp.dest('.tmp/scripts/vendor'))
        .pipe($.size());
});

// vendor scripts
gulp.task('vendor', function () {
    return gulp.src([
            './bower_components/jquery/dist/jquery.js'
        ])
        .pipe($.concat('vendor.js'))
        .pipe(gulp.dest('.tmp/scripts'))
        .pipe($.size());
});

// legacy scripts
gulp.task('legacy', function () {
    return gulp.src([
            './bower_components/base64/base64.js'
        ])
        .pipe($.concat('legacy.js'))
        .pipe(gulp.dest('.tmp/scripts'))
        .pipe($.size());
});

// concat & jshint scripts
gulp.task('scripts', ['modernizr', 'vendor', 'legacy'], function () {
    return gulp.src([
            'app/scripts/app.js'
        ])
        .pipe($.concat('main.js'))
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish'))
        .pipe(gulp.dest('.tmp/scripts'))
        .pipe($.size());
});

// generate assets and compile html from partials
// Note: useref needs paths relative to the given searchPath option (below) - NOT the partials themselves.
//       As .tmp is populated first, this path will usually just be /scripts or /styles
gulp.task('html', ['styles', 'scripts'], function () {
    var jsFilter = $.filter('**/*.js');
    var cssFilter = $.filter('**/*.css');

    return gulp.src('app/templates/**/*.html')
        .pipe($.preprocess())
        .pipe(gulp.dest('.tmp'))
        .pipe($.size());
});

// minify images, including svg
gulp.task('images', ['svg'], function () {
    return gulp.src('app/images/**/*')
        .pipe($.imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        }))
        .pipe(gulp.dest('.tmp/images'))
        .pipe($.size());
});

// minify svg & generate png fallbacks
gulp.task('svg', function () {
    gulp.src('app/images/**/*.svg')
        .pipe(svg2png())
        .pipe(gulp.dest('.tmp/images'))
        .pipe($.size());
});

// copy fonts
gulp.task('fonts', function () {
    return gulp.src('app/webfonts/*.{eot,svg,ttf,woff}')
        .pipe($.flatten())
        .pipe(gulp.dest('.tmp/webfonts'))
        .pipe($.size());
});

// move any additional styles from the build, eg: favicons, configs
gulp.task('extras', function () {
    return gulp.src(['app/*.*', '!app/*.html'], { dot: true })
        .pipe(gulp.dest('.tmp'));
});

gulp.task('critical', ['tidy', 'minify'], function (cb) {
    critical.generateInline({
        base: 'dist/',
        src: 'index.html',
        htmlTarget: 'index.html',
        width: 320,
        height: 480,
        minify: true
    },cb);
});

// clean out built files
gulp.task('clean', function () {
    return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean());
});

// build dist
gulp.task('build', ['html', 'images', 'fonts', 'extras'], function () {
    gulp.start('critical');
});

// minify where appropriate & output all generated files from .tmp to dist
gulp.task('minify', ['tidy'], function () {
    return gulp.src(['.tmp/**/*'], { dot: true })
        .pipe(gulpif('*.css', minifyCss({
            compatibility: 'ie8'
        })))
        .pipe(gulpif('*.css', inlineBase64({
            baseDir: 'app/styles/',
            maxWeightResource: 14 * 1024
        })))
        .pipe(gulpif('*.js', $.uglify()))
        .pipe(gulp.dest('dist'));
});

// tidy up partials that are generated by html task
gulp.task('tidy', function () {
    return gulp.src(['.tmp/partials'], { read: false }).pipe($.clean());
});

gulp.task('default', ['clean'], function () {
    gulp.start('build');
});

// autoreload server
gulp.task('connect', function () {
    var connect = require('connect');
    var app = connect()
        .use(require('connect-livereload')({ port: 35729 }))
        .use(connect.static('app'))
        .use(connect.static('.tmp'))
        .use(connect.directory('app'));

    require('http').createServer(app)
        .listen(7777)
        .on('listening', function () {
            console.log('Started connect web server on http://localhost:7777');
        });
});

// boot up server
gulp.task('serve', ['connect', 'styles'], function () {
    require('opn')('http://localhost:7777');
});

// watch for changes
gulp.task('watch', ['html', 'connect', 'serve'], function () {
    var server = $.livereload();

    // watch for changes
    watching = true;
    gulp.watch([
        '.tmp/*.html',
        '.tmp/styles/**/*.css',
        '.tmp/scripts/**/*.js',
        '.tmp/images/**/*'
    ]).on('change', function (file) {
        server.changed(file.path);
    });

    gulp.watch('app/templates/**/*.html', ['html']);
    gulp.watch('app/styles/**/*.scss', ['styles']);
    gulp.watch('app/scripts/**/*.js', ['scripts']);
    gulp.watch('app/images/**/*', ['images']);
});

// Bump version
function inc(importance) {
    // get all the files to bump version in
    return gulp.src(['./package.json', './bower.json'])
        // bump the version number in those files
        .pipe($.bump({type: importance}))
        // save it back to filesystem
        .pipe(gulp.dest('./'))
        // commit the changed version number
        .pipe($.git.commit('version bump'))

        // read only one file to get the version number
        .pipe($.filter('package.json'))
        // **tag it in the repository**
        .pipe($.tagVersion());
}

gulp.task('patch', function() { return inc('patch'); })
gulp.task('feature', function() { return inc('minor'); })
gulp.task('release', function() { return inc('major'); })