@madebyseed/seed-cli-tools 1.6.0 → 1.7.0

package/.eslintrc

@@ -1,6 +1,7 @@
 {
   "env": {
-    "node": true
+    "node": true,
+    "es6": true
   },
   "parser": "babel-eslint",
   "extends": "eslint:recommended"

package/lib/gulpfile.js

@@ -1,9 +1,24 @@
 "use strict";
 
-var gulp = require("gulp"); // imports gulp tasks from the `tasks` directory
+var gulp = require("gulp");
+
+var utils = require('./tasks/includes/utilities.js'); // imports gulp tasks from the `tasks` directory
 
 
 require("require-directory")(module, "./tasks");
+/**
+ * Handles the error summary at the end if there are errors to output.
+ * This task will only be run for the build and zip tasks.
+ */
+
+
+gulp.task('output:errors', function (done) {
+  if (utils.hasErrors()) {
+    utils.outputErrors();
+  } else {
+    done();
+  }
+});
 /**
  * Does a full clean/rebuild of your theme
  *
@@ -12,7 +27,6 @@ require("require-directory")(module, "./tasks");
  * @static
  */
 
-
 gulp.task("build", gulp.series("clean", gulp.parallel("build:js", "build:vendor-js", "build:css", "build:assets", "build:svg")));
 /**
  * Does a full clean/rebuild of your theme and creates a `.zip` compatible with
@@ -25,7 +39,7 @@ gulp.task("build", gulp.series("clean", gulp.parallel("build:js", "build:vendor-
 
 gulp.task("zip", gulp.series("build", "shopify:package:dist", "copy:zip"));
 /**
- * Syncronizes the development theme settings with our src folder theme settings
+ * Synchronizes the development theme settings with our src folder theme settings
  *
  * @function sync-settings
  * @memberof seed-cli.tasks.deploy
@@ -43,7 +57,7 @@ gulp.task("sync-settings", gulp.series("generate:tmp", "shopify:pull:dev:tmp", "
  * @static
  */
 
-gulp.task("watch", gulp.series("build", gulp.parallel("watch:src", "watch:dist", "shopify:serve:dist")));
+gulp.task("watch", gulp.series("build", "output:errors", gulp.parallel("watch:src", "watch:dist", "shopify:serve:dist")));
 /**
  *
  * @summary pulls theme from specified environment theme into src

package/lib/tasks/build-css.js

@@ -10,12 +10,16 @@ var postcss = require("gulp-postcss");
 
 var plumber = require("gulp-plumber");
 
+var gulpif = require("gulp-if");
+
 var chokidar = require("chokidar");
 
 var config = require("./includes/config.js");
 
 var messages = require("./includes/messages.js");
 
+var utils = require("./includes/utilities");
+
 var _require = require("./includes/config.js"),
     usesTailwind = _require.usesTailwind;
 
@@ -30,11 +34,7 @@ var assets = config.usesTailwind || tailwindConfig.mode === "jit" ? [config.src.
  */
 
 function processCss() {
-  if (usesTailwind) {
-    return gulp.src(config.roots.css).pipe(plumber()).pipe(postcss(config.plugins.postcss)).pipe(sass().on("error", sass.logError)).pipe(gulp.dest(config.dist.assets));
-  } else {
-    return gulp.src(config.roots.css).pipe(plumber()).pipe(sass().on("error", sass.logError)).pipe(postcss(config.plugins.postcss)).pipe(gulp.dest(config.dist.assets));
-  }
+  return gulp.src(config.roots.css).pipe(plumber(utils.errorHandler)).pipe(gulpif(!usesTailwind, sass())).pipe(postcss(config.plugins.postcss)).pipe(gulpif(usesTailwind, sass())).pipe(gulp.dest(config.dist.assets));
 }
 /**
  * Concatenate css via gulp-cssimport
@@ -60,7 +60,7 @@ gulp.task("watch:css", function () {
   chokidar.watch(assets, {
     ignoreInitial: true
   }).on("all", function (event, path) {
-    var isCssFile = /.\.css$/.test(path); // Don't log event twice
+    var isCssFile = /\.s[ac]ss$/i.test(path); // Don't log event twice
 
     if (isCssFile) {
       messages.logFileEvent(event, path);

package/lib/tasks/build-js.js

@@ -4,7 +4,9 @@ var gulp = require('gulp');
 
 var gulpif = require('gulp-if');
 
-var uglify = require('gulp-uglify');
+var uglifyjs = require('uglify-js');
+
+var composer = require('gulp-uglify/composer');
 
 var include = require('gulp-include');
 
@@ -12,18 +14,30 @@ var plumber = require('gulp-plumber');
 
 var chokidar = require('chokidar');
 
+var minify = composer(uglifyjs, console);
+
+var gulpWebpack = require('webpack-stream');
+
+var webpack = require('webpack');
+
+var utils = require("./includes/utilities");
+
 var config = require('./includes/config.js');
 
 var messages = require('./includes/messages.js');
 
 function processThemeJs() {
   messages.logProcessFiles('build:js');
-  return gulp.src([config.roots.js, "!".concat(config.roots.vendorJs)]).pipe(plumber()).pipe(include()).pipe(gulpif(config.optimize, uglify())).pipe(gulp.dest(config.dist.assets));
+  return gulp.src([config.roots.js, "!".concat(config.roots.vendorJs)], {
+    allowEmpty: true
+  }).pipe(plumber(utils.errorHandler)).pipe(gulpif(config.usesModuleBundler, gulpWebpack(config.plugins.webpack, webpack), include())).pipe(gulpif(config.optimize && !config.usesModuleBundler, minify())).pipe(gulp.dest(config.dist.assets));
 }
 
 function processVendorJs() {
   messages.logProcessFiles('build:vendor-js');
-  return gulp.src(config.roots.vendorJs).pipe(plumber()).pipe(include()).pipe(uglify({
+  return gulp.src(config.roots.vendorJs, {
+    allowEmpty: true
+  }).pipe(plumber()).pipe(include()).pipe(minify({
     mangle: true,
     compress: true
   })).pipe(gulp.dest(config.dist.assets));

package/lib/tasks/includes/config.js

@@ -14,8 +14,12 @@ var cssnano = require("cssnano");
 
 var pxtorem = require('postcss-pxtorem');
 
+var reporter = require('postcss-reporter');
+
 var argv = require("minimist")(process.argv.slice(2));
 
+var webpack = require('webpack');
+
 var themeRoot = findRoot(process.cwd());
 var tailwindConfig = 'tailwind.config.js';
 var pkg = {};
@@ -27,16 +31,6 @@ try {
 }
 /**
  * seed-cli configuration object
- * ## Markdown stuff
- *
- * It's a big description written in `markdown`
- *
- * Example:
- *
- * ```javascript
- * $('something')
- *   .something(else);
- * ```
  *
  * @namespace config
  * @memberof seed-cli
@@ -63,6 +57,7 @@ var config = {
   packageJson: pkg,
   tailwindConfig: tailwindConfig,
   usesTailwind: fs.existsSync(join(themeRoot, tailwindConfig)),
+  usesModuleBundler: !!pkg['bundle-js'],
   seedConfig: "seed.config.js",
   shopifyIgnore: join(themeRoot, '.shopifyignore'),
   src: {
@@ -116,9 +111,25 @@ var config = {
     vendorJs: "src/scripts/vendor.js",
     css: "src/styles/*.{css,scss}"
   },
-  // Added at runtime
   plugins: {
-    postcss: []
+    // Added at runtime
+    postcss: [],
+    webpack: {
+      mode: !argv["skip-optimizations"] ? 'production' : 'development',
+      output: {
+        filename: 'theme.js'
+      },
+      resolve: {
+        alias: {
+          vue: 'vue/dist/vue.esm-bundler.js'
+        }
+      },
+      plugins: [new webpack.DefinePlugin({
+        __VUE_OPTIONS_API__: true,
+        __VUE_PROD_DEVTOOLS__: false
+      })],
+      stats: 'none'
+    }
   }
 };
 
@@ -146,4 +157,7 @@ config.plugins.postcss.push(pxtorem({
   mediaQuery: true,
   exclude: /node_modules/i
 }));
+config.plugins.postcss.push(reporter({
+  clearReportedMessages: true
+}));
 module.exports = config;

package/lib/tasks/includes/messages.js

@@ -22,8 +22,14 @@ function separatePath(path) {
 
 var messages = {
   logFileEvent: function logFileEvent(event, path) {
+    var dist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var pathObject = separatePath(path);
-    log('change in', chalk.magenta(pathObject.dir), chalk.white('-'), chalk.cyan(event), chalk.yellow(pathObject.file));
+
+    if (dist) {
+      log('updated', chalk.green('dist'), chalk.magenta(pathObject.dir), chalk.white('-'), chalk.cyan(event), chalk.yellow(pathObject.file));
+    } else {
+      log('change in', chalk.magenta(pathObject.dir), chalk.white('-'), chalk.cyan(event), chalk.yellow(pathObject.file));
+    }
   },
   logTransferDone: function logTransferDone() {
     log('Transfer Complete:', chalk.green('File changes successfully synced to store'));
@@ -68,7 +74,7 @@ var messages = {
     log('File missing:', chalk.yellow('`seed.config.js` does not exist. You need to add a config file before you can make changes to your Shopify store.'));
   },
   deployTo: function deployTo(environment) {
-    log('Initiating deploy to', chalk.bold(environment));
+    log('Environment:', chalk.bold(environment));
   },
   allDeploysComplete: function allDeploysComplete() {
     log('Multiple environments:', chalk.green('Deploy completed for all environments in series'));

package/lib/tasks/includes/utilities.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _this = void 0;
-
 var chalk = require("chalk");
 
 var log = require("fancy-log");
@@ -20,6 +18,15 @@ var errors = [];
  */
 
 var utilities = {
+  /**
+   * Indicates whether there are errors during build/watch
+   * 
+   * @returns {Boolean}
+   */
+  hasErrors: function hasErrors() {
+    return errors.length > 0;
+  },
+
   /**
    * Handles the output for any errors that might have been captured
    * during the build and zip Gulp tasks.
@@ -48,8 +55,6 @@ var utilities = {
   errorHandler: function errorHandler(err) {
     log(chalk.red(err));
     errors.push(err);
-
-    _this.emit("end");
   },
 
   /**
@@ -106,17 +111,17 @@ var utilities = {
        * @param {String} path - relative path to file passed via event
        */
       addEvent: function addEvent(event, path) {
-        var _this2 = this;
+        var _this = this;
 
         _.each(options.changeEvents, function (eventType) {
           if (event === eventType) {
-            _this2.change.push(path);
+            _this.change.push(path);
           }
         });
 
         _.each(options.unlinkEvents, function (eventType) {
           if (event === eventType) {
-            _this2.unlink.push(path);
+            _this.unlink.push(path);
           }
         });
       }
@@ -129,11 +134,6 @@ var utilities = {
    * Clears the appropriate cache array after a change/delete function has been
    * called.
    *
-   * Example:
-   * ```javascript
-   *   // TODO:
-   * ```
-   *
    * @memberof seed-cli.utilities
    * @method
    * @param {eventCache} cache - a specific cache object for tracking file events

package/lib/tasks/watchers.js

@@ -10,7 +10,6 @@ var utils = require("./includes/utilities");
 
 var messages = require("./includes/messages.js");
 
-var environment = config.environment.split(/\s*,\s*|\s+/)[0];
 var cache = utils.createEventCache();
 /**
  * Aggregate task watching for file changes in `src` and
@@ -40,8 +39,9 @@ gulp.task("watch:dist", function () {
     ignoreInitial: true
   });
   watcher.on("all", function (event, path) {
-    messages.logFileEvent(event, path);
-    cache.addEvent(event, path);
-    messages.deployTo(environment);
+    if (!utils.hasErrors()) {
+      messages.logFileEvent(event, path, true);
+      cache.addEvent(event, path);
+    }
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madebyseed/seed-cli-tools",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Seed CLI Tools",
   "main": "index.js",
   "scripts": {
@@ -45,11 +45,15 @@
     "postcss": "^8.3.6",
     "postcss-import": "^14.0.2",
     "postcss-pxtorem": "^6.0.0",
+    "postcss-reporter": "^7.0.5",
     "require-directory": "^2.1.1",
     "sass": "^1.36.0",
     "tailwindcss": "^2.2.7",
+    "uglify-js": "^3.15.3",
     "vinyl-paths": "^3.0.1",
+    "webpack": "^5.72.1",
+    "webpack-stream": "^7.0.0",
     "yargs": "^17.0.1"
   },
-  "gitHead": "426187d1c16859249db56a7174a94192adc9d702"
+  "gitHead": "974be44fcc8a575715e52c267296bee81b7eb38a"
 }

package/src/gulpfile.js

@@ -1,8 +1,22 @@
 const gulp = require("gulp");
 
+const utils = require('./tasks/includes/utilities.js');
+
 // imports gulp tasks from the `tasks` directory
 require("require-directory")(module, "./tasks");
 
+/**
+ * Handles the error summary at the end if there are errors to output.
+ * This task will only be run for the build and zip tasks.
+ */
+ gulp.task('output:errors', (done) => {
+  if (utils.hasErrors()) {
+    utils.outputErrors();
+  } else {
+    done();
+  }
+});
+
 /**
  * Does a full clean/rebuild of your theme
  *
@@ -35,7 +49,7 @@ gulp.task(
 gulp.task("zip", gulp.series("build", "shopify:package:dist", "copy:zip"));
 
 /**
- * Syncronizes the development theme settings with our src folder theme settings
+ * Synchronizes the development theme settings with our src folder theme settings
  *
  * @function sync-settings
  * @memberof seed-cli.tasks.deploy
@@ -59,6 +73,7 @@ gulp.task(
   "watch",
   gulp.series(
     "build",
+    "output:errors",
     gulp.parallel("watch:src", "watch:dist", "shopify:serve:dist")
   )
 );
@@ -110,3 +125,5 @@ gulp.task("deploy", gulp.series("sync-settings", "build", "shopify:push:dist"));
  */
  gulp.task("deploy:no-sync", gulp.series("build", "shopify:push:dist"));
 
+
+

package/src/tasks/build-css.js

@@ -3,16 +3,19 @@ const gulp = require("gulp");
 const sass = require("gulp-sass")(require("sass"));
 const postcss = require("gulp-postcss");
 const plumber = require("gulp-plumber");
+const gulpif = require("gulp-if");
 const chokidar = require("chokidar");
 
 const config = require("./includes/config.js");
 const messages = require("./includes/messages.js");
+const utils = require("./includes/utilities");
 const { usesTailwind } = require("./includes/config.js");
 const tailwindConfig = config.usesTailwind ? require(path.join(
   config.themeRoot,
   config.tailwindConfig
 )) : {};
 
+
 const assets = 
   config.usesTailwind || tailwindConfig.mode === "jit"
     ? [
@@ -35,22 +38,12 @@ const assets =
  * @private
  */
 function processCss() {
-  if (usesTailwind)  {
-    return gulp
-      .src(config.roots.css)
-      .pipe(plumber())
-      .pipe(postcss(config.plugins.postcss))
-      .pipe(sass().on("error", sass.logError))
-      .pipe(gulp.dest(config.dist.assets));
-  } else {
-    return gulp
-      .src(config.roots.css)
-      .pipe(plumber())
-      .pipe(sass().on("error", sass.logError))
-      .pipe(postcss(config.plugins.postcss))
-      .pipe(gulp.dest(config.dist.assets));
-  }
-
+  return gulp.src(config.roots.css)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(gulpif(!usesTailwind, sass()))
+    .pipe(postcss(config.plugins.postcss))
+    .pipe(gulpif(usesTailwind, sass()))
+    .pipe(gulp.dest(config.dist.assets))
 }
 
 /**
@@ -73,12 +66,13 @@ gulp.task("build:css", () => {
  */
 gulp.task("watch:css", () => {
   chokidar.watch(assets, { ignoreInitial: true }).on("all", (event, path) => {
-    const isCssFile = /.\.css$/.test(path); 
+
+    const isCssFile = /\.s[ac]ss$/i.test(path); 
     // Don't log event twice
     if (isCssFile) {
       messages.logFileEvent(event, path);
     }
 
-    processCss();
+    processCss()
   });
 });

package/src/tasks/build-js.js

@@ -1,28 +1,33 @@
 const gulp = require('gulp');
 const gulpif = require('gulp-if');
-const uglify = require('gulp-uglify');
+const uglifyjs = require('uglify-js');
+const composer = require('gulp-uglify/composer');
 const include = require('gulp-include');
 const plumber = require('gulp-plumber');
 const chokidar = require('chokidar');
+const minify = composer(uglifyjs, console)
+const gulpWebpack = require('webpack-stream');
+const webpack = require('webpack');
 
+const utils = require("./includes/utilities");
 const config = require('./includes/config.js');
 const messages = require('./includes/messages.js');
 
 function processThemeJs() {
   messages.logProcessFiles('build:js');
-  return gulp.src([config.roots.js, `!${config.roots.vendorJs}`])
-    .pipe(plumber())
-    .pipe(include())
-    .pipe(gulpif(config.optimize, uglify()))
-    .pipe(gulp.dest(config.dist.assets));
+  return gulp.src([config.roots.js, `!${config.roots.vendorJs}`], { allowEmpty: true })
+    .pipe(plumber(utils.errorHandler))
+    .pipe(gulpif(config.usesModuleBundler, gulpWebpack(config.plugins.webpack, webpack), include()))
+    .pipe(gulpif(config.optimize && !config.usesModuleBundler, minify()))
+    .pipe(gulp.dest(config.dist.assets))
 }
 
 function processVendorJs() {
   messages.logProcessFiles('build:vendor-js');
-  return gulp.src(config.roots.vendorJs)
+  return gulp.src(config.roots.vendorJs, { allowEmpty: true })
     .pipe(plumber())
     .pipe(include())
-    .pipe(uglify({
+    .pipe(minify({
       mangle: true,
       compress: true,
     }))
@@ -37,7 +42,7 @@ gulp.task('watch:js', () => {
   chokidar.watch([config.src.js, `!${config.roots.vendorJs}`, `!${config.src.vendorJs}`], {ignoreInitial: true})
     .on('all', (event, path) => {
       messages.logFileEvent(event, path);
-      processThemeJs();
+      processThemeJs()
     });
 });
 

package/src/tasks/includes/config.js

@@ -5,7 +5,9 @@ const findRoot = require("find-root");
 const tailwindcss = require("tailwindcss");
 const cssnano = require("cssnano");
 const pxtorem = require('postcss-pxtorem');
+const reporter = require('postcss-reporter');
 const argv = require("minimist")(process.argv.slice(2));
+const webpack = require('webpack');
 const themeRoot = findRoot(process.cwd());
 const tailwindConfig = 'tailwind.config.js'
 
@@ -19,16 +21,6 @@ try {
 
 /**
  * seed-cli configuration object
- * ## Markdown stuff
- *
- * It's a big description written in `markdown`
- *
- * Example:
- *
- * ```javascript
- * $('something')
- *   .something(else);
- * ```
  *
  * @namespace config
  * @memberof seed-cli
@@ -56,6 +48,8 @@ const config = {
 
   usesTailwind: fs.existsSync(join(themeRoot, tailwindConfig)),
 
+  usesModuleBundler: !!pkg['bundle-js'],
+
   seedConfig: "seed.config.js",
 
   shopifyIgnore: join(themeRoot, '.shopifyignore'),
@@ -115,10 +109,31 @@ const config = {
     css: "src/styles/*.{css,scss}",
   },
 
-  // Added at runtime
   plugins: {
+    // Added at runtime
     postcss: [],
+
+    webpack: {
+      mode: !argv["skip-optimizations"] ? 'production' : 'development',
+      output: {
+        filename: 'theme.js'
+      },
+      resolve: {
+        alias: {
+          vue: 'vue/dist/vue.esm-bundler.js',
+        },
+      },
+      plugins: [
+        new webpack.DefinePlugin({
+          __VUE_OPTIONS_API__: true,
+          __VUE_PROD_DEVTOOLS__: false,
+        })
+      ],
+      stats: 'none'
+    },
   },
+
+
 };
 
 
@@ -143,4 +158,6 @@ config.plugins.postcss.push(pxtorem({
   exclude: /node_modules/i
 }))
 
+config.plugins.postcss.push(reporter({ clearReportedMessages: true }))
+
 module.exports = config;

package/src/tasks/includes/messages.js

@@ -18,15 +18,26 @@ function separatePath(path) {
 }
 
 const messages = {
-  logFileEvent: (event, path) => {
+  logFileEvent: (event, path, dist = false) => {
     const pathObject = separatePath(path);
 
-    log('change in',
-      chalk.magenta(pathObject.dir),
-      chalk.white('-'),
-      chalk.cyan(event),
-      chalk.yellow(pathObject.file),
-    );
+    if (dist) {
+      log('updated',
+        chalk.green('dist'),
+        chalk.magenta(pathObject.dir),
+        chalk.white('-'),
+        chalk.cyan(event),
+        chalk.yellow(pathObject.file),
+      );
+    } else {
+      log('change in',
+        chalk.magenta(pathObject.dir),
+        chalk.white('-'),
+        chalk.cyan(event),
+        chalk.yellow(pathObject.file),
+      );
+    }
+
   },
 
   logTransferDone: () => {
@@ -102,7 +113,7 @@ const messages = {
   },
 
   deployTo: (environment) => {
-    log('Initiating deploy to', chalk.bold(environment));
+    log('Environment:', chalk.bold(environment));
   },
 
   allDeploysComplete: () => {

package/src/tasks/includes/utilities.js

@@ -13,6 +13,13 @@ let errors = [];
  * @memberof seed-cli
  */
 const utilities = {
+  /**
+   * Indicates whether there are errors during build/watch
+   * 
+   * @returns {Boolean}
+   */
+  hasErrors: () => errors.length > 0,
+
   /**
    * Handles the output for any errors that might have been captured
    * during the build and zip Gulp tasks.
@@ -25,7 +32,6 @@ const utilities = {
     }
 
     log(chalk.red(`There were errors during the build:\n`));
-
     errors.forEach((err) => {
       log(chalk.red(err));
     });
@@ -44,7 +50,6 @@ const utilities = {
     log(chalk.red(err));
     errors.push(err);
 
-    this.emit("end");
   },
 
   /**
@@ -125,11 +130,6 @@ const utilities = {
    * Clears the appropriate cache array after a change/delete function has been
    * called.
    *
-   * Example:
-   * ```javascript
-   *   // TODO:
-   * ```
-   *
    * @memberof seed-cli.utilities
    * @method
    * @param {eventCache} cache - a specific cache object for tracking file events

package/src/tasks/watchers.js

@@ -5,7 +5,6 @@ const utils = require("./includes/utilities");
 
 const messages = require("./includes/messages.js");
 
-const environment = config.environment.split(/\s*,\s*|\s+/)[0];
 const cache = utils.createEventCache();
 
 /**
@@ -42,8 +41,9 @@ gulp.task("watch:dist", () => {
   });
 
   watcher.on("all", (event, path) => {
-    messages.logFileEvent(event, path);
-    cache.addEvent(event, path);
-    messages.deployTo(environment);
+    if (!utils.hasErrors()) {
+      messages.logFileEvent(event, path, true);
+      cache.addEvent(event, path);
+    }    
   });
 });