adgile/tasks/task-js.js

An easy-to-use automated front-end setup.

'use strict'

/**
 * A submodule for running the `adg build` task, 
 * responsible for assembling all JavaScript files
 * @module task.js
 */

const   settings    = require('../settings.default'),
        helpers     = require('../helpers/index'),
        chalk       = require('chalk'),
        gulp        = require('gulp'),
				path        = require('path'),
				globule     = require('globule'),
        plugins     = require('gulp-load-plugins')({
			config: path.join(__dirname, '../package.json')
		});

/**
 * Process all main JS files, except for JS files starting with _ and view-specific JS files.
 * jQuery and / or Ender are loaded first, followed by dev and lib files respectively.
 * All JS files are concatenated, stripped of debug statements and uglified on production.
 */
function runScriptsMain() {
	// Only update bar if it hasn't been completed yet, to prevent logs while JS-files are being watched.
	if (!settings.isVerbose && !settings.bar.complete) {
		helpers.updateBar('Compiling scripts');
	}
	helpers.verbose(chalk.grey('Running task "scripts"'));

	const files = [
		settings.assetsFolder + '/js/libs/jquery*.js',
		settings.assetsFolder + '/js/**/*.js',
		'!' + settings.assetsFolder + '/js/**/view-*.js',
		'!' + settings.assetsFolder + '/js/**/_*.js'
	];

	// Create a filter for Babel to not process files in the /js/libs directory
	const filter = plugins.filter([
		settings.assetsFolder + '/js/**/*.js',
		'!' + settings.assetsFolder + '/js/libs/**/*.js'
	], { restore: true });

	if (settings.isProduction) {
		var numFiles = globule.find(files).length;
		console.log(chalk.green('✄  Concatenated ' + numFiles + ' JS files'));
	}

	return gulp.src(files, {base: settings.assetsFolder + '/js'})
		.pipe(plugins.plumber({
			errorHandler: function(err) {
				// console.error(Object.keys(err), Object.values(err));
				const plugin 					= err.plugin ? '\nError thrown by plugin "' + chalk.magenta(err.plugin) + '"' : '';
				const msg 						= err.message ? chalk.hex('#ff6f60')(err.message) : '';
				const fileName 				= err.fileName ? '\nIn ' + chalk.yellow(err.fileName) : '';
				const lineNumber 			= err.lineNumber ? ' on ' + chalk.yellow('line ' + err.lineNumber) : '';
				const columnNumber 		= err.column ? ', ' + chalk.yellow('column ' + err.column) : '';

				console.error('\n' + chalk.bold.hex('#d32f2f')('JS error: ') + msg + fileName + lineNumber + columnNumber + plugin);
				this.emit('end');
			}
		}))
		.pipe(plugins.deporder())
		.pipe(filter)
		// .pipe(plugins.debug()) // Lists the paths in console of the files that are currently in the pipeline
		.pipe(plugins.if(config.useBabel, plugins.babel({
			cwd: __dirname,
			presets: [['@babel/preset-env', { useBuiltIns: 'entry', corejs: 3 }]],
			retainLines: true
		})))
		.pipe(filter.restore)
		.pipe(plugins.if(settings.isProduction, plugins.stripDebug()))
		.pipe(plugins.if(settings.isProduction, plugins.terser({ safari10: true })))
		.pipe(plugins.if(settings.isProduction, plugins.concat('core-libs.js')))
		.pipe(plugins.if(settings.isProduction, plugins.rename({extname: '.min.js'})))
		.pipe(gulp.dest(config.export_assets + '/' + settings.assetsFolder + '/js'));
}

/** 
 * Process all view-specific JS files.
 * Files are stripped of debug statements and uglified on production.
 */
function runScriptsView() {
	helpers.verbose(chalk.grey('Running task "scripts:view"'));

	return gulp.src(settings.assetsFolder + '/js/view-*.js')
		.pipe(plugins.plumber({
			errorHandler: function(err) {
				const plugin 					= err.plugin ? '\nError thrown by plugin "' + chalk.magenta(err.plugin) + '"' : '';
				const msg 						= err.message ? chalk.hex('#ff6f60')(err.message) : '';
				const fileName 				= err.fileName ? '\nIn ' + chalk.yellow(err.fileName) : '';
				const lineNumber 			= err.lineNumber ? ' on ' + chalk.yellow('line ' + err.lineNumber) : '';
				const columnNumber 		= err.column ? ', ' + chalk.yellow('column ' + err.column) : '';

				console.error('\n' + chalk.bold.hex('#d32f2f')('JS error: ') + msg + fileName + lineNumber + columnNumber + plugin);
				this.emit('end');
			}
		}))
		.pipe(plugins.if(settings.useBabel, plugins.babel({
			cwd: __dirname,
			presets: ['@babel/preset-env'],
			retainLines: true
		})))
		.pipe(plugins.if(settings.isProduction, plugins.rename({suffix: '.min'})))
		.pipe(plugins.if(settings.isProduction, plugins.stripDebug()))
		.pipe(plugins.if(settings.isProduction, plugins.terser({ safari10: true })))
		.pipe(gulp.dest(config.export_assets + '/' + settings.assetsFolder + '/js'));
}

/**
 * ESLint options:	https://eslint.org/docs/rules/
 */
function runHints() {
	helpers.verbose(chalk.grey('Running task "hint:scripts"'));

	// Hint all non-lib js files and exclude _ prefixed files
	return gulp.src([
			settings.assetsFolder + '/js/*.js',
			'!**/_*.js',
			'!node_modules/**'
		])
		.pipe(plugins.plumber({
			errorHandler: function(error) {
				console.error(chalk.red('ESLint error: ') + chalk.white(error.message));
            }
		}))
		.pipe(plugins.eslint({ useEslintrc: true }))
		.pipe(plugins.eslint.format('stylish'))
	;
}

module.exports = {
	runScriptsView,
	runScriptsMain,
	runHints
}