gulp static sites build approach

gulp_js.js

const gulp = require('gulp');
const watch = require('gulp-watch');
const browserify = require('browserify');
const babelify = require('babelify');
const transform = require('vinyl-transform');
const minify = require('gulp-minify');

const ifElse = require('gulp-if-else');
const argv = require('yargs').argv;

module.exports = function (paths) {
    paths = paths || {
            src: 'src/js/**/*.js',
            dst: 'build/js'
        };

    function renderJS(stream) {
        const browserified = transform(function(filename) {
            var b = browserify(filename).transform("babelify");
            return b.bundle();
        });
        return stream.pipe(browserified)
            .pipe(ifElse(argv.production, minify))
            .pipe(gulp.dest(paths.dst));
    }

    gulp.task('js', function () {
        return renderJS(gulp.src(paths.src));
    });

    gulp.task('js.watch', function () {
        console.log('Watching ' + paths.src);
        return renderJS(gulp.src(paths.src).pipe(watch(paths.src)));
    });
};

gulp_nunjucks.js

const gulp = require('gulp');
const watch = require('gulp-watch');
const nunjucksRender = require('gulp-nunjucks-render');

const ifElse = require('gulp-if-else');
const argv = require('yargs').argv;

module.exports = function (paths) {
    paths = paths || {
            src: 'src/html/**/*.+(html|nunj|nunjucks)',
            dst: 'build/html'
        };

    function renderHTML(stream) {
        return stream.pipe(nunjucksRender({
                path: ['src/templates']
            }))
            .pipe(gulp.dest(paths.dst));
    }

    gulp.task('nunjucks', function () {
        return renderHTML(gulp.src(paths.src));
    });

    gulp.task('nunjucks.watch', function () {
        console.log('Watching ' + paths.src);
        return renderHTML(gulp.src(paths.src).pipe(watch(paths.src)));
    });
};

gulp_stylus.js

const gulp = require('gulp');
const watch = require('gulp-watch');
const stylus = require('gulp-stylus');
const sourcemaps = require('gulp-sourcemaps');
const csso = require('gulp-csso');
const autoprefixer = require('gulp-autoprefixer');

const ifElse = require('gulp-if-else');
const argv = require('yargs').argv;

module.exports = function (paths) {
    paths = paths || {
            src: 'src/css/**/*.styl',
            dst: 'build/css'
        };

    function renderCSS(stream) {
        return stream.pipe(sourcemaps.init())
            .pipe(stylus({
                paths: ['node_modules']
            }))
            .pipe(autoprefixer({
                browsers: ['last 5 versions'],
                cascade: false
            }))
            .pipe(ifElse(argv.production, csso))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(paths.dst));
    }

    gulp.task('stylus', function () {
        return renderCSS(gulp.src(paths.src));
    });

    gulp.task('stylus.watch', function () {
        console.log('Watching ' + paths.src);
        return renderCSS(gulp.src(paths.src).pipe(watch(paths.src)));
    });
};

gulpfile.js

const gulp = require('gulp');
const serve = require('gulp-serve');

require('./gulp/nunjucks')({
    src: 'src/pages/**/*.+(html|nunj|nunjucks)',
    dst: 'build/html'
});

require('./gulp/stylus')({
    src: 'src/css/**/*.styl',
    dst: 'build/css'
});

require('./gulp/js')({
    src: 'src/js/**/*.js',
    dst: 'build/js'
});

gulp.task('default', ['nunjucks', 'css', 'js']);
gulp.task('watch', ['default', 'nunjucks.watch', 'stylus.watch', 'js.watch']);
gulp.task('serve', serve(['build/html', 'build']));
gulp.task('sw', ['watch', 'serve']);