//process.env.DISABLE_NOTIFIER = true; // Disable all notifications. /** * Business Pro. * * This file adds gulp tasks to the Business Pro theme. * * @author Seo themes */ // Require our dependencies. var autoprefixer = require( 'autoprefixer' ), browsersync = require( 'browser-sync' ), mqpacker = require( 'css-mqpacker' ), fs = require( 'fs' ), gulp = require( 'gulp' ), beautify = require( 'gulp-cssbeautify' ), cache = require( 'gulp-cached' ), cleancss = require( 'gulp-clean-css' ), cssnano = require( 'gulp-cssnano' ), filter = require( 'gulp-filter' ), imagemin = require( 'gulp-imagemin' ), notify = require( 'gulp-notify' ), pixrem = require( 'gulp-pixrem' ), plumber = require( 'gulp-plumber' ), postcss = require( 'gulp-postcss' ), rename = require( 'gulp-rename' ), replace = require( 'gulp-replace' ), s3 = require( 'gulp-s3-publish' ), sass = require( 'gulp-sass' ), sort = require( 'gulp-sort' ), sourcemaps = require( 'gulp-sourcemaps' ), uglify = require( 'gulp-uglify' ), wpPot = require( 'gulp-wp-pot' ), zip = require( 'gulp-zip' ); // Set assets paths. var paths = { concat: [ 'assets/scripts/menus.js', 'assets/scripts/superfish.js' ], images: [ 'assets/images/*', '!assets/images/*.svg' ], php: [ './*.php', './**/*.php', './**/**/*.php' ], scripts: [ 'assets/scripts/*.js', '!assets/scripts/min/' ], styles: [ 'assets/styles/*.scss', '!assets/styles/min/' ] }; // CSS formatting. var format = { breaks: { afterAtRule: true, afterBlockBegins: true, afterBlockEnds: true, afterComment: true, afterProperty: true, afterRuleBegins: true, afterRuleEnds: true, beforeBlockEnds: true, betweenSelectors: true }, indentBy: 1, indentWith: 'tab', spaces: { aroundSelectorRelation: true, beforeBlockBegins: true, beforeValue: true }, wrapAt: false } /** * Autoprefixed browser support. * * https://github.com/ai/browserslist */ const AUTOPREFIXER_BROWSERS = [ 'last 2 versions', '> 0.25%', 'ie >= 8', 'ie_mob >= 9', 'ff >= 28', 'chrome >= 40', 'safari >= 6', 'opera >= 22', 'ios >= 6', 'android >= 4', 'bb >= 9' ]; /** * Compile Sass. * * https://www.npmjs.com/package/gulp-sass */ gulp.task( 'styles', function () { /** * Process WooCommerce styles. */ gulp.src( 'assets/styles/woocommerce.scss' ) // Notify on error .pipe( plumber( { errorHandler: notify.onError( "Error: <%= error.message %>" ) } ) ) // Process sass .pipe( sass( { outputStyle: 'expanded' } ) ) // Pixel fallbacks for rem units. .pipe( pixrem() ) // Parse with PostCSS plugins. .pipe( postcss( [ autoprefixer( { browsers: AUTOPREFIXER_BROWSERS } ), mqpacker( { sort: true } ), ] ) ) // Combine similar rules. .pipe ( cleancss( { level: { 2: { all: true } } } ) ) // Minify and optimize style.css again. .pipe( cssnano( { safe: false, discardComments: { removeAll: true, }, } ) ) // Add .min suffix. .pipe( rename( { suffix: '.min' } ) ) // Output non minified css to theme directory. .pipe( gulp.dest( 'assets/styles/min/' ) ) /** * Process main stylesheet. */ gulp.src( 'assets/styles/style.scss' ) // Notify on error .pipe( plumber( { errorHandler: notify.onError( "Error: <%= error.message %>" ) } ) ) // Source maps init .pipe( sourcemaps.init() ) // Process sass .pipe( sass( { outputStyle: 'expanded' } ) ) // Pixel fallbacks for rem units. .pipe( pixrem() ) // Parse with PostCSS plugins. .pipe( postcss( [ autoprefixer( { browsers: AUTOPREFIXER_BROWSERS } ), mqpacker( { sort: true } ), ] ) ) // Format non-minified stylesheet. .pipe ( cleancss( { format: format } ) ) // Output non minified css to theme directory. .pipe( gulp.dest( './' ) ) // Inject changes via browsersync. .pipe( browsersync.reload( { stream: true } ) ) // Process sass again. .pipe( sass( { outputStyle: 'compressed' } ) ) // Combine similar rules. .pipe ( cleancss( { level: { 2: { all: true } } } ) ) // Minify and optimize style.css again. .pipe( cssnano( { safe: false, discardComments: { removeAll: true, }, } ) ) // Add .min suffix. .pipe( rename( { suffix: '.min' } ) ) // Write source map. .pipe( sourcemaps.write( './' ) ) // Output the compiled sass to this directory. .pipe( gulp.dest( 'assets/styles/min' ) ) // Filtering stream to only css files. .pipe( filter( '**/*.css' ) ) // Notify on successful compile (uncomment for notifications). .pipe( notify( "Compiled: <%= file.relative %>" ) ); } ); /** * Minify javascript files. * * https://www.npmjs.com/package/gulp-uglify */ gulp.task( 'scripts', function () { gulp.src( paths.scripts ) // Notify on error. .pipe( plumber( { errorHandler: notify.onError( "Error: <%= error.message %>" ) } ) ) // Cache files to avoid processing files that haven't changed. .pipe( cache( 'scripts' ) ) // Add .min suffix. .pipe( rename( { suffix: '.min' } ) ) // Minify. .pipe( uglify() ) // Output the processed js to this directory. .pipe( gulp.dest( 'assets/scripts/min' ) ) // Inject changes via browsersync. .pipe( browsersync.reload( { stream: true } ) ) // Notify on successful compile. .pipe( notify( "Minified: <%= file.relative %>" ) ); } ); /** * Optimize images. * * https://www.npmjs.com/package/gulp-imagemin */ gulp.task( 'images', function () { return gulp.src( paths.images ) // Notify on error. .pipe( plumber( {errorHandler: notify.onError( "Error: <%= error.message %>" ) } ) ) // Cache files to avoid processing files that haven't changed. .pipe( cache( 'images' ) ) // Optimize images. .pipe( imagemin( { progressive: true } ) ) // Output the optimized images to this directory. .pipe( gulp.dest( 'assets/images' ) ) // Inject changes via browsersync. .pipe( browsersync.reload( { stream: true } ) ) // Notify on successful compile. .pipe( notify( "Optimized: <%= file.relative %>" ) ); } ); /** * Scan the theme and create a POT file. * * https://www.npmjs.com/package/gulp-wp-pot */ gulp.task( 'i18n', function() { return gulp.src( paths.php ) .pipe( plumber( { errorHandler: notify.onError( "Error: <%= error.message %>" ) } ) ) .pipe( sort() ) .pipe( wpPot( { domain: 'business-pro', destFile:'business-pro.pot', package: 'Business Pro', bugReport: 'https://seothemes.com/support', lastTranslator: 'Lee Anthony ', team: 'Seo Themes ' } ) ) .pipe( gulp.dest( './languages/' ) ); } ); /** * Package theme. * * https://www.npmjs.com/package/gulp-zip */ gulp.task( 'zip', function() { gulp.src( [ './**/*', '!./node_modules/', '!./node_modules/**', '!./aws.json' ] ) .pipe( zip( __dirname.split( "/" ).pop() + '.zip' ) ) .pipe( gulp.dest( '../' ) ); } ); /** * Publish packaged theme to S3. * * https://www.npmjs.com/package/gulp-s3 */ gulp.task( 'publish', function() { gulp.src( '../business-pro.zip' ) .pipe( s3( aws ) ); } ); /** * Process tasks and reload browsers on file changes. * * https://www.npmjs.com/package/browser-sync */ gulp.task( 'watch', function() { //HTTPS. browsersync( { proxy: 'https://ycb.test', port: 8000, notify: false, open: false, https: { "key": "/Users/thuanbui/.valet/Certificates/ycb.test.key", "cert": "/Users/thuanbui/.valet/Certificates/ycb.test.crt" } } ); /** * Non-HTTPS browsersync. * * Use this instead if you are not using a self signed * certificate on your local development environment. * * browsersync( { * proxy: 'business.dev' * } ); */ // Run tasks when files change. gulp.watch( paths.styles, [ 'styles' ] ); gulp.watch( paths.scripts, [ 'scripts' ] ); gulp.watch( paths.images, [ 'images' ] ); gulp.watch( paths.php ).on( 'change', browsersync.reload ); } ); /** * Create default task. */ gulp.task( 'default', [ 'watch' ], function() { gulp.start( 'styles', 'scripts', 'images' ); } );