@madebyseed/seed-cli-tools 1.0.1 → 1.2.1

package/lib/tasks/shopify-cli.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var gulp = require("gulp");
+
+var _require = require("../utils"),
+    shopifyCLI = _require.shopifyCLI,
+    extractThemeId = _require.extractThemeId,
+    logChildProcessOutput = _require.logChildProcessOutput,
+    getDevThemeID = _require.getDevThemeID,
+    setDevThemeID = _require.setDevThemeID,
+    getThemeID = _require.getThemeID;
+
+var config = require("./includes/config");
+
+var messages = require("./includes/messages");
+/**
+ * Initiates shopify's cli command 'shopify theme serve' on the dist folder,
+ * watching files and uploading them to development store
+ *
+ * @function shopify:serve:dist
+ * @memberof seed-cli.tasks.watch
+ * @static
+ */
+
+
+gulp.task("shopify:serve:dist", function () {
+  messages.logChildProcess("'shopify theme serve' on dist...");
+  var childProcess = shopifyCLI.serve({
+    stdio: ["inherit", "pipe", "inherit"]
+  });
+  childProcess.stdout.setEncoding("utf8");
+  logChildProcessOutput(childProcess);
+  persistDevThemeID(childProcess);
+  return childProcess;
+});
+/**
+ * Pulls theme files from the development theme specified in seed config into src
+ *
+ * @function shopify:pull:dev
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+
+gulp.task("shopify:pull:dev", function (done) {
+  messages.logChildProcess("'shopify theme pull' on development theme...");
+  var devThemeId = getDevThemeID(config.themeRoot);
+
+  if (!devThemeId) {
+    return done();
+  }
+
+  return shopifyCLI.pull(devThemeId);
+});
+/**
+ * Pulls theme files from the development theme specified in seed config into tmp
+ *
+ * @function shopify:pull:dev:tmp
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+
+gulp.task("shopify:pull:dev:tmp", function (done) {
+  messages.logChildProcess("'shopify theme pull' on tmp folder...");
+  var devThemeId = getDevThemeID(config.themeRoot);
+
+  if (!devThemeId) {
+    return done();
+  }
+
+  return shopifyCLI.pull(devThemeId, config.tmp.root);
+});
+/**
+ * Initiates shopify's cli command 'shopify theme push' on the dist folder,
+ * pushing it to stores theme
+ *
+ * @function deploy:dist
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+
+gulp.task("shopify:push:dist", function () {
+  messages.logChildProcess("'shopify theme push' on dist folder...");
+  return shopifyCLI.push(getThemeID(config.themeRoot, config.environment));
+});
+/**
+ * Takes the output of shopify cli serve, extracts dev theme ID and persists
+ * in seed.config.js
+ *
+ * @param {child_process} serveProcess shopify cli serve spawned child process
+ */
+
+function persistDevThemeID(serveProcess) {
+  serveProcess.stdout.on("data", function (data) {
+    var devThemeId = extractThemeId(data.toString());
+    var currentDevThemeId = getDevThemeID(config.themeRoot); // If we already have latest dev theme ID, we got nothing left to do
+
+    if (devThemeId === currentDevThemeId) return; // Else, write dev theme ID into seed.config.js
+
+    setDevThemeID(devThemeId);
+  });
+}

package/lib/tasks/watchers.js

@@ -1,20 +1,17 @@
 "use strict";
 
-// const { yellow } = require('chalk');
-var gulp = require('gulp'); // const runSequence = require('gulp4-run-sequence');
-// const _ = require('lodash');
-// const debug = require('debug')('seed-tools:watchers');
-// const chokidar = require('chokidar');
-// const fs = require('fs');
-// const themekit = require('@shopify/themekit');
-// const Promise = require('bluebird');
-// const config = require('./includes/config.js');
+var gulp = require("gulp");
 
+var config = require("./includes/config");
 
-var utils = require('./includes/utilities.js'); // const messages = require('./includes/messages.js');
-// const cache = utils.createEventCache();
-// const environment = config.environment.split(/\s*,\s*|\s+/)[0];
+var chokidar = require("chokidar");
 
+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
  * building/cleaning/updating `dist` accordingly.  *Made up of individual tasks
@@ -25,20 +22,26 @@ var utils = require('./includes/utilities.js'); // const messages = require('./i
  * @static
  */
 
-
-gulp.task('watch:src', function () {
-  return gulp.parallel('watch:css', 'watch:js', 'watch:assets', 'watch:svg')();
+gulp.task("watch:src", function () {
+  return gulp.parallel("watch:css", "watch:js", "watch:assets", "watch:svg")();
 });
 /**
- * Initiates shopify's cli command 'shopify theme serve' on the dist folder, 
- * watching files and uploading them to development store
- * 
+ * Watches for changes in the `./dist` folder and passes event data to the
+ * `cache` via {@link pushToCache}.
  * @function watch:dist
  * @memberof seed-cli.tasks.watch
  * @static
  */
 
-gulp.task('watch:dist', function () {
-  console.log("Running Shopify theme serve...");
-  return utils.serveDist();
+gulp.task("watch:dist", function () {
+  var watcher = chokidar.watch(["./"], {
+    cwd: config.dist.root,
+    ignored: /(^|[/\\])\../,
+    ignoreInitial: true
+  });
+  watcher.on("all", function (event, path) {
+    messages.logFileEvent(event, path);
+    cache.addEvent(event, path);
+    messages.deployTo(environment);
+  });
 });

package/lib/utils.js

@@ -5,16 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSeedConfig = getSeedConfig;
 exports.getStoreName = getStoreName;
+exports.getThemeID = getThemeID;
+exports.getDevThemeID = getDevThemeID;
+exports.extractThemeId = extractThemeId;
+exports.logChildProcessOutput = logChildProcessOutput;
+exports.setDevThemeID = setDevThemeID;
 exports.shopifyCLI = void 0;
 
 var _crossSpawn = _interopRequireDefault(require("cross-spawn"));
 
 var _path = require("path");
 
+var _fs = require("fs");
+
 var _config = _interopRequireDefault(require("./config"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /**
  * Wrappers for Shopify CLI commands
  *
@@ -25,33 +38,52 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var shopifyCLI = {
   /**
    * shopify login
-   * 
+   *
    * @memberof seed-cli.shopifyCLI
    * @param {string} store - store's myshopify domain name
    * @param {boolean} async - login asynchronously
-   * 
+   *
    * @returns {object} - spawnSync object or, node's <ChildProcess> object if async
    */
   login: function login(store) {
     var async = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var args = ['login', '--store', store];
+    var args = ["login", "--store", store];
     var options = {
       env: process.env,
       stdio: "inherit",
       shell: true
     };
-    if (async) return (0, _crossSpawn["default"])('shopify', args, options);else return _crossSpawn["default"].sync('shopify', args, options);
+    if (async) return (0, _crossSpawn["default"])("shopify", args, options);else return _crossSpawn["default"].sync("shopify", args, options);
   },
 
   /**
    * shopify theme serve
-   * 
+   *
    * @memberof seed-cli.shopifyCLI
    * @returns {object} - node's ChildProcess
    */
   serve: function serve() {
-    return (0, _crossSpawn["default"])('shopify theme', ['serve'], {
-      cwd: _config["default"].themeRoot + '/dist',
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return (0, _crossSpawn["default"])("shopify theme", ["serve"], _objectSpread({
+      cwd: _config["default"].themeRoot + "/dist",
+      env: process.env,
+      stdio: "inherit",
+      shell: true
+    }, options));
+  },
+
+  /**
+   * shopify theme push
+   *
+   * @memberof seed-cli.shopifyCLI
+   * @returns {object} - node's ChildProcess
+   */
+  pull: function pull() {
+    var themeId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var dir = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "./src";
+    var args = ["pull"];
+    if (themeId) args = args.concat(["--themeid", themeId, dir]);
+    return (0, _crossSpawn["default"])("shopify theme", args, {
       env: process.env,
       stdio: "inherit",
       shell: true
@@ -60,13 +92,16 @@ var shopifyCLI = {
 
   /**
    * shopify theme push
-   * 
+   *
    * @memberof seed-cli.shopifyCLI
    * @returns {object} - node's ChildProcess
    */
   push: function push() {
-    return (0, _crossSpawn["default"])('shopify theme', ['push'], {
-      cwd: _config["default"].themeRoot + '/dist',
+    var themeId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var args = ["push", "--nodelete"];
+    if (themeId) args = args.concat(["--themeid", themeId]);
+    return (0, _crossSpawn["default"])("shopify theme", args, {
+      cwd: _config["default"].themeRoot + "/dist",
       env: process.env,
       stdio: "inherit",
       shell: true
@@ -75,22 +110,86 @@ var shopifyCLI = {
 };
 /**
  * Get seed.config.js from project root dir
- * 
+ *
  * @param {string} themeRoot - the path to theme root dir
  */
 
 exports.shopifyCLI = shopifyCLI;
 
 function getSeedConfig(themeRoot) {
-  return require((0, _path.join)(themeRoot, 'seed.config.js'));
+  return require((0, _path.join)(themeRoot, "seed.config.js"));
 }
 /**
- * Get store name from seed.config.js 
- * 
+ * Get store name from seed.config.js
+ *
  * @param {string} themeRoot - the path to theme root dir
  */
 
 
 function getStoreName(themeRoot) {
   return getSeedConfig(themeRoot).store;
+}
+/**
+ * Get theme ID from seed.config.js
+ *
+ * @param {string} themeRoot - the path to theme root dir
+ * @param {string} environment - theme name/environment
+ * @returns {string} themeID
+ */
+
+
+function getThemeID(themeRoot, environment) {
+  return getSeedConfig(themeRoot).themes[environment];
+}
+/**
+ * Get dev theme ID from seed.config.js
+ *
+ * @param {string} themeRoot - the path to theme root dir
+ * @returns {string} - development store theme ID
+ */
+
+
+function getDevThemeID(themeRoot) {
+  return getSeedConfig(themeRoot).developmentThemeId;
+}
+/**
+ * Given a string, finds the first themeID and returns it, if no themeID found
+ * returns false.
+ *
+ * @param {string} string - string to extract theme id from
+ * @return {string|boolean} - themeID or false if not found
+ */
+
+
+function extractThemeId(string) {
+  var regex = /\d{12}/;
+  var match = string.match(regex);
+  return match && match.length ? match[0] : false;
+}
+/**
+ * Logs out to terminal the output of a piped child process
+ *
+ * @param {child_process} serveProcess shopify cli serve spawned child process
+ */
+
+
+function logChildProcessOutput(process) {
+  process.stdout.on("data", function (data) {
+    console.log(data);
+  });
+}
+/**
+ * Writes the development theme ID as a key to seed config file
+ *
+ * @param {string} themeID - development theme ID
+ */
+
+
+function setDevThemeID(themeID) {
+  var data = (0, _fs.readFileSync)(_config["default"].seedConfig, {
+    encoding: "utf8"
+  });
+  data = data.split(_config["default"].seedConfigDelimiter);
+  data[1] = "\n  developmentThemeId: '".concat(themeID, "'") + "\n};";
+  (0, _fs.writeFileSync)(_config["default"].seedConfig, data.join(_config["default"].seedConfigDelimiter));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madebyseed/seed-cli-tools",
-  "version": "1.0.1",
+  "version": "1.2.1",
   "description": "Seed CLI Tools",
   "main": "index.js",
   "scripts": {
@@ -22,12 +22,12 @@
     "eslint": "^7.31.0"
   },
   "dependencies": {
-    "@shopify/themekit": "^1.1.9",
     "autoprefixer": "^10.3.1",
     "bluebird": "^3.7.2",
     "chalk": "^4.1.1",
     "chokidar": "^3.5.2",
     "cross-spawn": "^7.0.3",
+    "cssnano": "^5.0.8",
     "debug": "^4.3.2",
     "del": "^6.0.0",
     "fancy-log": "^1.3.3",
@@ -37,6 +37,7 @@
     "gulp-cheerio": "^1.0.0",
     "gulp-cssimport": "^7.0.0",
     "gulp-ext-replace": "^0.3.0",
+    "gulp-if": "^3.0.0",
     "gulp-include": "^2.4.1",
     "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^9.0.0",
@@ -45,7 +46,6 @@
     "gulp-svgmin": "^4.0.1",
     "gulp-uglify": "^3.0.2",
     "gulp-zip": "^5.1.0",
-    "gulp4-run-sequence": "^1.0.1",
     "postcss": "^8.3.6",
     "require-directory": "^2.1.1",
     "sass": "^1.36.0",
@@ -53,5 +53,5 @@
     "vinyl-paths": "^3.0.1",
     "yargs": "^17.0.1"
   },
-  "gitHead": "8291c0aded1f2512ae06efb8843ce5dae5f953a6"
+  "gitHead": "fc7df55c50463311a7eadbf0131e68c448064337"
 }

package/src/commands/deploy.js

@@ -1,25 +1,42 @@
-import spawn from 'cross-spawn';
-import debug from 'debug';
-import config from '../config';
+import spawn from "cross-spawn";
+import debug from "debug";
+import config from "../config";
 
-const logger = debug('slate-tools:deploy');
+const logger = debug("seed-tools:deploy");
 
-export default function(program) {
+export default function (program) {
   program
-    .command('deploy')
-    .alias('d')
-    .description('Runs a full deploy of your theme\'s code to a Shopify store specified in config.yml. Existing files will be overwritten.')
-    .option('-e, --env <environment>[,<environment>...]', 'Shopify store(s) to deploy code to (specified in config.yml - default: development)', 'development')
-    .option('-m, --manual', 'outputs the compiled theme files to <theme>/upload/<theme>.zip for manual deployment')
+    .command("deploy")
+    .alias("d")
+    .description(
+      "Runs a full deploy of your theme's code to a Shopify store specified in seed.config.js. This runs shopify theme push with the --nodelete flag, so that files aren't deleted."
+    )
+    .option(
+      "-e, --env <environment>[,<environment>...]",
+      "Shopify store(s) to deploy code to (specified in seed.config.js)",
+      "development"
+    )
+    .option(
+      "-s, --skip-optimizations",
+      "Skips asset optimization steps such as compression, minification and purging.",
+      false
+    )
     .action((options = {}) => {
       logger(`--gulpfile ${config.gulpFile}`);
       logger(`--cwd ${config.themeRoot}`);
 
-      const args = ['deploy', '--environment', options.env];
+      const args = ["deploy", "--environment", options.env];
 
-      spawn(config.gulp, args.concat(['--gulpfile', config.gulpFile, '--cwd', config.themeRoot]), {
-        detached: false,
-        stdio: 'inherit',
-      });
+      if (options.skipOptimizations) args.push("--skip-optimization");
+      else process.env.NODE_ENV = "production";
+
+      spawn(
+        config.gulp,
+        args.concat(["--gulpfile", config.gulpFile, "--cwd", config.themeRoot]),
+        {
+          detached: false,
+          stdio: "inherit",
+        }
+      );
     });
 }

package/src/commands/watch.js

@@ -15,6 +15,11 @@ export default function (program) {
       "Watches files for code changes and immediately deploys updates to dev theme as they occur. " +
         "This uses shopify theme serve under the hood."
     )
+    .option(
+      "-o, --optimize",
+      "Optimizes assets by compressing, minifying and purging.",
+      false
+    )
     .action((options = {}) => {
       logger(`--gulpfile ${config.gulpFile}`);
       logger(`--cwd ${config.themeRoot}`);
@@ -54,6 +59,11 @@ export default function (program) {
         options.env,
       ];
 
+      if (!options.optimize) 
+        gulpArgs.push("--skip-optimization");
+ 
+      process.env.NODE_ENV = options.optimize ? 'production' : 'development';
+
       spawn(config.gulp, gulpArgs, {
         detached: false,
         stdio: "inherit",

package/src/commands/zip.js

@@ -0,0 +1,27 @@
+import spawn from "cross-spawn";
+import debug from "debug";
+import config from "../config";
+
+const logger = debug("seed-tools:zip");
+
+export default function (program) {
+  program
+    .command("zip")
+    .alias("z")
+    .description(
+      "Rebuilds the theme's source files and compresses the output. The compressed file is written to <theme>/upload/<theme>.zip (can be used for manual upload)."
+    )
+    .action(() => {
+      logger(`--gulpfile ${config.gulpFile}`);
+      logger(`--cwd ${config.themeRoot}`);
+
+      spawn(
+        config.gulp,
+        ["zip", "--gulpfile", config.gulpFile, "--cwd", config.themeRoot],
+        {
+          detached: false,
+          stdio: "inherit",
+        }
+      );
+    });
+}

package/src/config.js

@@ -17,6 +17,8 @@ const config = {
   gulpFile: join(currentDirectory, "gulpfile.js"),
   gulp: existsSync(defaultGulpPath) ? defaultGulpPath : legacyGulpPath,
   themeRoot,
+  seedConfig: join(themeRoot, "seed.config.js"),
+  seedConfigDelimiter: "/** === delimiter */",
 };
 
 export default config;

package/src/gulpfile.js

@@ -1,19 +1,28 @@
-const gulp = require('gulp');
-// const argv = require('yargs').argv;
-const runSequence = require('gulp4-run-sequence');
+const gulp = require("gulp");
 
 // imports gulp tasks from the `tasks` directory
-require('require-directory')(module, './tasks');
+require("require-directory")(module, "./tasks");
 
-gulp.task('build', gulp.series(
-  'clean',
-  gulp.parallel('build:js', 'build:vendor-js', 'build:css', 'build:assets', 'build:svg')
-))
-
-gulp.task('build:zip', gulp.series(
-  'clean',
-  gulp.parallel('build:js', 'build:vendor-js', 'build:css', 'build:assets', 'build:svg')
-))
+/**
+ * Does a full clean/rebuild of your theme
+ *
+ * @function watch
+ * @memberof slate-cli.tasks.watch
+ * @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
@@ -23,25 +32,36 @@ gulp.task('build:zip', gulp.series(
  * @memberof slate-cli.tasks
  * @static
  */
- gulp.task('zip', (done) => {
-  runSequence('build:zip', 'compress', done);
-});
+gulp.task("zip", gulp.series("build", "compress"));
 
+/**
+ * Syncronizes the development theme settings with our src folder theme settings
+ *
+ * @function sync-settings
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+gulp.task(
+  "sync-settings",
+  gulp.series("generate:tmp", "shopify:pull:dev:tmp", "sync-settings:tmp:src")
+);
 
 /**
  * Simple wrapper around src & dist watchers
  *
  * @summary Monitor your codebase for file changes and take the appropriate
- *   action
+ * action
  * @function watch
  * @memberof slate-cli.tasks.watch
  * @static
  */
-gulp.task('watch', gulp.series(
-  'build',
-  gulp.parallel('watch:src', 'watch:dist')
-));
-
+gulp.task(
+  "watch",
+  gulp.series(
+    "build",
+    gulp.parallel("watch:src", "watch:dist", "shopify:serve:dist")
+  )
+);
 
 /**
  * Does a full (re)build followed by a full deploy, cleaning existing files on
@@ -50,12 +70,8 @@ gulp.task('watch', gulp.series(
  *
  * @summary Deploy your built files to the Shopify Store set in
  *   `slate-cli.config`
- * @function deploy:manual
+ * @function deploy
  * @memberof slate-cli.tasks.deploy
  * @static
  */
-gulp.task('deploy', gulp.series(
-  'build',
-  'deploy:dist'
-));
-
+gulp.task("deploy", gulp.series("sync-settings", "build", "shopify:push:dist"));

package/src/tasks/build-css.js

@@ -7,7 +7,6 @@ const chokidar = require('chokidar');
 
 
 const config = require('./includes/config.js');
-// const utils = require('./includes/utilities.js');
 const messages = require('./includes/messages.js');
 
 

package/src/tasks/build-js.js

@@ -1,4 +1,5 @@
 const gulp = require('gulp');
+const gulpif = require('gulp-if');
 const uglify = require('gulp-uglify');
 const include = require('gulp-include');
 const plumber = require('gulp-plumber');
@@ -6,13 +7,13 @@ const chokidar = require('chokidar');
 
 const config = require('./includes/config.js');
 const messages = require('./includes/messages.js');
-// const utils = require('./includes/utilities.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));
 }