diff --git a/gulp/config.js b/gulp/config.js index ffdaceb..1db5d30 100644 --- a/gulp/config.js +++ b/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/**/*'], diff --git a/gulp/tasks/js.js b/gulp/tasks/js.js index 1e97458..02f34f9 100644 --- a/gulp/tasks/js.js +++ b/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; diff --git a/gulp/tasks/scsslint.js b/gulp/tasks/scsslint.js index 6a4df55..2792b94 100644 --- a/gulp/tasks/scsslint.js +++ b/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)); diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index 1088bba..b0b4901 100644 --- a/gulp/tasks/styles.js +++ b/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; diff --git a/gulp/tasks/watch.js b/gulp/tasks/watch.js index 476be88..c4fc526 100644 --- a/gulp/tasks/watch.js +++ b/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; diff --git a/gulp/webpack.config.dev.js b/gulp/webpack.config.dev.js new file mode 100644 index 0000000..8b76d26 --- /dev/null +++ b/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 + } + }] + ] + } + }] + }] + } +}; diff --git a/gulp/webpack.config.js b/gulp/webpack.config.prod.js similarity index 97% rename from gulp/webpack.config.js rename to gulp/webpack.config.prod.js index dd7afea..c86827d 100644 --- a/gulp/webpack.config.js +++ b/gulp/webpack.config.prod.js @@ -1,4 +1,3 @@ -const webpack = require('webpack'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { diff --git a/gulpfile.js b/gulpfile.js index c13a7f3..1849bcb 100644 --- a/gulpfile.js +++ b/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;