📦 NEW: Compile multiple CSS files into different directories

README.md

@@ -15,7 +15,7 @@
  <tr>
  <td align='left' width='100%' colspan='2'>
  <strong>WPGulp (WordPress Gulp)</strong><br />
- 🎯 An advanced & extensively documented Gulp WordPress workflow. Kick start a build-workflow for your WordPress plugins and themes with Gulp.
+ 🎯 An advanced & extensively documented Gulp WordPress workflow. Kick-start a build-workflow for your WordPress plugins and themes with Gulp.
  </td>
  </tr>
  <tr>
@@ -34,7 +34,7 @@
 
 ## 📦 WPGulp Can Do `THAT™`
 
-`WPGulp` is an advanced & extensively documented `Gulp.js` + `WordPress` workflow. It can help you kick start a build-workflow for your WordPress plugins and themes with `Gulp.js`, save you a lot of grunt work time, follow the DRY (Don't Repeat Yourself) principle, and `#0CJS` Zero-config JavaScript startup but still configurable via `wpgulp.config.js` file. It is:
+`WPGulp` is an advanced & extensively documented `Gulp.js` + `WordPress` workflow. It can help you kick-start a build-workflow for your WordPress plugins and themes with `Gulp.js`, save you a lot of grunt work time, follow the DRY (Don't Repeat Yourself) principle, and `#0CJS` Zero-config JavaScript startup but still configurable via `wpgulp.config.js` file. It is:
 
 - 🥞 Versioned ✓
 - 🤠 Updatable ✓
@@ -157,7 +157,7 @@ npm start
 To optimize images and generate WP POT translation file, or generate a RTL stylesheet you can run the following commands
 
 ```sh
-# To optimize images
+# To optimize images.
 gulp images
 
 # To generate WP POT translation file.
@@ -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

@@ -61,6 +61,8 @@ 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 merge = require( 'merge-stream' );
+const defaults = require('lodash.defaults');
 
 /**
  * Custom Error Handler.
@@ -99,11 +101,7 @@ const reload = done => {
 };
 
 /**
- * Task: `styles`.
- *
- * Compiles Sass, Autoprefixes it and Minifies CSS.
- *
- * 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 +110,12 @@ const reload = done => {
  * 6. Minifies the CSS file and generates style.min.css
  * 7. Injects CSS or reloads the browser via browserSync
  */
-gulp.task( '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 +131,21 @@ gulp.task( '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`.
- *
- * 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 +155,12 @@ gulp.task( 'styles', () => {
  * 8. Minifies the CSS file and generates style-rtl.min.css
  * 9. Injects CSS or reloads the browser via browserSync
  */
-gulp.task( '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 +177,129 @@ gulp.task( '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 .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
+ */
+gulp.task( '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
+ */
+gulp.task( '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
+ */
+gulp.task( '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
+ */
+gulp.task( '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 );
 });
 
 /**
@@ -355,9 +466,9 @@ gulp.task( 'translate', () => {
  */
 gulp.task(
  'default',
- gulp.parallel( 'styles', 'vendorsJS', 'customJS', 'images', browsersync, () => {
+ 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.