boilerplate.js/jsExternal.js

Development Tools

function watch() {
    const watch = require('gulp-watch');

    var externalLocation = path.resolve(config.js.dir + '/external');
    var watchPath = path.resolve(config.js.dir + '/external/**/*.js');
    fs.ensureDirSync(externalLocation);

    watch(watchPath).on('change', function (file) {
        fileParsed = path.parse(file);
        var split = fileParsed.dir.split(/[\/|\\]/);
        var folder = fileParsed.dir.split(/[\/|\\]/).pop();
        var glob;
        var output;

        if (folder === 'external') {
            glob = file;
            output = fileParsed.base;
        } else {
            folder = split[split.indexOf('external') + 1];
            glob = path.resolve(fileParsed.dir.split(folder)[0] + '/' + folder + '/**/*.js')
            output = folder + '.js';
        }

        
        setTimeout(() => {
            console.log('\x1Bc');
            console.log('\x1b[36m%s\x1b[0m', company);
            console.log('Compiling External JS Compnent...'.yellow);
            console.log(glob);
            compile(glob, output);
        }, 500);

    });

}

function init() {

    var externalFolder = path.resolve(config.js.dir + '/external');
    var components = list(externalFolder, 'dir')
    var singleFileComponents = list(externalFolder, 'files', 'js')
    singleFileComponents.forEach(item => {
        compile(externalFolder + '/' + item, item);
    });
    components.forEach(item => {
        compile(externalFolder + '/' + item + '/**/*.js', item + '.js');
    });  
    
}

function compile(input, fileName) {
    var options = {};
    process.argv.indexOf('--prod') >= 0 ? options.prod = true : options.prod = false;
    const eslint = require('gulp-eslint');
    const lint = require('../../eslint.json');
    const minify = require("gulp-babel-minify");
    const concat = require("gulp-concat");
    const babel = require('gulp-babel');
    const gulpif = require('gulp-if');
    const sourcemaps = require('gulp-sourcemaps');
    var outputLocation = path.resolve(config.js.output + 'external/');
    var initFile = path.resolve(config.js.output + 'external/' + fileName.split('.')[0] + '/' + 'init.js');
    fs.ensureDirSync(outputLocation);

    gulp.src([initFile, input])
    .on('end', () => {
    console.log('');
    console.log(`
/* How To Use

    External.js('${fileName.split('.')[0]}', function() {

        console.log('Component Loaded!');

    });

*/
    `.grey);
        browserSync.reload();
    })
    .pipe(eslint(lint))
    .pipe(eslint.format())
    .pipe(concat(fileName))
    .pipe(gulpif(!options.prod, sourcemaps.init()))
    .pipe(babel({
        "presets": [
            ["env", {
                "targets": {
                    "browsers": ["last 2 versions", "safari >= 7"]
                }
            }]
        ]
    }))
    .pipe(gulpif(message, minify()))
    .pipe(gulpif(!options.prod, sourcemaps.write('./')))
    .pipe(gulp.dest(outputLocation));

    function message() {

        if (options.prod) {
            console.log(`Compiled Production ${path.resolve(`${outputLocation}/${fileName}`)}`.green);
            return true;
        }

        console.log(`Compiled Development ${path.resolve(`${outputLocation}/${fileName}`)}`.green);
        return false;
    }
}

module.exports = { watch, compile, init };