boilerplate.js/javascript.js

Development Tools

const gulp = require('gulp');
const lint = require('../../eslint.json');
const babel = require('gulp-babel');
const minify = require("gulp-babel-minify");
const eslint = require('gulp-eslint');
const sourcemaps = require('gulp-sourcemaps');
const concat = require("gulp-concat");
const gulpif = require('gulp-if');
const glob = require('glob');
let begin = Date.now();
let files = { count: 0 };
let options = {};
process.argv.indexOf('--prod') >= 0 ? options.prod = true : options.prod = false;

function JSWatcher() {
    JS(() => {});
    watch((config.js.dir + '/**/*.js')).on('change', function(file) {
        if (file.indexOf('external') < 0) singleFileJS(file);
    }).on('add', function(file) {
        if (file.indexOf('external') < 0) singleFileJS(file);
    }).on('unlink', function(file) {
        if (file.indexOf('external') < 0) fileDeleted(file);
    });
}

function fileDeleted(file) {
    files.all[file] = '';
    save();
}

function JSProd() {

    const terser = $REQUIRE('gulp-terser');
    begin = Date.now();
    var input = path.resolve(config.js.input);
    var inputFileName = path.parse(input).base;
    var jsLocation = path.parse(input).dir;
    var all = jsLocation + '/**/*.js';
    var jsPORD = '!' + path.resolve(jsLocation + '/dev/**/*.js');
    var jsExternal = '!' + path.resolve(jsLocation + '/external/**/*.js');

    console.log('\x1Bc');
    console.log('\x1b[36m%s\x1b[0m', company);
    
    let gulpProcess = gulp.src([input, all, jsExternal, jsPORD])
        .pipe(eslint(lint))
        .pipe(eslint.format())
        .pipe(sourcemaps.init())
        .pipe(concat(inputFileName))
        .pipe(babel({
            "presets": [
                ["env", {
                    "targets": {
                        "browsers": ["last 2 versions"]
                    }
                }]
            ]
        }))
        .pipe(terser())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(config.js.output));

        gulpProcess.on('end', function() {
            message();
            require('./mix-manifest').init();
        });

}

// Processes All Files
function JS(cb) {

    process.argv.indexOf('--prod') >= 0 ? options.prod = true : options.prod = false;
    if (options.prod) return JSProd();

    begin = Date.now();
    var input = path.resolve(config.js.input);
    var jsLocation = path.parse(input).dir;
    var all = jsLocation + '/**/*.js';
    console.log(input);
    glob.sync(all).forEach(function (file) {
        if ( file.indexOf('/external/') < 0 ) {
            if (file.indexOf('/dev/') >= 0 && options.prod) return;
            files.count++;
            if (file.indexOf('/js/init.js') >= 0) {
                files.main = { path: file };
            } else {
                files.all = files.all || {};
                files.all[file] = '';
            }
            processFile(file, () => {
                files.count--;
                if (files.count === 0) {
                    save(cb);
                }
            });
        }
    });

}

function singleFileJS(file) {
    console.log('\x1Bc');
    console.log('\x1b[36m%s\x1b[0m', company);
    console.log('\x1b[37m%s', new Date().toUTCString());
    try {
        browserSync.instances[0].instance.utils.devIp().forEach(ip => {
            console.log(`http://${ip}:3000`.magenta);
        });
    } catch (error) {}
    begin = Date.now();
    processFile(file, () => {
        save();
    });
}

function save(cb) {
    let data = concatFiles();
    fs.ensureDirSync(config.js.output);
    try {
        fs.unlinkSync(path.resolve(config.js.output + '/app.js'));
    } catch (error) {}
    fs.writeFileSync(path.resolve(config.js.output + '/app.js'), data);
    message();
    require('./mix-manifest').init();
    browserSync.reload();
    
    cb && cb();
}

function concatFiles() {
    let data = '';
    data += files.main.data + '\n\n';
   
    Object.keys(files.all).forEach(file => {
        data += files.all[file] + '\n\n';
    });
    data = data.replace(/'use strict';/ig, '');
    data = data.replace(/"use strict";/ig, '');
    data = options.prod ? data.replace(/\n/g, '') : data.replace(/\n\s*\n/g, '\n\n');
    data = `'use strict';` + data;
    return data;
}

function processFile(file, cb) {
    let fileContents = '';
    
    let gulpProcess = gulp.src(file)
        .pipe(eslint(lint))
        .pipe(eslint.format())
        .pipe(babel({
            "presets": [
                ["env", {
                    "targets": {
                        "browsers": ["last 2 versions"]
                    }
                }]
            ]
        }))
        .pipe(gulpif(options.prod, minify()))

        gulpProcess.on('data', function(chunk) {
            var contents = chunk.contents.toString().trim(); 
            // var bufLength = process.stdout.columns;
            // var hr = '\n\n' + Array(bufLength).join("_") + '\n\n'
            if (contents.length > 1) {
                fileContents += contents;
            }
        });

        gulpProcess.on('end', function() {
            if (file.indexOf('/js/init.js') >= 0) {
                files.main.data = fileContents;
            } else {
                files.all[file] = fileContents;
            }
            cb();
        });
}

function message() {

    if (options.prod) {
        console.log('\x1b[33m%s\x1b[0m', 'Compiling Production Javascript ' + config.js.input);
        console.log('\x1b[32m%s', 'Saved in ' + config.js.output + config.js.base);
    } else {
        console.log('\x1b[33m%s\x1b[0m', 'Compiling Dev Javascript ' + config.js.input);
        console.log('\x1b[32m%s', 'Saved in ' + config.js.output + config.js.base);
    }

    var end = Date.now();
    var timeSpent = (end - begin) + "ms";
    console.log('\x1b[36m%s\x1b[0m', 'Finished Compile: ' + timeSpent);

}

module.exports = { JS, JSWatcher };