Get new dev/prod build process from air-light

gulp/config.js

@@ -54,10 +54,10 @@ module.exports = {
   },
   styles: {
     gutenberg: themeDir + '/sass/base/gutenberg.scss',
-    main: themeDir + '/sass/base/global.scss',
-    src: themeDir + '/sass/**/*.{sass,scss}',
-    dest: themeDir + '/css',
-    exclude: ['!' + themeDir + '/sass/navigation/_burger.scss', '!' + themeDir + '/sass/base/_normalize.scss'],
+    src: themeDir + '/sass/*.scss',
+    watch: themeDir + '/sass/**/*.{sass,scss}',
+    development: themeDir + '/css/dev/',
+    production: themeDir + '/css/prod/',
     stylelint: {
       opts: {
         fix: false,
@@ -73,29 +73,28 @@ module.exports = {
     opts: {
       development: {
         bundleExec: true,
-        style: 'expanded',
+        outputStyle: 'expanded',
         debugInfo: true,
-        lineNumbers: true,
         errLogToConsole: true,
         includePaths: [themeDir + '/node_modules/']
       },
       production: {
         bundleExec: true,
-        style: 'compressed',
+        outputStyle: 'compressed',
         debugInfo: true,
-        lineNumbers: true,
         errLogToConsole: true,
         includePaths: [themeDir + '/node_modules/']
       }
     }
   },
   js: {
-    main: themeDir + '/js/src/*.js',
-    src: themeDir + '/js/src/**/*.js',
-    dest: themeDir + '/js/dist/'
+    src: themeDir + '/js/src/*.js',
+    watch: themeDir + '/js/src/**/*',
+    production: themeDir + '/js/prod/',
+    development: themeDir + '/js/dev/',
   },
   php: {
-    src: themeDir + '/**/*.php'
+    src: '**/*.php'
   },
   phpcs: {
     src: [themeDir + '/**/*.php', '!' + themeDir + '/node_modules/**/*'],

gulp/tasks/js.js

@@ -4,26 +4,38 @@ process.env.NODE_PENDING_DEPRECATION = 0;
 // Dependencies
 const {
   dest,
-  src,
+  src
 } = require('gulp');
 const webpack = require('webpack-stream');
-const named = require('vinyl-named');
-const eslint = require('gulp-eslint');
 const config = require('../config');
 const {
-  handleError,
+  handleError
 } = require('../helpers/handle-errors.js');
-const webpackConfig = require('../webpack.config.js');
+const webpackConfigProduction = require('../webpack.config.prod.js');
+const webpackConfigDevelopment = require('../webpack.config.dev.js');
+const named = require('vinyl-named');
+const eslint = require('gulp-eslint');
 
 // Task
 function js() {
-  return src(config.js.src)
-    .pipe(eslint())
-    .pipe(eslint.format())
+  const lintedJs = src(config.js.src)
+  .pipe(eslint())
+  .pipe(eslint.format());
+
+  const production = lintedJs
     .pipe(named())
-    .pipe(webpack(webpackConfig))
+    .pipe(webpack(webpackConfigProduction))
     .on('error', handleError())
-    .pipe(dest(config.js.dest));
+    .pipe(dest(config.js.production));
+
+  const development = lintedJs
+    .pipe(named())
+    .pipe(webpack(webpackConfigDevelopment))
+    .on('error', handleError())
+    .pipe(dest(config.js.development));
+
+
+  return { production, development };
 }
 
 exports.js = js;

gulp/tasks/scsslint.js

@@ -8,7 +8,7 @@ const config = require('../config.js');
 // Task
 function scsslint() {
 
-  return src(config.styles.src, config.styles.exclude)
+  return src([config.styles.src])
 
     // Print linter report
     .pipe(stylelint(config.styles.stylelint.opts));

gulp/tasks/styles.js

@@ -17,14 +17,14 @@ const notify = require('gulp-notify');
 const mqpacker = require('mqpacker');
 
 function styles(done) {
-  return src(config.styles.main)
+  return src(config.styles.src)
     .pipe(sass(config.styles.opts.development))
 
     // Run PostCSS plugins
     .pipe(postcss([autoprefixer(), mqpacker()]))
 
     // Save expanded version for development
-    .pipe(dest(config.styles.dest))
+    .pipe(dest(config.styles.development))
 
     // Production settings
     .pipe(sass(config.styles.opts.production))
@@ -38,35 +38,7 @@ function styles(done) {
       }), )
 
     // Save minified version for production
-    .pipe(rename(config.rename.min))
-    .pipe(dest(config.styles.dest))
-
-    // Inject changes to browser
-    .pipe(bs.stream());
-
-  done();
-}
-
-function gutenbergstyles(done) {
-
-  return src(config.styles.gutenberg)
-    .pipe(sass(config.styles.opts.development))
-
-    // Production settings
-    .pipe(sass(config.styles.opts.production))
-    .pipe(postcss([autoprefixer()]))
-
-    .pipe(cleancss(config.cleancss.opts,
-      function (details) {
-        console.log('[clean-css] Original: ' + details.stats.originalSize / 1000 + ' kB');
-        console.log('[clean-css] Minified: ' + details.stats.minifiedSize / 1000 + ' kB');
-        console.log('[clean-css] Compression time: ' + details.stats.timeSpent + ' ms', );
-        console.log('[clean-css] Compression rate: ' + details.stats.efficiency * 100 + ' %', );
-      }), )
-
-    // Save minified version for production
-    .pipe(rename(config.rename.min))
-    .pipe(dest(config.styles.dest))
+    .pipe(dest(config.styles.production))
 
     // Inject changes to browser
     .pipe(bs.stream());
@@ -75,4 +47,3 @@ function gutenbergstyles(done) {
 }
 
 exports.styles = styles;
-exports.gutenbergstyles = gutenbergstyles;

gulp/tasks/watch.js

@@ -12,10 +12,10 @@ const {
 // Task
 function watchfiles() {
   bs.init(config.browsersync.src, config.browsersync.opts);
-  watch(config.styles.src, series('styles', 'gutenbergstyles', 'scsslint')).on('error', handleError('styles'));
+  watch(config.styles.watch, series('styles', 'scsslint')).on('error', handleError('styles'));
   watch(config.php.src, series('phpcs')).on('change', bs.reload);
-  watch(config.js.src).on('change', series('js'));
-  watch(config.js.src).on('change', bs.reload);
+  watch(config.js.watch).on('change', series('js'));
+  watch(config.js.watch).on('change', bs.reload);
 };
 
 exports.watch = watchfiles;

gulp/webpack.config.dev.js

@@ -0,0 +1,27 @@
+
+module.exports = {
+  externals: {
+    jquery: 'jQuery' // Available and loaded through WordPress.
+  },
+  mode: 'development',
+  module: {
+    rules: [{
+      test: /.js$/,
+      exclude: /node_modules/,
+      use: [{
+        loader: 'babel-loader',
+        query: {
+          presets: [
+            ['airbnb', {
+              targets: {
+                chrome: 50,
+                ie: 11,
+                firefox: 45
+              }
+            }]
+          ]
+        }
+      }]
+    }]
+  }
+};

gulp/webpack.config.js → gulp/webpack.config.prod.js

@@ -1,4 +1,3 @@
-const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {

gulpfile.js

@@ -3,6 +3,5 @@ exports.js = require('./gulp/tasks/js.js').js;
 exports.phpcs = require('./gulp/tasks/phpcs.js').phpcs;
 exports.scsslint = require('./gulp/tasks/scsslint.js').scsslint;
 exports.styles = require('./gulp/tasks/styles.js').styles;
-exports.gutenbergstyles = require('./gulp/tasks/styles.js').gutenbergstyles;
 exports.watch = require('./gulp/tasks/watch.js').watch;
 exports.default = require('./gulp/tasks/watch.js').watch;