Browserify js bundling and sass compilation

gulpfile.js

// gulpfile.js
// Heavily inspired by Mike Valstar's solution:
//   http://mikevalstar.com/post/fast-gulp-browserify-babelify-watchify-react-build/
"use strict";

const gulp         = require( 'gulp' );
const browserify   = require( 'browserify' );
const babelify     = require( 'babelify' );
const uglifyify    = require( 'uglifyify' );
const watchify     = require( 'watchify' );
const uglify       = require( 'gulp-uglify' );
const buffer       = require( 'vinyl-buffer' );
const source       = require( 'vinyl-source-stream' );
const rename       = require( 'gulp-rename' );
const sourceMaps   = require( 'gulp-sourcemaps' );
const gUtil        = require( 'gulp-util' );
const sass         = require( 'gulp-sass' );
const autoPrefixer = require( 'gulp-autoprefixer' );
const cleanCSS     = require( 'gulp-clean-css' );

const fs = require( 'fs' );

const config = {
	js: {
		src: __dirname + '/src/index.js',       // Entry point
		outputDir: __dirname + '/public/js',  // Directory to save bundle to
		outputFile: 'bundle.js' // Name to use for bundle
	},
	css: {
		src: __dirname + '/styles/upload-configure.scss',
		srcGlob: __dirname + '/styles/*.scss',
		fileGlob: __dirname + '/styles/**/*',
		outputDir: __dirname + '/public/css',
	},
};

const sassOptions = {
	errLogToConsole: true,
	outputStyle: 'compressed'
};

const sourceMapOptions = { loadMaps: true };

const autoPrefixerOptions = {
	browsers: [ 'last 2 versions', '> 5%', 'Firefox ESR' ]
};

// https://github.com/jakubpawlowicz/clean-css
const cleanCSSOptions = { compatibility: '*' };

function bundleAndWatch( src, outputName, outputDir ) {
	let b = watchify(
		browserify(
			Object.assign(
				{
					entries: src,
					debug: true
				}, watchify.args
			)
		)
	);
	
	const bundle = () => {
		b.transform( babelify, { presets: [ 'es2015' ] } )
		 .bundle()
		 .pipe( source( outputName ) )
		 .pipe( buffer() )
		 .pipe( sourceMaps.init( sourceMapOptions ) )
		 // Add transformation tasks to the pipeline here.
		 .pipe( uglify() )
		 .on( 'error', gUtil.log )
		 .pipe( sourceMaps.write( './' ) )
		 .pipe( gulp.dest( outputDir ) )
	};
	
	b.on( 'update', bundle ); // on any dep update, runs the bundler
	b.on( 'log', gUtil.log ); // output build logs to terminal
	
	return bundle();
}

function getPageScripts() {
	return fs.readdirSync( __dirname + "/src/page-scripts" )
	         .map( filePath => [ `${__dirname}/src/page-scripts/${filePath}`, filePath, `${__dirname}/public/js` ] );
}

gulp.task( 'bundle', function () {
	return getPageScripts()
		.map( args => bundleAndWatch( ...args ) );
	// return bundleAndWatch( config.js.src, config.js.outputFile, config.js.outputDir );
} );

gulp.task( 'sass', function () {
	return gulp
		.src( config.css.srcGlob )
		.pipe( sourceMaps.init( sourceMapOptions ) )
		.pipe(
			sass( sassOptions )
				.on( 'error', sass.logError )
		)
		.pipe( autoPrefixer( autoPrefixerOptions ) )
		.pipe( cleanCSS( cleanCSSOptions ) )
		.pipe( sourceMaps.write( './' ) )
		.pipe( gulp.dest( config.css.outputDir ) );
} );

gulp.task( 'watch', function () {
	return gulp
	// Watch the input folder for change,
	// and run `sass` task when something happens
		.watch( config.css.fileGlob, [ 'sass' ] )
		// When there is a change,
		// log a message in the console
		.on( 'change', function ( event ) {
			console.log( `File ${event.path} was ${event.type}, running tasks...` );
		} );
} );

/*
	"devDependencies": {
		"babel-preset-es2015": "^6.18.0",
		"babelify": "^7.3.0",
		"browserify": "^13.1.1",
		"buffer": "^5.0.2",
		"gulp": "^3.9.1",
		"gulp-autoprefixer": "^3.1.1",
		"gulp-clean-css": "^2.2.2",
		"gulp-rename": "^1.2.2",
		"gulp-sass": "^3.0.0",
		"gulp-sourcemaps": "^1.9.1",
		"gulp-uglify": "^2.0.0",
		"gulp-util": "^3.0.7",
		"source": "^0.0.3",
		"uglifyify": "^3.0.4",
		"vinyl-buffer": "^1.0.0",
		"vinyl-source-stream": "^1.1.0",
		"watchify": "^3.7.0"
	}
*/