From 670cd0fb6fc4fc32aed6d77cee0d9e19b89338ce Mon Sep 17 00:00:00 2001 From: envirra Date: Sat, 13 Oct 2018 17:19:17 +0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A6=20NEW:=20Compile=20multiple=20CSS?= =?UTF-8?q?=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.