onion/gulpfile.js

'use strict';

var gulp = require('gulp');
var gulpif = require('gulp-if');
var sourcemaps = require('gulp-sourcemaps');
var util = require('gulp-util');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var watchify = require('watchify');
var browserify = require('browserify');
var browserSync = require('browser-sync');
var babelify = require('babelify');
var notify = require('gulp-notify');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var _ = require('lodash');
var eslint = require('gulp-eslint');
var argv = require('yargs').argv;
var server = require('./server.js').app;
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');


var config = {
    bootstrapDir: './node_modules/bootstrap-sass'
};

gulp.task('build', ['js:build', 'sass:build', 'copy'], function() {
});

gulp.task('js:build', function() {
    bundle(false);
});

gulp.task('serve', ['browser-sync', 'run-server', 'lint:watch', 'sass:build', 'sass:watch', 'copy'], function() {
    bundle(true);
});

gulp.task('run-server', function() {
    server.listen(4000);
});

gulp.task('browser-sync', function() {
    browserSync({
        files: ['build/css/*.css', 'build/js/*.js'],
        proxy: 'http://localhost:4000',
        port: 3000
    });
});

gulp.task('sass:build', function () {
    gulp.src('./sass/**/main.scss')
        .pipe(gulpif(!argv.production, sourcemaps.init()))
        .pipe(sass({
            includePaths: [
                config.bootstrapDir + '/assets/stylesheets'
            ]
        }).on('error', sass.logError))
        .pipe(gulpif(!argv.production, sourcemaps.write('./maps')))
        .pipe(gulpif(argv.production, minifyCss()))
        .pipe(gulp.dest('./build/css'))
        .pipe(browserSync.stream());
});

gulp.task('sass:watch', function () {
    gulp.watch('./sass/**/*.scss', ['sass']);
});

gulp.task('copy', function () {
    var staticAssets = [
        './fonts/**/*',
        './img/**/*'
    ];

    gulp.src(staticAssets, {base: './'})
        .pipe(gulp.dest('./build'));

    gulp.src(config.bootstrapDir + '/assets/fonts/**/*')
        .pipe(gulp.dest('./build/fonts'));
});

gulp.task('lint', function () {
    return gulp.src(['js/**/*.js'])
        // eslint() attaches the lint output to the eslint property
        // of the file object so it can be used by other modules.
        .pipe(eslint())
        // eslint.format() outputs the lint results to the console.
        // Alternatively use eslint.formatEach() (see Docs).
        .pipe(eslint.format())
        // To have the process exit with an error code (1) on
        // lint error, return the stream and pipe to failOnError last.
        .pipe(eslint.failOnError());
});

gulp.task('lint:watch', function () {
    gulp.watch('js/**/*.js', ['lint']);
});

function bundle(watch) {
    var bro;

    if (watch) {
        bro = watchify(browserify('./js/app.js',
            // Assigning debug to have sourcemaps
            _.assign(watchify.args, {
                debug: true
            })));
        bro.on('update', function() {
            rebundle(bro, true);
        });
    } else {
        bro = browserify('./js/app.js', {
            debug: true
        });
    }

    bro.transform(babelify.configure({
        compact: false
    }));

    function rebundle(bundler, watch) {
        return bundler.bundle()
            .on('error', notify.onError('Error: <%= error.message %>'))
            .pipe(source('app.js'))
            .pipe(buffer())
            .pipe(gulpif(!argv.production, sourcemaps.init({
                loadMaps: true
            }))) // loads map from browserify file
            .pipe(gulpif(!argv.production, sourcemaps.write())) // writes .map file
            .pipe(gulpif(argv.production, uglify({mangle: false})))
            .pipe(gulp.dest('./build/js'))
            .pipe(browserSync.stream());
    }

    return rebundle(bro);
}