From b3407c3cca717c16e38f8a8afdd589ac1058dcbf Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Mon, 1 Oct 2018 11:21:04 +0500 Subject: [PATCH 1/5] IMPROVE: Docs Syntax IMPROVE: Docs Syntax --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 845416e..f1a3860 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ WPGulp (WordPress Gulp)
- 🎯 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. @@ -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 βœ“ From 63627a670a6c66e3c92b0fc2cfeb81767b854503 Mon Sep 17 00:00:00 2001 From: Saqib Ameen <31374163+saqibameen@users.noreply.github.com> Date: Wed, 10 Oct 2018 03:57:35 -0500 Subject: [PATCH 2/5] =?UTF-8?q?=20=E2=9C=8C=EF=B8=8FIMPROVE:=20Readme=20gr?= =?UTF-8?q?ammar.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add full stop at the end of the line. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f1a3860..ce771da 100644 --- a/README.md +++ b/README.md @@ -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. From 670cd0fb6fc4fc32aed6d77cee0d9e19b89338ce Mon Sep 17 00:00:00 2001 From: envirra Date: Sat, 13 Oct 2018 17:19:17 +0700 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=93=A6=20NEW:=20Compile=20multiple=20?= =?UTF-8?q?CSS=20files=20into=20different=20directories?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refer to #103 --- src/gulpfile.babel.js | 120 +++++++++++++++++++++++++++++++++++++++++- src/package.json | 5 +- src/wpgulp.config.js | 9 ++++ 3 files changed, 132 insertions(+), 2 deletions(-) diff --git a/src/gulpfile.babel.js b/src/gulpfile.babel.js index 7b11771..0ee05cb 100755 --- a/src/gulpfile.babel.js +++ b/src/gulpfile.babel.js @@ -61,6 +61,7 @@ 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' ); /** * Custom Error Handler. @@ -143,6 +144,63 @@ gulp.task( 'styles', () => { .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 gulp + .src( addon.styleSRC, { allowEmpty: true }) + .pipe( plumber( errorHandler ) ) + .pipe( sourcemaps.init() ) + .pipe( + sass({ + errLogToConsole: config.errLogToConsole, + outputStyle: config.outputStyle, + precision: config.precision + }) + ) + .on( 'error', sass.logError ) + .pipe( sourcemaps.write({ includeContent: false }) ) + .pipe( sourcemaps.init({ loadMaps: true }) ) + .pipe( autoprefixer( config.BROWSERS_LIST ) ) + .pipe( sourcemaps.write( './' ) ) + .pipe( lineec() ) // Consistent Line Endings for non UNIX systems. + .pipe( gulp.dest( addon.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 CSS file if that is enqueued. + .pipe( rename({ suffix: '.min' }) ) + .pipe( minifycss({ maxLineLen: 10 }) ) + .pipe( lineec() ) // Consistent Line Endings for non UNIX systems. + .pipe( gulp.dest( addon.styleDestination ) ) + .pipe( filter( '**/*.css' ) ) // Filtering stream to only css files. + .pipe( browserSync.stream() ) // Reloads .min.css if that is enqueued. + .pipe( notify({ message: '\n\nβœ… ===> ADDON STYLES β€” completed!\n', onLast: true }) ); + + } ); + + return merge( tasks ); +}); + /** * Task: `stylesRTL`. * @@ -191,6 +249,66 @@ gulp.task( 'stylesRTL', () => { .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 gulp + .src( addon.styleSRC, { allowEmpty: true }) + .pipe( plumber( errorHandler ) ) + .pipe( sourcemaps.init() ) + .pipe( + sass({ + errLogToConsole: config.errLogToConsole, + outputStyle: config.outputStyle, + precision: config.precision + }) + ) + .on( 'error', sass.logError ) + .pipe( sourcemaps.write({ includeContent: false }) ) + .pipe( sourcemaps.init({ loadMaps: true }) ) + .pipe( autoprefixer( config.BROWSERS_LIST ) ) + .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 -rtl.css. + .pipe( gulp.dest( addon.styleDestination ) ) + .pipe( filter( '**/*.css' ) ) // Filtering stream to only css files. + .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( addon.styleDestination ) ) + .pipe( filter( '**/*.css' ) ) // Filtering stream to only css files. + .pipe( browserSync.stream() ) // Reloads .css or -rtl.css, if that is enqueued. + .pipe( notify({ message: '\n\nβœ… ===> ADDON STYLES RTL β€” completed!\n', onLast: true }) ); + + } ); + + return merge( tasks ); +}); + /** * Task: `vendorsJS`. * @@ -357,7 +475,7 @@ gulp.task( 'default', gulp.parallel( 'styles', '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 0720fe6..7088b9e 100644 --- a/src/package.json +++ b/src/package.json @@ -35,12 +35,15 @@ "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", + "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 2e4a363..6a780a7 100644 --- a/src/wpgulp.config.js +++ b/src/wpgulp.config.js @@ -22,6 +22,15 @@ 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. + addonStyles: [ + { + styleSRC: './assets/css/addon.scss', // Path to .scss file. + styleDestination: './', // Path to place the compiled CSS file. Default set to root folder. + }, + ], + // JS Vendor options. jsVendorSRC: './assets/js/vendor/*.js', // Path to JS vendor folder. jsVendorDestination: './assets/js/', // Path to place the compiled JS vendors file. From b2cd62785f38f4ca891cb1d378f87fe59a0cf2e0 Mon Sep 17 00:00:00 2001 From: envirra Date: Sat, 13 Oct 2018 23:13:03 +0700 Subject: [PATCH 4/5] Improve code 1. New function processStyle() for process any selected SCSS files with RTL option. 2. Remove example of addonStyles from configuration file and add description in README.md --- README.md | 16 +++++ src/gulpfile.babel.js | 163 +++++++++++++++--------------------------- src/package.json | 2 + src/wpgulp.config.js | 8 +-- 4 files changed, 78 insertions(+), 111 deletions(-) diff --git a/README.md b/README.md index ce771da..0afbd84 100644 --- a/README.md +++ b/README.md @@ -139,6 +139,22 @@ Configure the project paths and other variables inside the `wpgulp.config.js` fi ![wpgulp config](https://on.ahmda.ws/f2ca9bb4a740/c) +#### Add-on Styles Option + +This option is allow you to add more SCSS files for compilation to a different destination folder. Here is an example + +```javascript +addonStyles: [ + { + styleSRC: './assets/css/addon-1.scss', // Path to .scss file. + styleDestination: './', // Path to place the compiled CSS file. Default set to root folder. + }, + { + styleSRC: './assets/css/addon-2.scss', // Path to .scss file. + styleDestination: './foo/bar/', // Path to place the compiled CSS file. Set to some folder. + }, +], +``` ### β†’ `STEP #3` β€” Start your project diff --git a/src/gulpfile.babel.js b/src/gulpfile.babel.js index 0ee05cb..babcc36 100755 --- a/src/gulpfile.babel.js +++ b/src/gulpfile.babel.js @@ -62,6 +62,8 @@ const remember = require( 'gulp-remember' ); // Adds all the files it has ever const plumber = require( 'gulp-plumber' ); // Prevent pipe breaking caused by errors from gulp plugins. const beep = require( 'beepbeep' ); const merge = require( 'merge-stream' ); +const gulpif = require('gulp-if'); +const defaults = require('lodash.defaults'); /** * Custom Error Handler. @@ -100,22 +102,22 @@ const reload = done => { }; /** - * 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 + * This function does the following: + * 1. Compiles Sass to CSS + * 2. Writes Sourcemaps for it + * 3. Autoprefixes it and generates .css + * 4. Renames the CSS file with suffix -rtl and generates -rtl.css * 5. Renames the CSS file with suffix .min.css - * 6. Minifies the CSS file and generates style.min.css + * 6. Minifies the CSS file and generates .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, { + isRTL: false, + styleDestination: './', + } ); + + return gulpStream .pipe( plumber( errorHandler ) ) .pipe( sourcemaps.init() ) .pipe( @@ -129,19 +131,42 @@ gulp.task( 'styles', () => { .pipe( sourcemaps.write({ includeContent: false }) ) .pipe( sourcemaps.init({ loadMaps: true }) ) .pipe( autoprefixer( config.BROWSERS_LIST ) ) - .pipe( sourcemaps.write( './' ) ) + .pipe( gulpif( ! processOptions.isRTL, sourcemaps.write( './' ) ) ) // Write source map at this step if not RTL. .pipe( lineec() ) // Consistent Line Endings for non UNIX systems. - .pipe( gulp.dest( config.styleDestination ) ) + .pipe( gulpif( processOptions.isRTL, rename({ suffix: '-rtl' }) ) ) // Append "-rtl" to the filename. + .pipe( gulpif( processOptions.isRTL, rtlcss() ) ) // Convert to RTL. + .pipe( gulpif( processOptions.isRTL, sourcemaps.write( './' ) ) ) // Write source map at this step if RTL. + .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( 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 }) ); + ; +} + +/** + * 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 }) + ).pipe( notify({ message: '\n\nβœ… ===> STYLES β€” completed!\n', onLast: true }) ); }); /** @@ -167,34 +192,10 @@ gulp.task( 'addonStyles', ( done ) => { // Process each addon style var tasks = config.addonStyles.map( function ( addon ) { - return gulp - .src( addon.styleSRC, { allowEmpty: true }) - .pipe( plumber( errorHandler ) ) - .pipe( sourcemaps.init() ) - .pipe( - sass({ - errLogToConsole: config.errLogToConsole, - outputStyle: config.outputStyle, - precision: config.precision - }) - ) - .on( 'error', sass.logError ) - .pipe( sourcemaps.write({ includeContent: false }) ) - .pipe( sourcemaps.init({ loadMaps: true }) ) - .pipe( autoprefixer( config.BROWSERS_LIST ) ) - .pipe( sourcemaps.write( './' ) ) - .pipe( lineec() ) // Consistent Line Endings for non UNIX systems. - .pipe( gulp.dest( addon.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 CSS file if that is enqueued. - .pipe( rename({ suffix: '.min' }) ) - .pipe( minifycss({ maxLineLen: 10 }) ) - .pipe( lineec() ) // Consistent Line Endings for non UNIX systems. - .pipe( gulp.dest( addon.styleDestination ) ) - .pipe( filter( '**/*.css' ) ) // Filtering stream to only css files. - .pipe( browserSync.stream() ) // Reloads .min.css if that is enqueued. - .pipe( notify({ message: '\n\nβœ… ===> ADDON STYLES β€” completed!\n', onLast: true }) ); + return processStyle( + gulp.src( addon.styleSRC, { allowEmpty: true }), + { styleDestination: addon.styleDestination } + ).pipe( notify({ message: '\n\nβœ… ===> ADDON STYLES β€” completed!\n', onLast: true }) ); } ); @@ -217,36 +218,11 @@ gulp.task( 'addonStyles', ( done ) => { * 9. Injects CSS or reloads the browser via browserSync */ gulp.task( 'stylesRTL', () => { - return gulp - .src( config.styleSRC, { allowEmpty: true }) - .pipe( plumber( errorHandler ) ) - .pipe( sourcemaps.init() ) - .pipe( - sass({ - errLogToConsole: config.errLogToConsole, - outputStyle: config.outputStyle, - precision: config.precision - }) - ) - .on( 'error', sass.logError ) - .pipe( sourcemaps.write({ includeContent: false }) ) - .pipe( sourcemaps.init({ loadMaps: true }) ) - .pipe( autoprefixer( config.BROWSERS_LIST ) ) - .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( filter( '**/*.css' ) ) // Filtering stream to only css files. - .pipe( browserSync.stream() ) // Reloads style.css or style-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( 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 }) ); + return processStyle( + gulp.src( config.styleSRC, { allowEmpty: true }), + { isRTL: true } + ).pipe( notify({ message: '\n\nβœ… ===> STYLES RTL β€” completed!\n', onLast: true }) ); + }); /** @@ -273,36 +249,13 @@ gulp.task( 'addonStylesRTL', ( done ) => { // Process each addon style var tasks = config.addonStyles.map( function ( addon ) { - return gulp - .src( addon.styleSRC, { allowEmpty: true }) - .pipe( plumber( errorHandler ) ) - .pipe( sourcemaps.init() ) - .pipe( - sass({ - errLogToConsole: config.errLogToConsole, - outputStyle: config.outputStyle, - precision: config.precision - }) - ) - .on( 'error', sass.logError ) - .pipe( sourcemaps.write({ includeContent: false }) ) - .pipe( sourcemaps.init({ loadMaps: true }) ) - .pipe( autoprefixer( config.BROWSERS_LIST ) ) - .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 -rtl.css. - .pipe( gulp.dest( addon.styleDestination ) ) - .pipe( filter( '**/*.css' ) ) // Filtering stream to only css files. - .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( addon.styleDestination ) ) - .pipe( filter( '**/*.css' ) ) // Filtering stream to only css files. - .pipe( browserSync.stream() ) // Reloads .css or -rtl.css, if that is enqueued. - .pipe( notify({ message: '\n\nβœ… ===> ADDON STYLES RTL β€” completed!\n', onLast: true }) ); + return processStyle( + gulp.src( addon.styleSRC, { allowEmpty: true }), + { + styleDestination: addon.styleDestination, + isRTL: true, + } + ).pipe( notify({ message: '\n\nβœ… ===> ADDON STYLES RTL β€” completed!\n', onLast: true }) ); } ); diff --git a/src/package.json b/src/package.json index 7088b9e..9eacd08 100644 --- a/src/package.json +++ b/src/package.json @@ -22,6 +22,7 @@ "gulp-cache": "^1.0.2", "gulp-concat": "^2.5.2", "gulp-filter": "^5.1.0", + "gulp-if": "^2.0.2", "gulp-imagemin": "^4.1.0", "gulp-line-ending-corrector": "^1.0.1", "gulp-merge-media-queries": "^0.2.1", @@ -36,6 +37,7 @@ "gulp-uglify": "^3.0.0", "gulp-uglifycss": "^1.0.6", "gulp-wp-pot": "^2.0.7", + "lodash.defaults": "^4.2.0", "merge-stream": "^1.0.1" }, "scripts": { diff --git a/src/wpgulp.config.js b/src/wpgulp.config.js index 6a780a7..3c3b00f 100644 --- a/src/wpgulp.config.js +++ b/src/wpgulp.config.js @@ -24,12 +24,8 @@ module.exports = { // 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. - addonStyles: [ - { - styleSRC: './assets/css/addon.scss', // Path to .scss file. - styleDestination: './', // Path to place the compiled CSS file. Default set to root folder. - }, - ], + // Please see README.md for usage. + addonStyles: [], // JS Vendor options. jsVendorSRC: './assets/js/vendor/*.js', // Path to JS vendor folder. From 1091db068ec7e196fc2e23531c6f94a922a749cd Mon Sep 17 00:00:00 2001 From: envirra Date: Wed, 17 Oct 2018 11:07:15 +0700 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20Add-on=20style=20?= =?UTF-8?q?option?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 36 ++++++++++-------- src/gulpfile.babel.js | 86 +++++++++++++++++++++++++++++++------------ src/package.json | 1 - 3 files changed, 83 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 0afbd84..51e61fd 100644 --- a/README.md +++ b/README.md @@ -139,22 +139,6 @@ Configure the project paths and other variables inside the `wpgulp.config.js` fi ![wpgulp config](https://on.ahmda.ws/f2ca9bb4a740/c) -#### Add-on Styles Option - -This option is allow you to add more SCSS files for compilation to a different destination folder. Here is an example - -```javascript -addonStyles: [ - { - styleSRC: './assets/css/addon-1.scss', // Path to .scss file. - styleDestination: './', // Path to place the compiled CSS file. Default set to root folder. - }, - { - styleSRC: './assets/css/addon-2.scss', // Path to .scss file. - styleDestination: './foo/bar/', // Path to place the compiled CSS file. Set to some folder. - }, -], -``` ### β†’ `STEP #3` β€” Start your project @@ -183,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 babcc36..382cc6a 100755 --- a/src/gulpfile.babel.js +++ b/src/gulpfile.babel.js @@ -62,7 +62,6 @@ const remember = require( 'gulp-remember' ); // Adds all the files it has ever const plumber = require( 'gulp-plumber' ); // Prevent pipe breaking caused by errors from gulp plugins. const beep = require( 'beepbeep' ); const merge = require( 'merge-stream' ); -const gulpif = require('gulp-if'); const defaults = require('lodash.defaults'); /** @@ -103,18 +102,62 @@ const reload = done => { /** * This function does the following: - * 1. Compiles Sass to CSS - * 2. Writes Sourcemaps for it - * 3. Autoprefixes it and generates .css - * 4. Renames the CSS file with suffix -rtl and generates -rtl.css + * 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 .min.css + * 6. Minifies the CSS file and generates style.min.css * 7. Injects CSS or reloads the browser via browserSync */ function processStyle( gulpStream, processOptions = {} ) { processOptions = defaults( processOptions, { - isRTL: false, - styleDestination: './', + styleDestination: config.styleDestination, + } ); + + return gulpStream + .pipe( plumber( errorHandler ) ) + .pipe( sourcemaps.init() ) + .pipe( + sass({ + errLogToConsole: config.errLogToConsole, + outputStyle: config.outputStyle, + precision: config.precision + }) + ) + .on( 'error', sass.logError ) + .pipe( sourcemaps.write({ includeContent: false }) ) + .pipe( sourcemaps.init({ loadMaps: true }) ) + .pipe( autoprefixer( config.BROWSERS_LIST ) ) + .pipe( sourcemaps.write( './' ) ) + .pipe( lineec() ) // Consistent Line Endings for non UNIX systems. + .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 .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( processOptions.styleDestination ) ) + .pipe( filter( '**/*.css' ) ) // Filtering stream to only css files. + .pipe( browserSync.stream() ) // Reloads .min.css if that is enqueued. + ; +} + +/** + * This function 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 + */ +function processStyleRTL( gulpStream, processOptions = {} ) { + processOptions = defaults( processOptions, { + styleDestination: config.styleDestination, } ); return gulpStream @@ -131,21 +174,20 @@ function processStyle( gulpStream, processOptions = {} ) { .pipe( sourcemaps.write({ includeContent: false }) ) .pipe( sourcemaps.init({ loadMaps: true }) ) .pipe( autoprefixer( config.BROWSERS_LIST ) ) - .pipe( gulpif( ! processOptions.isRTL, sourcemaps.write( './' ) ) ) // Write source map at this step if not RTL. .pipe( lineec() ) // Consistent Line Endings for non UNIX systems. - .pipe( gulpif( processOptions.isRTL, rename({ suffix: '-rtl' }) ) ) // Append "-rtl" to the filename. - .pipe( gulpif( processOptions.isRTL, rtlcss() ) ) // Convert to RTL. - .pipe( gulpif( processOptions.isRTL, sourcemaps.write( './' ) ) ) // Write source map at this step if RTL. + .pipe( rename({ suffix: '-rtl' }) ) // Append "-rtl" to the filename. + .pipe( rtlcss() ) // Convert to RTL. + .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 .css or -rtl.css, if that is enqueued. .pipe( mmq({ log: true }) ) // Merge Media Queries only for .min.css version. - .pipe( browserSync.stream() ) // Reloads style.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( processOptions.styleDestination ) ) .pipe( filter( '**/*.css' ) ) // Filtering stream to only css files. - .pipe( browserSync.stream() ) // Reloads style.min.css if that is enqueued. + .pipe( browserSync.stream() ) // Reloads .css or -rtl.css, if that is enqueued. ; } @@ -165,7 +207,8 @@ function processStyle( gulpStream, processOptions = {} ) { */ gulp.task( 'styles', () => { return processStyle( - gulp.src( config.styleSRC, { allowEmpty: true }) + gulp.src( config.styleSRC, { allowEmpty: true }), + { styleDestination: config.styleDestination } ).pipe( notify({ message: '\n\nβœ… ===> STYLES β€” completed!\n', onLast: true }) ); }); @@ -218,9 +261,9 @@ gulp.task( 'addonStyles', ( done ) => { * 9. Injects CSS or reloads the browser via browserSync */ gulp.task( 'stylesRTL', () => { - return processStyle( + return processStyleRTL( gulp.src( config.styleSRC, { allowEmpty: true }), - { isRTL: true } + { styleDestination: config.styleDestination } ).pipe( notify({ message: '\n\nβœ… ===> STYLES RTL β€” completed!\n', onLast: true }) ); }); @@ -249,12 +292,9 @@ gulp.task( 'addonStylesRTL', ( done ) => { // Process each addon style var tasks = config.addonStyles.map( function ( addon ) { - return processStyle( + return processStyleRTL( gulp.src( addon.styleSRC, { allowEmpty: true }), - { - styleDestination: addon.styleDestination, - isRTL: true, - } + { styleDestination: addon.styleDestination } ).pipe( notify({ message: '\n\nβœ… ===> ADDON STYLES RTL β€” completed!\n', onLast: true }) ); } ); @@ -426,7 +466,7 @@ 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', 'addonStyles' ) ); // Reload on SCSS file changes. gulp.watch( config.watchJsVendor, gulp.series( 'vendorsJS', reload ) ); // Reload on vendorsJS file changes. diff --git a/src/package.json b/src/package.json index 9eacd08..821e7bc 100644 --- a/src/package.json +++ b/src/package.json @@ -22,7 +22,6 @@ "gulp-cache": "^1.0.2", "gulp-concat": "^2.5.2", "gulp-filter": "^5.1.0", - "gulp-if": "^2.0.2", "gulp-imagemin": "^4.1.0", "gulp-line-ending-corrector": "^1.0.1", "gulp-merge-media-queries": "^0.2.1",