[TASK] enables processing of multiple css files

- see ahmadawais#125

README.md

@@ -167,6 +167,26 @@ gulp translate
 gulp stylesRTL
 ```
 
+### → `FAQs`
+
+#### 📖 How to add SCSS files for `addonStyles` option?
+
+You can add a set of SCSS/CSS file for compilation as the following format
+
+```javascript
+addonStyles: [
+    {
+        styleSRC: './assets/css/add-on-1.scss', // Path to .scss file.
+        styleDestination: './assets/css/', // Path to place the compiled CSS file.
+    },
+    {
+        styleSRC: './assets/css/add-on-2.scss', // Path to another .scss file.
+        styleDestination: './', // Path to place the compiled CSS file.
+    },
+],
+```
+
+
 <br>
 
 ![Update](https://on.ahmda.ws/d0b586da13cc/c)

src/gulpfile.babel.js

@@ -60,7 +60,9 @@ const sort = require( 'gulp-sort' ); // Recommended to prevent unnecessary chang
 const cache = require( 'gulp-cache' ); // Cache files in stream for later use.
 const remember = require( 'gulp-remember' ); //  Adds all the files it has ever seen back into the stream.
 const plumber = require( 'gulp-plumber' ); // Prevent pipe breaking caused by errors from gulp plugins.
-const beep = require( 'beepbeep' );
+const beep = require( 'beepbeep' ); // Enables console beep sounds
+const merge = require( 'merge-stream' ); // Enables merging (interleaving) of multiple streams
+const defaults = require('lodash.defaults'); // Enables lodash utilities
 
 /**
  * Custom Error Handler.
@@ -99,11 +101,9 @@ const reload = done => {
 };
 
 /**
- * Task: `styles`.
- *
- * Compiles Sass, Autoprefixes it and Minifies CSS.
+ * Function: `styles`.
  *
- * This task does the following:
+ * This function does the following:
  *    1. Gets the source scss file
  *    2. Compiles Sass to CSS
  *    3. Writes Sourcemaps for it
@@ -112,9 +112,12 @@ const reload = done => {
  *    6. Minifies the CSS file and generates style.min.css
  *    7. Injects CSS or reloads the browser via browserSync
  */
-exports.styles = () => {
-	return gulp
-		.src( config.styleSRC, { allowEmpty: true })
+function processStyle( gulpStream, processOptions = {} ) {
+	processOptions = defaults( processOptions, {
+		styleDestination: config.styleDestination,
+	} );
+
+	return gulpStream
 		.pipe( plumber( errorHandler ) )
 		.pipe( sourcemaps.init() )
 		.pipe(
@@ -130,25 +133,25 @@ exports.styles = () => {
 		.pipe( autoprefixer( config.BROWSERS_LIST ) )
 		.pipe( sourcemaps.write( './' ) )
 		.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
-		.pipe( gulp.dest( config.styleDestination ) )
+		.pipe( gulp.dest( processOptions.styleDestination ) )
 		.pipe( filter( '**/*.css' ) ) // Filtering stream to only css files.
 		.pipe( mmq({ log: true }) ) // Merge Media Queries only for .min.css version.
-		.pipe( browserSync.stream() ) // Reloads style.css if that is enqueued.
+		.pipe( browserSync.stream() ) // Reloads .css if that is enqueued.
 		.pipe( rename({ suffix: '.min' }) )
 		.pipe( minifycss({ maxLineLen: 10 }) )
 		.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
-		.pipe( gulp.dest( config.styleDestination ) )
+		.pipe( gulp.dest( processOptions.styleDestination ) )
 		.pipe( filter( '**/*.css' ) ) // Filtering stream to only css files.
-		.pipe( browserSync.stream() ) // Reloads style.min.css if that is enqueued.
-		.pipe( notify({ message: '\n\n✅  ===> STYLES — completed!\n', onLast: true }) );
-};
+		.pipe( browserSync.stream() ) // Reloads .min.css if that is enqueued.
+		;
+}
 
 /**
- * Task: `stylesRTL`.
+ * Function: `stylesRTL`.
  *
  * Compiles Sass, Autoprefixes it, Generates RTL stylesheet, and Minifies CSS.
  *
- * This task does the following:
+ * This function does the following:
  *    1. Gets the source scss file
  *    2. Compiles Sass to CSS
  *    4. Autoprefixes it and generates style.css
@@ -158,9 +161,12 @@ exports.styles = () => {
  *    8. Minifies the CSS file and generates style-rtl.min.css
  *    9. Injects CSS or reloads the browser via browserSync
  */
-exports.stylesRTL = () => {
-	return gulp
-		.src( config.styleSRC, { allowEmpty: true })
+function processStyleRTL( gulpStream, processOptions = {} ) {
+	processOptions = defaults( processOptions, {
+		styleDestination: config.styleDestination,
+	} );
+
+	return gulpStream
 		.pipe( plumber( errorHandler ) )
 		.pipe( sourcemaps.init() )
 		.pipe(
@@ -177,18 +183,141 @@ exports.stylesRTL = () => {
 		.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
 		.pipe( rename({ suffix: '-rtl' }) ) // Append "-rtl" to the filename.
 		.pipe( rtlcss() ) // Convert to RTL.
-		.pipe( sourcemaps.write( './' ) ) // Output sourcemap for style-rtl.css.
-		.pipe( gulp.dest( config.styleDestination ) )
+		.pipe( sourcemaps.write( './' ) ) // Output sourcemap for -rtl.css.
+		.pipe( gulp.dest( processOptions.styleDestination ) )
 		.pipe( filter( '**/*.css' ) ) // Filtering stream to only css files.
-		.pipe( browserSync.stream() ) // Reloads style.css or style-rtl.css, if that is enqueued.
+		.pipe( browserSync.stream() ) // Reloads .css or -rtl.css, if that is enqueued.
 		.pipe( mmq({ log: true }) ) // Merge Media Queries only for .min.css version.
 		.pipe( rename({ suffix: '.min' }) )
 		.pipe( minifycss({ maxLineLen: 10 }) )
 		.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
-		.pipe( gulp.dest( config.styleDestination ) )
+		.pipe( gulp.dest( processOptions.styleDestination ) )
 		.pipe( filter( '**/*.css' ) ) // Filtering stream to only css files.
-		.pipe( browserSync.stream() ) // Reloads style.css or style-rtl.css, if that is enqueued.
-		.pipe( notify({ message: '\n\n✅  ===> STYLES RTL — completed!\n', onLast: true }) );
+		.pipe( browserSync.stream() ) // Reloads style.css or -rtl.css, if that is enqueued.
+		;
+}
+
+/**
+ * Task: `styles`.
+ *
+ * Compiles Sass, Autoprefixes it and Minifies CSS.
+ *
+ * This task does the following:
+ *    1. Gets the source scss file
+ *    2. Compiles Sass to CSS
+ *    3. Writes Sourcemaps for it
+ *    4. Autoprefixes it and generates style.css
+ *    5. Renames the CSS file with suffix .min.css
+ *    6. Minifies the CSS file and generates style.min.css
+ *    7. Injects CSS or reloads the browser via browserSync
+ */
+exports.styles = () => {
+	return	processStyle(
+				gulp.src(
+						config.styleSRC,
+						{ allowEmpty: true } ),
+						{ styleDestination: config.styleDestination }
+					)
+					.pipe( notify( { message: '\n\n✅  ===> STYLES — completed!\n', onLast: true } )
+			);
+};
+
+/**
+ * Task: `addonStyles`.
+ *
+ * Compiles Sass, Autoprefixes it and Minifies CSS.
+ *
+ * This task does the following:
+ *    1. Gets the source scss file
+ *    2. Compiles Sass to CSS
+ *    3. Writes Sourcemaps for it
+ *    4. Autoprefixes it and generates CSS file
+ *    5. Renames the CSS file with suffix .min.css
+ *    6. Minifies the CSS file and generates .min.css
+ *    7. Injects CSS or reloads the browser via browserSync
+ */
+exports.addonStyles = ( done ) => {
+	// Exit task when no addon styles
+	if ( config.addonStyles.length === 0 ) {
+		return done();
+	}
+
+	// Process each addon style
+	var tasks = config.addonStyles.map( function ( addon ) {
+		return	processStyle(
+					gulp.src(
+							addon.styleSRC,
+							{ allowEmpty: true } ),
+							{ styleDestination: addon.styleDestination }
+						)
+						.pipe( notify( { message: '\n\n✅  ===> ADDON STYLES — completed!\n', onLast: true } )
+				);
+	} );
+
+	return merge( tasks );
+};
+
+/**
+ * Task: `stylesRTL`.
+ *
+ * Compiles Sass, Autoprefixes it, Generates RTL stylesheet, and Minifies CSS.
+ *
+ * This task does the following:
+ *    1. Gets the source scss file
+ *    2. Compiles Sass to CSS
+ *    4. Autoprefixes it and generates style.css
+ *    5. Renames the CSS file with suffix -rtl and generates style-rtl.css
+ *    6. Writes Sourcemaps for style-rtl.css
+ *    7. Renames the CSS files with suffix .min.css
+ *    8. Minifies the CSS file and generates style-rtl.min.css
+ *    9. Injects CSS or reloads the browser via browserSync
+ */
+exports.stylesRTL = () => {
+	return	processStyleRTL(
+				gulp.src(
+						config.styleSRC,
+						{ allowEmpty: true } ),
+						{ styleDestination: config.styleDestination }
+					)
+					.pipe( notify({ message: '\n\n✅  ===> STYLES RTL — completed!\n', onLast: true })
+			);
+};
+
+/**
+ * Task: `addonStylesRTL`.
+ *
+ * Compiles Sass, Autoprefixes it, Generates RTL stylesheet, and Minifies CSS.
+ *
+ * This task does the following:
+ *    1. Gets the source scss file
+ *    2. Compiles Sass to CSS
+ *    4. Autoprefixes it and generates style.css
+ *    5. Renames the CSS file with suffix -rtl and generates -rtl.css
+ *    6. Writes Sourcemaps for -rtl.css
+ *    7. Renames the CSS files with suffix .min.css
+ *    8. Minifies the CSS file and generates -rtl.min.css
+ *    9. Injects CSS or reloads the browser via browserSync
+ */
+exports.addonStylesRTL = ( done ) => {
+	// Exit task when no addon styles
+	if ( config.addonStyles.length === 0 ) {
+		return done();
+	}
+
+	// Process each addon style
+	var tasks = config.addonStyles.map( function ( addon ) {
+
+		return	processStyleRTL(
+					gulp.src(
+							addon.styleSRC,
+							{ allowEmpty: true } ),
+							{ styleDestination: addon.styleDestination }
+						)
+						.pipe( notify( { message: '\n\n✅  ===> ADDON STYLES RTL — completed!\n', onLast: true } )
+				);
+	} );
+
+	return merge( tasks );
 };
 
 /**
@@ -353,9 +482,9 @@ exports.translate = () => {
  *
  * Watches for file changes and runs specific tasks.
  */
-exports.default = gulp.parallel( 'styles', 'vendorsJS', 'customJS', 'images', browsersync, () => {
+exports.default = gulp.parallel( 'styles', 'addonStyles', 'vendorsJS', 'customJS', 'images', browsersync, () => {
 	gulp.watch( config.watchPhp, reload ); // Reload on PHP file changes.
-	gulp.watch( config.watchStyles, gulp.parallel( 'styles' ) ); // Reload on SCSS file changes.
+	gulp.watch( config.watchStyles, gulp.parallel( 'styles', 'addonStyles' ) ); // Reload on SCSS file changes.
 	gulp.watch( config.watchJsVendor, gulp.series( 'vendorsJS', reload ) ); // Reload on vendorsJS file changes.
 	gulp.watch( config.watchJsCustom, gulp.series( 'customJS', reload ) ); // Reload on customJS file changes.
 	gulp.watch( config.imgSRC, gulp.series( 'images', reload ) ); // Reload on customJS file changes.

src/package.json

@@ -35,12 +35,16 @@
     "gulp-sourcemaps": "^2.6.2",
     "gulp-uglify": "^3.0.0",
     "gulp-uglifycss": "^1.0.6",
-    "gulp-wp-pot": "^2.0.7"
+    "gulp-wp-pot": "^2.0.7",
+    "lodash.defaults": "^4.2.0",
+    "merge-stream": "^1.0.1"
   },
   "scripts": {
     "start": "gulp",
     "styles": "gulp styles",
+    "addonStyles": "gulp addonStyles",
     "stylesRTL": "gulp stylesRTL",
+    "addonStylesRTL": "gulp addonStylesRTL",
     "vendorsJS": "gulp vendorsJS",
     "customJS": "gulp customJS",
     "images": "gulp images",

src/wpgulp.config.js

@@ -22,6 +22,11 @@ module.exports = {
 	errLogToConsole: true,
 	precision: 10,
 
+	// Add-on Style options
+	// The following list is a set of SCSS/CSS files which you want to process and place it on a different folder.
+	// Please see README.md for usage.
+	addonStyles: [],
+
 	// JS Vendor options.
 	jsVendorSRC: './assets/js/vendor/*.js', // Path to JS vendor folder.
 	jsVendorDestination: './assets/js/', // Path to place the compiled JS vendors file.