Chore/cleanup (#41)

Author: cr0ybot

index.js

@@ -1,8 +1,8 @@
 /**
- * Gulp WP
+ * Gulp WP.
  */
 
-// Load .env file
+// Load .env file.
 const env = require( 'dotenv' ).config();
 if ( process.env.NOTIFY === 'false' ) {
 	process.env.DISABLE_NOTIFIER = true;
@@ -26,20 +26,20 @@ function init( gulp, config = {} ) {
 	const localConfig = loadConfig();
 	config = Object.assign( {}, localConfig, config );
 
-	// Add env explicitly so that it can't be set via config
+	// Add env explicitly so that it can't be set via config.
 	config.env = {
 		DEV_URL: 'http://localhost',
 		...env.parsed,
 	};
 
-	// If `plugin` not specified in config, check for style.css and then for a plugin entry point
+	// If `plugin` not specified in config, check for style.css and then for a plugin entry point.
 	if ( ! config.plugin ) {
 		if ( ! isTheme() ) {
 			config.plugin = getPluginFile();
 		}
 	}
 
-	// Load local tasks first so we can ignore tasks meant to be overridden
+	// Load local tasks first so we can ignore tasks meant to be overridden.
 	const localTaskFolder = config.taskFolder || 'gulp-wp';
 	log.debug( 'Loading local tasks from', c.blue( localTaskFolder ) );
 	const localTasks = loadTasks( localTaskFolder );
@@ -48,7 +48,7 @@ function init( gulp, config = {} ) {
 		c.cyan( Object.keys( localTasks ).join( ' ' ) )
 	);
 
-	// Load Gulp WP default tasks
+	// Load Gulp WP core tasks.
 	const gulpWPTasks = loadTasks(
 		resolve( __dirname, 'tasks' ),
 		Object.keys( localTasks )
@@ -60,14 +60,14 @@ function init( gulp, config = {} ) {
 
 	const tasks = Object.assign( {}, gulpWPTasks, localTasks );
 
-	// Register our custom registry
+	// Register our custom registry.
 	const gulpWP = new GulpWPRegistry( gulp, tasks, config );
 	gulp.registry( gulpWP );
 
 	return gulpWP;
 }
 
-// Expose GulpWPRegistry for advanced use
+// Expose GulpWPRegistry for advanced use.
 init.GulpWPRegistry = GulpWPRegistry;
 
 module.exports = init;

lib/gulpfile.js

@@ -1,8 +1,7 @@
 /**
- * Default Gulpfile
+ * Default Gulpfile.
  *
  * Used when running `gulp-wp` binary.
  */
 
-const gulp = require( 'gulp' );
-const gulpWP = require( '../' )( gulp );
+require( '../' )( require( 'gulp' ) );

lib/registry.js

@@ -11,16 +11,15 @@ const { DepGraph } = require( 'dependency-graph' );
 const { c, log } = require( '../util' );
 const { version } = require( '../package.json' );
 
-const overwriteArrayMerge = ( destinationArray, sourceArray, options ) =>
-	sourceArray;
+const overwriteArrayMerge = ( destinationArray, sourceArray ) => sourceArray;
 
 /**
  * Custom Gulp task registry.
  *
  * @class
- * @param {Gulp} gulp Main gulp object
- * @param {object} tasks Tasks data
- * @param {object} config Configuration
+ * @param {Object} gulp   Main gulp object
+ * @param {Object} tasks  Tasks data
+ * @param {Object} config Configuration
  */
 class GulpWPRegistry extends DefaultRegistry {
 	constructor( gulp, tasks = {}, config = {} ) {
@@ -50,8 +49,8 @@ class GulpWPRegistry extends DefaultRegistry {
 		for ( const [ taskName, taskInfo ] of Object.entries( taskData ) ) {
 			graph.addNode( taskName );
 
-			// Handle merging config early in case dependencies is a function
-			// NOTE: array properties are overwritten, not concatenated
+			// Handle merging config early in case `dependencies` is a function.
+			// NOTE: array properties are overwritten, not concatenated!
 			const taskConfig = ( config.tasks[ taskName ] = merge(
 				taskInfo?.config || {},
 				config.tasks[ taskName ] || {},
@@ -63,12 +62,12 @@ class GulpWPRegistry extends DefaultRegistry {
 			log.debug( taskConfig );
 
 			const { dependencies = [] } = taskInfo;
-			// `dependencies` can be a function that builds a dependency array dynamically
+			// `dependencies` can be a function that builds a dependency array dynamically.
 			const deps =
 				typeof dependencies === 'function'
 					? dependencies( taskConfig )
 					: dependencies;
-			// for each dependency, add as a node and mark the dependency link
+			// For each dependency, add as a node and mark the dependency link.
 			if ( Array.isArray( deps ) && deps.length ) {
 				for ( const dep of deps ) {
 					graph.addNode( dep );
@@ -80,9 +79,9 @@ class GulpWPRegistry extends DefaultRegistry {
 		const taskOrder = graph.overallOrder();
 		log.debug( 'taskOrder:', taskOrder );
 
-		// import default tasks
+		// Import core tasks.
 		for ( const taskName of taskOrder ) {
-			// Check if task exists or if this is an errant dependency
+			// Check if task exists or if this is an errant dependency.
 			if ( ! taskData.hasOwnProperty( taskName ) ) {
 				throw new Error(
 					`Task "${ taskName }" does not exist, though marked as a dependency by these tasks: ${ graph.dependantsOf(
@@ -105,20 +104,18 @@ class GulpWPRegistry extends DefaultRegistry {
 			task( taskName, taskFn( gulp, taskConfig, this ) );
 		}
 
-		// Register default task
+		// Register default task.
 		task( 'default', this.get( 'dev' ) );
 	}
 
-	//get(taskName) {}
+	// get(taskName) {}
 
-	/*
-	set( taskName, fn ) {
-		const task = this._tasks[taskName] = fn.bind(this.context);
-		return task;
-	}
-	*/
+	// set( taskName, fn ) {
+	// 	const task = this._tasks[taskName] = fn.bind(this.context);
+	// 	return task;
+	// }
 
-	//tasks() {}
+	// tasks() {}
 }
 
 module.exports = GulpWPRegistry;

package.json

@@ -49,6 +49,7 @@
 		"autoprefixer": "^10.4.14",
 		"browser-sync": "^2.29.1",
 		"color-support": "^1.1.3",
+		"copy-webpack-plugin": "^11.0.0",
 		"cross-spawn": "^7.0.3",
 		"deepmerge": "^4.3.1",
 		"del": "^6.1.1",
@@ -72,6 +73,7 @@
 		"gulp-wp-pot": "^2.5.0",
 		"gulp-zip": "^5.1.0",
 		"gulplog": "^2.0.1",
+		"merge-stream": "^2.0.0",
 		"micromatch": "^4.0.5",
 		"node-sass-json-importer": "^4.3.0",
 		"resolve-bin": "^1.0.1",

tasks/blocks.js

@@ -1,5 +1,5 @@
 /**
- * Task: blocks
+ * Task: blocks.
  */
 
 // Node
@@ -18,18 +18,21 @@ const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
 const webpackStream = require( 'webpack-stream' );
 const wpWebpackConfig = require( '@wordpress/scripts/config/webpack.config' );
 
-// GulpWP
+// Internal
 const { c, changed, handleStreamError, log, logFiles } = require( '../util' );
 
-const blockAssets = [ 'script', 'style', 'editorScript', 'editorStyle', 'viewScript' ];
+const blockAssets = [
+	'script',
+	'style',
+	'editorScript',
+	'editorStyle',
+	'viewScript',
+];
 
 module.exports = {
 	task: ( gulp, { src, entries, dest, includePaths } ) => {
-		return function blocks( done ) {
-			const filterOthers = filter( [
-				'*.{php,json}',
-				'!*.asset.php',
-			] );
+		return function blocks() {
+			const filterOthers = filter( [ '*.{php,json}', '!*.asset.php' ] );
 
 			/**
 			 * Overwrites pieces of the default webpack config.
@@ -70,7 +73,7 @@ module.exports = {
 								use: use.map( ( u ) => {
 									const { loader, options } = u;
 									if (
-										loader ==
+										loader ===
 										require.resolve( 'sass-loader' )
 									) {
 										return {
@@ -101,65 +104,83 @@ module.exports = {
 				},
 				plugins: [
 					new RemoveEmptyScriptsPlugin(),
-					...(( wpWebpackConfig?.plugins || [] ).filter(plugin => ! (plugin instanceof CopyWebpackPlugin))),
+					...( wpWebpackConfig?.plugins || [] ).filter(
+						( plugin ) => ! ( plugin instanceof CopyWebpackPlugin )
+					),
 				],
 				devtool: 'source-map',
 			};
 			// Remove config props that may interfere with webpackStream
-			delete webpackConfig[ 'entry' ];
+			delete webpackConfig.entry;
 
 			/**
 			 * Reads block.json files for block assets.
 			 *
 			 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#assets
 			 */
-			const streamBlockAssets = through2.obj(function filterBlockAssetEntries( file, enc, cb ) {
-				log.debug(file.path);
-				// Parse block.json for asset files.
-				const data = JSON.parse( file.contents.toString() );
-				if ( data ) {
-					// Check each potential blockAsset prop.
-					for (const key of blockAssets) {
-						if ( data.hasOwnProperty( key ) ) {
-							// Value can be string or array, ensure array for consistency.
-							if ( ! Array.isArray( data[key] ) ) {
-								data[key] = [ data[key] ];
-							}
+			const streamBlockAssets = through2.obj(
+				function filterBlockAssetEntries( file, enc, cb ) {
+					log.debug( file.path );
+					// Parse block.json for asset files.
+					const data = JSON.parse( file.contents.toString() );
+					if ( data ) {
+						// Check each potential blockAsset prop.
+						for ( const key of blockAssets ) {
+							if ( data.hasOwnProperty( key ) ) {
+								// Value can be string or array, ensure array for consistency.
+								if ( ! Array.isArray( data[ key ] ) ) {
+									data[ key ] = [ data[ key ] ];
+								}
 
-							for ( const asset of data[key] ) {
-								if ( asset.startsWith('file:') ) {
-									const assetFile = asset.substring(5);
-									log.debug('block asset:', c.blue(assetFile));
-									let assetPath = dirname(file.path);
-									// If asset is js, glob for js, ts, jsx, or tsx.
-									if (assetFile.endsWith('js')) {
-										assetPath += `/${assetFile.slice(0, -2)}{j,t}{s,sx}`;
-									}
-									// If asset is css, glob for sass, scss, or css.
-									else if (assetFile.endsWith('css')) {
-										assetPath += `/${assetFile.slice(0, -3)}{sa,sc,c}ss`;
-									}
-									// If neither, just pass the file through, consequences be damned.
-									else {
-										assetPath += `/${assetFile}`;
+								for ( const asset of data[ key ] ) {
+									if ( asset.startsWith( 'file:' ) ) {
+										const assetFile = asset.substring( 5 );
+										log.debug(
+											'block asset:',
+											c.blue( assetFile )
+										);
+										let assetPath = dirname( file.path );
+										// If asset is js, glob for js, ts, jsx, or tsx.
+										if ( assetFile.endsWith( 'js' ) ) {
+											assetPath += `/${ assetFile.slice(
+												0,
+												-2
+											) }{j,t}{s,sx}`;
+										}
+										// If asset is css, glob for sass, scss, or css.
+										else if (
+											assetFile.endsWith( 'css' )
+										) {
+											assetPath += `/${ assetFile.slice(
+												0,
+												-3
+											) }{sa,sc,c}ss`;
+										}
+										// If neither, just pass the file through, consequences be damned.
+										else {
+											assetPath += `/${ assetFile }`;
+										}
+										vinylRead
+											.sync( assetPath )
+											.map( ( f ) => this.push( f ) );
 									}
-									vinylRead.sync(assetPath).map(f => this.push(f));
 								}
 							}
 						}
+
+						// End processing and remove this file from the stream.
+						return cb();
 					}
 
-					// End processing and remove this file from the stream.
-					return cb();
+					// Pass the file through.
+					return cb( null, file );
 				}
-
-				// Pass the file through.
-				return cb( null, file );
-			});
+			);
 
 			return merge(
 				// Handle block assets.
-				gulp.src( entries )
+				gulp
+					.src( entries )
 					.pipe( handleStreamError( 'blocks' ) )
 					// Filter out all but entrypoints.
 					.pipe( streamBlockAssets )
@@ -178,7 +199,8 @@ module.exports = {
 					.pipe( webpackStream( webpackConfig, webpack ) )
 					.pipe( gulp.dest( dest ) ),
 				// Handle moving other files (php, json)
-				gulp.src( src )
+				gulp
+					.src( src )
 					.pipe( handleStreamError( 'blocks' ) )
 					.pipe( filterOthers )
 					.pipe( changed( gulp.lastRun( blocks ) ) )

tasks/build.js

@@ -1,5 +1,5 @@
 /**
- * Task: build
+ * Task: build.
  */
 
 module.exports = {
@@ -9,8 +9,7 @@ module.exports = {
 			preBuild: preBuildTasks,
 			build: buildTasks,
 			postBuild: postBuildTasks,
-		},
-		registry
+		}
 	) => {
 		function maybeParallel( tasks ) {
 			if ( ! Array.isArray( tasks ) || tasks.length === 0 ) {
@@ -20,7 +19,7 @@ module.exports = {
 			return [ gulp.parallel( ...tasks ) ];
 		}
 
-		// Build main series array conditionally
+		// Build main series array conditionally.
 		const buildSeries = [
 			...maybeParallel( preBuildTasks ),
 			...maybeParallel( buildTasks ),

tasks/clean.js

@@ -1,7 +1,7 @@
 /**
- * Task: clean
+ * Task: clean.
  *
- * Clean build folders
+ * Cleans build folders.
  */
 
 // External

tasks/dev.js

@@ -1,9 +1,9 @@
 /**
- * Task: dev
+ * Task: dev.
  */
 
 module.exports = {
-	task: ( gulp, {}, registry ) => {
+	task: ( gulp ) => {
 		const dev = gulp.series( 'build', 'serve', 'watch' );
 
 		return dev;