changes to the gulp setup and a general refresh

Author: jasewarner

README.md

@@ -1,6 +1,6 @@
 # Gulp + WordPress
 
-Version: 2.0.9
+Version: 2.1.0
 
 ## Author
 
@@ -16,15 +16,15 @@ The theme has been built according to [WordPress Coding Standards](https://make.
 
 *Gulp + WordPress* is packaged with Gulp v4 for watching, compiling, and minifying SCSS and JS files.
 
-A selection of helpful mixins is also included, most of which are featured in [this useful article](http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/) by [@seb_ekstrom](https://twitter.com/seb_ekstrom).
+Any SCSS files that are made alongside `core.scss` will be turned into individual CSS files, which could, for example, then be used for Gutenberg blocks. 
 
 You may also write your JavaScript in ES6 – The Gulp scripts task utilises [Babel](https://babeljs.io/), so you can use new syntax without worrying about browser support.
 
 ## Installation
 
 Clone the project into `wp-content/themes` and rename it accordingly.
 
-You’ll want to update `style.css` in the theme root with all the relevant bits of information, as well as `assets/package.json` (specifically `name` and `author`) and lastly `assets/gulpfile.js` (change the `themePrefix` variable accordingly).
+You’ll want to update `style.css` in the theme root with all the relevant bits of information, as well as `assets/package.json` (specifically `name` and `author`).
 
 Now, in Terminal, `cd` into the `assets` directory and install the Gulp packages (if you haven't already installed Gulp, you’ll need to [do so](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) first):
 
@@ -34,9 +34,9 @@ Once you have installed the packages, in Terminal and while still in the `assets
 
 SCSS files in `assets/scss/` are compiled and minified over to `assets/css`.
 
-JavaScript files in `assets/js/scripts/` are uglified, concatenated and sent over to `assets/js/`.
-
-> Note: If you would like to specify scripts per WordPress template (e.g. posts, pages etc.), you can tweak the `js` Gulp task to create separate JavaScript files.
+JavaScript files in `assets/js/src` are packaged over to `assets/js/dist`.
+It’s possible to add JS files to the `srcJsCoreFiles` var in `gulpfile.js`. These files will then be included in the packaged `core.min.js` file.
+You can also add JS files in `assets/js/src/components`, however these will not be concatenated and will instead be minified into individual JS files – this is useful if you need to split out your JS for Gutenberg blocks, or, say, have JS load on a particular archive template.
 
 ## Features
 

assets/scss/components/.gitkeep renamed to admin.css

@@ -9,23 +9,28 @@ const concat = require('gulp-concat');
 const rename = require('gulp-rename');
 const uglify = require('gulp-uglify');
 const scsslint = require('gulp-scss-lint');
-
-/**
- * Here we set a prefix for our compiled and stylesheet and scripts.
- * Note that this should be the same as the `$themeHandlePrefix` in `func-script.php` and `func-style.php`.
- */
-const themePrefix = 'theme-name';
+const clean = require('gulp-clean');
 
 /**
  * Paths and files
  */
 const srcScss = 'scss/**/*.scss';
 const srcJsDir = 'js';
-const srcJsFiles = [
-    `${srcJsDir}/scripts/common.js`,
+const srcJsCoreFiles = [
+    // `./node_modules/bootstrap/dist/js/bootstrap.js`,
+    `${srcJsDir}/src/core.js`,
+];
+const srcJsComponentFiles = [
+    `${srcJsDir}/src/components/*.js`,
 ];
 const destCss = 'css';
-const destJs = 'js';
+const destJs = 'js/dist';
+const srcClean = [
+    `${destCss}/*.min.css`,
+    `!${destCss}/.gitkeep`,
+    `${destJs}/*.min.js`,
+    `!${destJs}/.gitkeep`
+]
 
 /**
  * Scss lint
@@ -35,6 +40,14 @@ gulp.task('scss-lint', () => {
         .pipe(scsslint());
 });
 
+/**
+ * Clean directories containing minified assets
+ */
+gulp.task('clean-dirs', () => {
+    return gulp.src(srcClean, {read: false})
+        .pipe(clean())
+});
+
 /**
  * Task for styles.
  *
@@ -44,22 +57,36 @@ gulp.task('css', gulp.series('scss-lint', () => {
     return gulp.src(srcScss)
         .pipe(sass().on('error', sass.logError))
         .pipe(autoprefixer({ cascade : false }))
-        .pipe(rename(`${themePrefix}.min.css`))
+        .pipe(rename({
+            suffix: `.min`
+        }))
         .pipe(cleancss())
         .pipe(gulp.dest(destCss));
 }));
 
 /**
  * Task for scripts.
  *
- * Js files are uglified and sent over to `assets/js/scripts/`.
+ * Js files are uglified and sent over to `assets/js/dist/`.
  */
-gulp.task('js', () => {
-    return gulp.src(srcJsFiles)
+gulp.task('js-core', () => {
+    return gulp.src(srcJsCoreFiles)
         .pipe(babel({
             presets : ['@babel/env']
         }))
-        .pipe(concat(`${themePrefix}.min.js`))
+        .pipe(concat(`core.min.js`))
+        .pipe(uglify())
+        .pipe(gulp.dest(destJs));
+});
+
+gulp.task('js-components', () => {
+    return gulp.src(srcJsComponentFiles)
+        .pipe(babel({
+            presets : ['@babel/env']
+        }))
+        .pipe(rename({
+            suffix: `.min`
+        }))
         .pipe(uglify())
         .pipe(gulp.dest(destJs));
 });
@@ -69,10 +96,11 @@ gulp.task('js', () => {
  */
 gulp.task('watch', () => {
     gulp.watch(srcScss, gulp.series('css'));
-    gulp.watch(srcJsFiles, gulp.series('js'));
+    gulp.watch(srcJsCoreFiles, gulp.series('js-core'));
+    gulp.watch(srcJsComponentFiles, gulp.series('js-components'));
 });
 
 /**
  * Default task
  */
-gulp.task('default', gulp.series('css', 'js') );
+gulp.task('default', gulp.series('clean-dirs', 'css', 'js-core', 'js-components') );

assets/gulpfile.js

@@ -1,4 +1,4 @@
-const common = (($) => {
+const core = (($) => {
     'use strict';
 
     /**
@@ -28,4 +28,4 @@ const common = (($) => {
 
 })(jQuery);
 
-jQuery(common.ready);
+jQuery(core.ready);