From 0376130dc415c44f26340ec4694c7d81eb2a6ecd Mon Sep 17 00:00:00 2001 From: Peter Jaraczewski Date: Tue, 11 Feb 2020 15:27:20 +0100 Subject: [PATCH] [TASK] enables processing of multiple css files - see https://github.com/ahmadawais/WPGulp/pull/125 --- README.md | 20 +++++ src/gulpfile.babel.js | 183 +++++++++++++++++++++++++++++++++++------- src/package.json | 6 +- src/wpgulp.config.js | 5 ++ 4 files changed, 186 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 2de4637..475fc1a 100644 --- a/README.md +++ b/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. + }, +], +``` + +
![Update](https://on.ahmda.ws/d0b586da13cc/c) diff --git a/src/gulpfile.babel.js b/src/gulpfile.babel.js index 8a7f1d7..bafb182 100755 --- a/src/gulpfile.babel.js +++ b/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. diff --git a/src/package.json b/src/package.json index e0aa472..41ab777 100644 --- a/src/package.json +++ b/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", diff --git a/src/wpgulp.config.js b/src/wpgulp.config.js index 3d13d26..0e319a9 100644 --- a/src/wpgulp.config.js +++ b/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.