Gulpfile.js

/**
 * Gulpfile.
 *
 * Gulp with WordPress.
 *
 * Implements:
 *      1. Live reloads browser with BrowserSync.
 *      2. CSS: Sass to CSS conversion, error catching, Autoprefixing, Sourcemaps,
 *         CSS minification, and Merge Media Queries.
 *      3. JS: Concatenates & uglifies Vendor and Custom JS files.
 *      4. Images: Minifies PNG, JPEG, GIF and SVG images.
 *      5. Watches files for changes in CSS or JS.
 *      6. Watches files for changes in PHP.
 *      7. Corrects the line endings.
 *      8. InjectCSS instead of browser page reload.
 *      9. Generates .pot file for i18n and l10n.
 *
 * @author Ahmad Awais (https://github.com/ahmadawais)
 *         Contributors: https://AhmdA.ws/WPGContributors
 * @version 1.9.3
 */

/**
 * Load Config.
 *
 * Customize your project in the config.js file
 */
const config = require( './config/project-config.js' );

/**
 * Load Package.json.
 *
 * Gives ability to reference Package definitions in this file.
 */
var pkg = require( './package.json' );

/**
 * Load Plugins.
 *
 * Load gulp plugins and passing them semantic names.
 */
var gulp = require( 'gulp' ); // Gulp of-course

// CSS related plugins.
var sass = require( 'gulp-sass' ); // Gulp pluign for Sass compilation.
var minifycss = require( 'gulp-uglifycss' ); // Minifies CSS files.
var autoprefixer = require( 'gulp-autoprefixer' ); // Autoprefixing magic.
var mmq = require( 'gulp-merge-media-queries' ); // Combine matching media queries into one media query definition.
var rtlcss = require( 'gulp-rtlcss' ); // Generates RTL stylesheet.

// JS related plugins.
var concat = require( 'gulp-concat' ); // Concatenates JS files
var uglify = require( 'gulp-uglify' ); // Minifies JS files
var babel = require( 'gulp-babel' ); // Compiles ESNext to browser compatible JS.

// Image realted plugins.
var imagemin = require( 'gulp-imagemin' ); // Minify PNG, JPEG, GIF and SVG images with imagemin.

// Utility related plugins.
var rename = require( 'gulp-rename' ); // Renames files E.g. style.css -> style.min.css
var lineec = require( 'gulp-line-ending-corrector' ); // Consistent Line Endings for non UNIX systems. Gulp Plugin for Line Ending Corrector (A utility that makes sure your files have consistent line endings)
var filter = require( 'gulp-filter' ); // Enables you to work on a subset of the original files by filtering them using globbing.
var sourcemaps = require( 'gulp-sourcemaps' ); // Maps code in a compressed file (E.g. style.css) back to it’s original position in a source file (E.g. structure.scss, which was later combined with other css files to generate style.css)
var notify = require( 'gulp-notify' ); // Sends message notification to you
var browserSync = require( 'browser-sync' ).create(); // Reloads browser and injects CSS. Time-saving synchronised browser testing.
var wpPot = require( 'gulp-wp-pot' ); // For generating the .pot file.
var sort = require( 'gulp-sort' ); // Recommended to prevent unnecessary changes in pot-file.
var cache = require( 'gulp-cache' ); // Cache files in stream for later use
var remember = require( 'gulp-remember' ); //  Adds all the files it has ever seen back into the stream
var plumber = require( 'gulp-plumber' ); // Prevent pipe breaking caused by errors from gulp plugins
var zip = require( 'gulp-zip' ); // Generate zip file from specified sources

/**
 * Task: `browser-sync`.
 *
 * Live Reloads, CSS injections, Localhost tunneling.
 *
 * This task does the following:
 *    1. Sets the project URL
 *    2. Sets inject CSS
 *    3. You may define a custom port
 *    4. You may want to stop the browser from openning automatically
 */
function browsersync() {
	browserSync.init({

		// For more options
		// @link http://www.browsersync.io/docs/options/

		// Project URL.
		proxy: config.projectURL,
		// Use a specific port (instead of the one auto-detected by Browsersync).
		port: 8000,

		// `true` Automatically open the browser with BrowserSync live server.
		// `false` Stop the browser from automatically opening.
		open: config.browserAutoOpen,

		// Inject CSS changes.
		// Comment it to reload browser for every CSS change.
		injectChanges: config.injectChanges,

		https: {
		    key:
		        '/Users/cdils' +
		        '/.valet/Certificates/' +
		        'updev.test.key',
		    cert:
		        '/Users/cdils' +
		        '/.valet/Certificates/' +
		        'updev.test.crt'
		}
	});


}

// Helper function to allow browser reload with Gulp 4
function reload( done ) {
	browserSync.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
 *    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', function() {
	return gulp
		.src( config.styleSRC )
		.pipe( sourcemaps.init() )
		.pipe(
			sass({
				includePaths: './node_modules/',
				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( config.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( filter( '**/*.css' ) ) // Filtering stream to only css files
		.pipe( browserSync.stream() ) // Reloads style.min.css if that is enqueued.
		.pipe( notify({ message: 'TASK: "styles" Completed! 💯', onLast: true }) );
});

/**
 * 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', function() {
	return gulp
		.src( config.styleSRC )
		.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: 'TASK: "stylesRTL" Completed! 💯', onLast: true }) );
});

/**
 * Task: `vendorsJS`.
 *
 * Concatenate and uglify vendor JS scripts.
 *
 * This task does the following:
 *     1. Gets the source folder for JS vendor files
 *     2. Concatenates all the files and generates vendors.js
 *     3. Renames the JS file with suffix .min.js
 *     4. Uglifes/Minifies the JS file and generates vendors.min.js
 */
gulp.task( 'vendorsJS', function() {
	return gulp
		.src( config.jsVendorSRC, { since: gulp.lastRun( 'vendorsJS' ) }) // Only run on changed files.
		.pipe(
			plumber({
				errorHandler: function( err ) {
					notify.onError( 'Error: <%= error.message %>' )( err );
					this.emit( 'end' ); // End stream if error is found
				}
			})
		)
		.pipe(
			babel({
				presets: [
					[
						'env', // Preset which compiles ES6 to ES5.
						{
							targets: { browsers: config.BROWSERS_LIST } // Target browser list to support.
						}
					]
				]
			})
		)
		.pipe( remember( 'vendorsJS' ) ) // Bring all files back to stream
		.pipe( concat( config.jsVendorFile + '.js' ) )
		.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
		.pipe( gulp.dest( config.jsVendorDestination ) )
		.pipe(
			rename({
				basename: config.jsVendorFile,
				suffix: '.min'
			})
		)
		.pipe( uglify() )
		.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
		.pipe( gulp.dest( config.jsVendorDestination ) )
		.pipe( notify({ message: 'TASK: "vendorsJS" Completed! 💯', onLast: true }) );
});

/**
 * Task: `customJS`.
 *
 * Concatenate and uglify custom JS scripts.
 *
 * This task does the following:
 *     1. Gets the source folder for JS custom files
 *     2. Concatenates all the files and generates custom.js
 *     3. Renames the JS file with suffix .min.js
 *     4. Uglifes/Minifies the JS file and generates custom.min.js
 */
gulp.task( 'customJS', function() {
	return gulp
		.src( config.jsCustomSRC, { since: gulp.lastRun( 'customJS' ) }) // Only run on changed files.
		.pipe(
			plumber({
				errorHandler: function( err ) {
					notify.onError( 'Error: <%= error.message %>' )( err );
					this.emit( 'end' ); // End stream if error is found
				}
			})
		)
		.pipe(
			babel({
				presets: [
					[
						'env', // Preset which compiles ES6 to ES5.
						{
							targets: { browsers: config.BROWSERS_LIST } // Target browser list to support.
						}
					]
				]
			})
		)
		.pipe( remember( 'customJS' ) ) // Bring all files back to stream
		// .pipe( concat( config.jsCustomFile + '.js' ) )
		// .pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
		// .pipe( gulp.dest( config.jsCustomDestination ) )
		.pipe( rename( { suffix: '.min' } ) )
		.pipe( uglify() )
		.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
		.pipe( gulp.dest( config.jsCustomDestination ) )
		.pipe( notify({ message: 'TASK: "customJS" Completed! 💯', onLast: true }) );
});

/**
 * Task: `images`.
 *
 * Minifies PNG, JPEG, GIF and SVG images.
 *
 * This task does the following:
 *     1. Gets the source of images raw folder
 *     2. Minifies PNG, JPEG, GIF and SVG images
 *     3. Generates and saves the optimized images
 *
 * This task will run only once, if you want to run it
 * again, do it with the command `gulp images`.
 *
 * Read the following to change these options.
 * @link https://github.com/sindresorhus/gulp-imagemin
 */
gulp.task( 'images', function() {
	return gulp
		.src( config.imgSRC )
		.pipe(
			cache(
				imagemin([
					imagemin.gifsicle({ interlaced: true }),
					imagemin.jpegtran({ progressive: true }),
					imagemin.optipng({ optimizationLevel: 3 }), // 0-7 low-high.
					imagemin.svgo({
						plugins: [ { removeViewBox: true }, { cleanupIDs: false } ]
					})
				])
			)
		)
		.pipe( gulp.dest( config.imgDST ) )
		.pipe( notify({ message: 'TASK: "images" Completed! 💯', onLast: true }) );
});

/**
 * Task: `clear-images-cache`.
 *
 * Deletes the images cache. By running the next "images" task,
 * each image will be regenerated.
 */
gulp.task( 'clearCache', function( done ) {
	return cache.clearAll( done );
});

/**
 * WP POT Translation File Generator.
 *
 * * This task does the following:
 *     1. Gets the source of all the PHP files
 *     2. Sort files in stream by path or any custom sort comparator
 *     3. Applies wpPot with the variable set at the top of this file
 *     4. Generate a .pot file of i18n that can be used for l10n to build .mo file
 */
gulp.task( 'translate', function() {
	return gulp
		.src( config.projectPHPWatchFiles )
		.pipe( sort() )
		.pipe(
			wpPot({
				domain: config.textDomain,
				package: config.packageName,
				bugReport: config.bugReport,
				lastTranslator: config.lastTranslator,
				team: config.team
			})
		)
		.pipe(
			gulp.dest( config.translationDestination + '/' + config.translationFile )
		)
		.pipe(
			notify({
				message: 'TASK: "translate" Completed! 💯',
				onLast: true
			})
		);
});

/**
 * Generate Zip file for the base version of the theme
 *
 * * This task does the following:
 *     1. Gets the source of all the files we want to zip.
 *     2. Generates Zip file in the 'dist' directory.
 */
gulp.task( 'zipuser', function() {
	return gulp
		.src( [
				'images/*',
				'includes/**/*',
				'vendor-includes/**/*',
				'js/*',
				'languages/*',
				'front-page.php',
				'functions.php',
				'LICENSE.md',
				'page_landing.php',
				'readme.txt',
				'screenshot.png',
				'style*'
				], { base: './' }
		)
		.pipe( zip( pkg.name + '-' + pkg.version + '.zip' ) )
		.pipe( gulp.dest( 'dist' ) );
});

/**
 * Generate Zip file for developer version of the theme
 *
 * * This task does the following:
 *     1. Gets the source of all the files we want to zip.
 *     2. Generates Zip file in the 'dist' directory.
 */
gulp.task( 'zipdev', function() {
	return gulp
		.src( [
				'develop/assets/images/*',
				'develop/assets/js/*',
				'develop/assets/scss/**/*',
				'develop/languages/*',
				'images/*',
				'includes/**/*',
				'includes-vendors/**/*',
				'js/*',
				'languages/*',
				'CHANGELOG.md',
				'composer.json',
				'composer.lock',
				'front-page.php',
				'functions.php',
				'Gulpfile.js',
				'LICENSE.md',
				'package.json',
				'page_landing.php',
				'readme.txt',
				'README.md',
				'screenshot.png',
				'style*'
				], { base: './' }
			)
		.pipe( zip( pkg.name + '-developer-' + pkg.version + '.zip' ) )
		.pipe( gulp.dest( 'dist' ) );
});

// ]
/**
 * Watch Tasks.
 *
 * Watches for file changes and runs specific tasks.
 */
gulp.task(
	'default',
	gulp.parallel(
		'styles',
		//'vendorsJS',
		'customJS',
		'images',
		browsersync,
		function watchFiles() {
			gulp.watch( config.projectPHPWatchFiles, reload ); // Reload on PHP file changes.
			gulp.watch( config.styleWatchFiles, gulp.parallel( 'styles' ) ); // Reload on SCSS file changes.
			gulp.watch( config.vendorJSWatchFiles, gulp.series( 'vendorsJS', reload ) ); // Reload on vendorsJS file changes.
			gulp.watch( config.customJSWatchFiles, gulp.series( 'customJS', reload ) ); // Reload on customJS file changes.
			gulp.watch( config.imgSRC, gulp.series( 'images', reload ) ); // Reload on customJS file changes.
		}
	)
);