Browserify Gulpfile

gulpfile.config.js

'use strict';
var config = {
    sass : {
        errLogToConsole: true,
        outputStyle: 'compressed'
    },
    bower: './bower_components',
    source: {
        main: '.src/',
        html:{
            files: ['./src/**/*.html']
        },
        fonts:{
            files: ['./src/font/**/*']
        },
        images:{
            files: ['./src/**/*.png', 'src/**/*.jpg', 'src/**/*.gif', 'src/**/*.jpeg']
        },
        sass: {
            files: ['./src/sass/**/*.scss', './node_modules/sweetalert/dev/sweetalert.scss']
        },
        js: {
            file: './src/js/index.js',
            path: 'js/',
        }
    },
    dest: {
        main: './dist',
        css:{
            path: './dist/css/',
            file: 'style.css',
            clean: './dist/**/**.css'
        },
        fonts:{
            clean: ['./dist/font/**/*']
        },
        html:{
            path: './dist/**/*.html',
            clean: './dist/**/*.html'
        },
        images:{
            clean: ['./dist/**/*.png', './dist/**/*.jpg', './dist/**/*.gif', './dist/**/*.jpeg']
        },
        js: {
            clean: ['./dist/**/*.js', './dist/**/*.map'],
            path: './dist/js/',
            file: 'build.js',
        }
    },
    messages: {
        build: {
            start: {
                title: 'gulp build',
                subtitle: 'Deployed to the dist folder',
                message: 'Building everything..',
            },
            js: {
                title: 'gulp build',
                subtitle: 'Deployed to the dist folder',
                message: 'Building js..',
            },
            end: {
                title: 'gulp build',
                subtitle: 'Deployed to the dist folder',
                message: 'Build completed successfully',
            },
        },
    },
};
module.exports = config

gulpfile.js

'use strict';

const gulp = require('gulp-help')(require('gulp'));
const plugins = require('gulp-load-plugins')();
const inject = require('gulp-inject');
const bower = require('gulp-bower');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const log = require('./log.js');
const config = require('./gulp.config.js');
const notify = require('gulp-notify');
const browserify = require('browserify');
const shim = require('browserify-shim');
const watchify = require('watchify');
const babelify = require('babelify');
const hbsfy = require('hbsfy');
const del = require('del');
const imageop = require('gulp-image-optimization');
const concatCss = require('gulp-concat-css');
const port = 3000;

var argv = require('yargs')
  .default('debug', true)
  .argv;

//////////////////////////////
// Bump
//////////////////////////////

gulp.task('bump', 'Bump version using e.g. gulp bump --type=major', () => {
    var msg = 'Bumping versions';
    var type = argv.type;
    var version = argv.version;
    var options = {};
    if (version) {
        options.version = version;
        msg += ' to ' + version;
    } else {
        options.type = type;
        msg += ' for a ' + type;
    }

    log(msg);
    return gulp
          .src(['./package.json', './bower.json'])
          .pipe(bump(options))
          .pipe(gulp.dest('./'));
});

//////////////////////////////
// Groups
//////////////////////////////

gulp.task('watch', 'Watches all files and reload', ['inject-start'],  () => {
    browserSync.init({
        server: config.dest.main,
        port: port,
    });

    gulp.watch(config.source.sass.files, ['sass'])
        .on('change', (event) => {
            log('File ' + event.path + ' was ' + event.type + ', running sass tasks...');
        });

    gulp.watch(config.source.images.files, ['images'])
        .on('change', (event) => {
            log('File ' + event.path + ' was ' + event.type + ', running images tasks...');
        });

    gulp.watch(config.source.html.files, ['inject']);
});

gulp.task('serve', 'Build everthing and serve a node server. Params: --dev - watches all files ', ['app-build-watch'], (done) => {});

gulp.task('app', ['browserify', 'sass', 'images', 'fonts', 'html'], () => {});

gulp.task('build', 'Build everthing', ['rev-replace'], () => {});

//////////////////////////////
// App
//////////////////////////////

gulp.task('inject-start', ['app'], () => {
    let target = gulp.src('./dist/**/*.html');
    let sources = gulp.src(['./dist/**/*.js', './dist/**/*.css'], {read: false});
    return target
        .pipe(inject(sources, {ignorePath: '/dist'}))
        .pipe(gulp.dest('./dist'));
});

gulp.task('inject', ['html'], () => {
    let target = gulp.src('./dist/**/*.html');
    let sources = gulp.src(['./dist/**/*.js', './dist/**/*.css'], {read: false});
    return target
        .pipe(inject(sources, {ignorePath: '/dist'}))
        .pipe(gulp.dest('./dist'))
        .pipe(browserSync.stream());

});

gulp.task('rev-replace', ['clean-rev-replace'],  () => {
    var manifest = gulp.src(`${config.source.main}/rev-manifest.json`);
    return gulp.src('./dist/**/*.html')
        .pipe(plugins.revReplace({manifest: manifest}))
        .pipe(gulp.dest(config.dest.main))
        .pipe(inject(gulp.src(['./dist/**/*.js', './dist/**/*.css'], {read: false}), { ignorePath: '/dist'}))
        .pipe(gulp.dest(config.dest.main));
});

gulp.task('revision', ['app'], () => {
    return gulp.src([`${config.dest.main}/**/{*.js,*.css}`])
        .pipe(plugins.rev())
        .pipe(gulp.dest(config.dest.main))
        .pipe(plugins.rev.manifest())
        .pipe(gulp.dest(config.dest.main));
});

gulp.task('clean-rev-replace', ['revision'],  () => {
    let files = [config.dest.css.path + config.dest.css.file, config.dest.js.path + config.dest.js.file];
    return del(files);
});

gulp.task('clean-html', 'Compress html before inject', () => {
    return del(config.dest.html.clean);
});

gulp.task('html', 'Compress html before inject',   () => {
    return gulp
        .src(config.source.html.files)
        .pipe(gulp.dest('./dist'));
});

gulp.task('clean-fonts', 'Clear build folder', () => {
    return del(config.dest.fonts.clean);
});

gulp.task('fonts', 'Just move fonts to the path of build', ['clean-fonts'], () => {
    return gulp
        .src(config.source.fonts.files)
        .pipe(gulp.dest('dist/font'));
});

gulp.task('clean-images', 'Clear build folder', () => {
    return del(config.dest.images.clean);
});

gulp.task('images', 'Compress all images and move to build path', ['clean-images'], (cb) => {
    gulp.src(config.source.images.files)
        .pipe(imageop({
            optimizationLevel: 5,
            progressive: true,
            interlaced: true,
        }))
        .pipe(gulp.dest('dist')).on('end', cb).on('error', cb);
});

gulp.task('clean-sass', 'Clear build folder', () => {
    return del(config.dest.css.clean);
});

gulp.task('sass', 'Compile sass, create sourcemap, autoprefix css', ['clean-sass'],  () => {
    return gulp
        .src(config.source.sass.files)
        .pipe(sourcemaps.init())
        .pipe(plugins.sass(config.sass).on('error', plugins.sass.logError))
        .pipe(sourcemaps.write())
        .pipe(plugins.autoprefixer())
        .pipe(concatCss(config.dest.css.file))
        .pipe(gulp.dest(config.dest.css.path))
        .pipe(browserSync.stream());
});

gulp.task('clean-browserify', 'Clear build folder', () => {
    return del(config.dest.js.clean);
});

gulp.task('browserify', 'Bundle browserify and watch for changes', ['clean-browserify', 'bower'], bundle.bind(null, bundler()));

gulp.task('bower', 'Install bower components if necessary', () => {
    bower(config.bower)
    .pipe(gulp.dest(config.bower));
});

//////////////////////////////
// Browserify
//////////////////////////////
let w = watchify(bundler());

gulp.task('app-build-watch', ['watch'], () => {
    bundle(w);
    w.on('update', () => {
        bundle(w);
    });
});

function bundler() {
    let b = browserify('./src/js/index.js', { debug: true, insertGlobals: true,  cache: {}, packageCache: {},  fullPaths: true })
        .transform(babelify.configure({ plugins: ['syntax-async-functions','transform-regenerator'], presets: ['es2015']}))
   .transform(hbsfy.configure({extensions: ['hbs']}));
    return b;
}

function bundle(pkg) {
    return pkg.bundle()
        .on('end', () => {
            browserSync.reload();
        })
        .on('error', (err) => {
            console.log(err.codeFrame);
            notify({
                title: 'Failed running browserify',
                message: err.message,
                icon: __dirname + '/error.jpg',
            }).write(err);
            this.emit('end');
        })
        .pipe(source(config.dest.js.file))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(config.dest.js.path))
        
}

log.js

/**
 * Log a message or series of messages using chalk's cyan color.
 * Can pass in a string, object or array.
 */
var util = require('gulp-util');

'use strict';

function log(msg) {
    if (typeof (msg) === 'object') {
        for (var item in msg) {
            if (msg.hasOwnProperty(item)) {
                util.log(util.colors.yellow(msg[item]));
            }
        }
    } else {
        util.log(util.colors.yellow(msg));
    }
};

module.exports = log;