@madebyseed/seed-cli-tools 1.0.0 → 1.2.0

package/lib/tasks/watchers.js

@@ -1,19 +1,23 @@
 "use strict";
 
-// const { yellow } = require('chalk');
-var gulp = require('gulp'); // const runSequence = require('gulp4-run-sequence');
+var gulp = require("gulp");
+
+var config = require("./includes/config");
+
+var chokidar = require("chokidar");
+
+var utils = require("./includes/utilities"); // 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 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 messages = require("./includes/messages.js");
+
+var cache = utils.createEventCache(); // const environment = config.environment.split(/\s*,\s*|\s+/)[0];
 
 /**
  * Aggregate task watching for file changes in `src` and
@@ -25,20 +29,25 @@ 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);
+  });
 });

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.0",
+  "version": "1.2.0",
   "description": "Seed CLI Tools",
   "main": "index.js",
   "scripts": {
@@ -28,6 +28,7 @@
     "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 +38,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",

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 remove files aren't deleted."
+    )
+    .option(
+      "-e, --env <environment>[,<environment>...]",
+      "Shopify store(s) to deploy code to (specified in seed.config.js - default: development)",
+      "development"
+    )
+    .option(
+      "-s, --skip-optimization",
+      "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.skipOptimization) 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,30 @@
-const gulp = require('gulp');
+const gulp = require("gulp");
 // const argv = require('yargs').argv;
-const runSequence = require('gulp4-run-sequence');
+// const runSequence = require("gulp4-run-sequence");
 
 // 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 +34,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 +72,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-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));
 }
 

package/src/tasks/build-utils.js

@@ -1,11 +1,46 @@
-const gulp = require('gulp');
-const del = require('del');
-const zip = require('gulp-zip');
-const size = require('gulp-size');
-const plumber = require('gulp-plumber');
+const gulp = require("gulp");
+const del = require("del");
+const zip = require("gulp-zip");
+const size = require("gulp-size");
+const plumber = require("gulp-plumber");
 
-const config = require('./includes/config.js');
-const utils = require('./includes/utilities.js');
+const config = require("./includes/config.js");
+const utils = require("./includes/utilities.js");
+
+const assetsPaths = [
+  config.src.assets,
+  config.src.templates,
+  config.src.sections,
+  config.src.snippets,
+  config.src.locales,
+  config.src.config,
+  config.src.layout,
+];
+
+const themeSettingsAssets = [config.tmp.templates, config.tmp.config];
+
+/**
+ * Copies files from one fold to another, creating a new dir if doesn't exists and
+ * overwriting if it does exist
+ *
+ * @param {Array} files - files to copy
+ * @param {Object} srcOptions - second param for gulp.src function
+ * @param {String} dest - destination dir
+ * @returns {Stream}
+ * @private
+ */
+function copyFiles(files, srcOptions, dest) {
+  return gulp
+    .src(files, srcOptions)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(
+      size({
+        showFiles: true,
+        pretty: true,
+      })
+    )
+    .pipe(gulp.dest(dest));
+}
 
 /**
  * Clean up build dirs/files whenever doing a full/clean (re)build.
@@ -14,8 +49,8 @@ const utils = require('./includes/utilities.js');
  * @memberof slate-cli.tasks.build
  * @static
  */
-gulp.task('clean', () => {
-  return del(['upload', 'dist']);
+gulp.task("clean", () => {
+  return del(["upload", "dist", "tmp"]);
 });
 
 /**
@@ -25,13 +60,39 @@ gulp.task('clean', () => {
  * @memberof slate-cli.tasks.deploy
  * @static
  */
-gulp.task('compress', () => {
+gulp.task("compress", () => {
   const distFiles = `${config.dist.root}**/*`;
-  const ignoreConfig = `!${config.dist.root}config.yml`;
 
-  return gulp.src([distFiles, ignoreConfig])
+  return gulp
+    .src([distFiles])
     .pipe(plumber(utils.errorHandler))
-    .pipe(zip(`${config.packageJson.name}.zip` || 'theme.zip'))
-    .pipe(size({showFiles: true, pretty: true}))
-    .pipe(gulp.dest('./upload/'));
+    .pipe(zip(`${config.packageJson.name}.zip` || "theme.zip"))
+    .pipe(size({ showFiles: true, pretty: true }))
+    .pipe(gulp.dest("./upload/"));
+});
+
+/**
+ * Duplicates /src directory into a /tmp directory
+ *
+ * @function generate:tmp
+ * @memberof seed-cli.tasks.sync-settings
+ * @static
+ */
+gulp.task("generate:tmp", () => {
+  return copyFiles(assetsPaths, { base: config.src.root }, config.tmp.root);
+});
+
+/**
+ * Syncronizes the theme settings of /tmp directory into our src directory
+ *
+ * @function sync-settings:tmp:src
+ * @memberof seed-cli.tasks.sync-settings
+ * @static
+ */
+gulp.task("sync-settings:tmp:src", () => {
+  return copyFiles(
+    themeSettingsAssets,
+    { base: config.tmp.root },
+    config.src.root
+  );
 });