@madebyseed/seed-cli-tools 1.0.0 → 1.2.0

package/src/tasks/includes/config.js

@@ -1,15 +1,17 @@
-const join = require('path').join;
-const logger = require('debug')('seed-tools');
-const findRoot = require('find-root');
-const autoprefixer = require('autoprefixer');
-const tailwindcss = require('tailwindcss');
-const argv = require('minimist')(process.argv.slice(2));
+const join = require("path").join;
+const logger = require("debug")("seed-tools");
+const findRoot = require("find-root");
+const autoprefixer = require("autoprefixer");
+const tailwindcss = require("tailwindcss");
+const cssnano = require("cssnano");
+const argv = require("minimist")(process.argv.slice(2));
 const themeRoot = findRoot(process.cwd());
+const tailwindConfig = 'tailwind.config.js'
 
 let pkg = {};
 
 try {
-  pkg = require(join(themeRoot, 'package.json'));
+  pkg = require(join(themeRoot, "package.json"));
 } catch (err) {
   logger(err);
 }
@@ -31,65 +33,89 @@ try {
  * @memberof seed-cli
  * @summary Configuring seed-cli
  *  @prop {String} environment - development | staging | production
- *  @prop {String} tkconfig - path to themekit config file
- *  @prop {String} scssLintConfig - path to scss-lint config file
  *  @prop {String} deployLog - path to deploy log file
  *  @prop {String} src - globs (multi-filename matching patterns) for various source files
+ *  @prop {String} tmp - globs (multi-filename matching patterns) for various tmp files
  *  @prop {Object} dist - paths to relevant folder locations in the distributable directory
  *  @prop {Object} roots - array of "root" (entry point) JS & CSS files
  *  @prop {Object} plugins - configuration objects passed to various plugins used in the task interface
  */
 const config = {
-  environment: argv.enviroment || 'development',
+  environment: argv.environment || "development",
+  optimize: !argv["skip-optimization"],
   themeRoot,
   packageJson: pkg,
 
-  tkConfig: 'config.yml',
-  deployLog: 'deploy.log',
+  tailwindConfig,
+
+  seedConfig: "seed.config.js",
+
 
   src: {
-    root: 'src/',
-    js: 'src/scripts/**/*.{js,js.liquid}',
-    vendorJs: 'src/scripts/vendor/*.js',
-    json: 'src/**/*.json',
-    css: 'src/styles/**/*.{css,scss,scss.liquid}',
-    cssLint: 'src/styles/**/*.{css,scss}',
-    vendorCss: 'src/styles/vendor/*.{css,scss}',
-    assets: 'src/assets/**/*',
-    icons: 'src/icons/**/*.svg',
-    templates: 'src/templates/**/*',
-    snippets: 'src/snippets/*',
-    sections: 'src/sections/*',
-    locales: 'src/locales/*',
-    config: 'src/config/*',
-    layout: 'src/layout/*',
+    root: "src/",
+    js: "src/scripts/**/*.{js,js.liquid}",
+    vendorJs: "src/scripts/vendor/*.js",
+    json: "src/**/*.json",
+    css: "src/styles/**/*.{css,scss,scss.liquid}",
+    cssLint: "src/styles/**/*.{css,scss}",
+    vendorCss: "src/styles/vendor/*.{css,scss}",
+    assets: "src/assets/**/*",
+    icons: "src/icons/**/*.svg",
+    templates: "src/templates/**/*",
+    snippets: "src/snippets/*",
+    sections: "src/sections/*",
+    locales: "src/locales/*",
+    config: "src/config/*",
+    layout: "src/layout/*",
+  },
+
+  tmp: {
+    root: "tmp/",
+    js: "tmp/scripts/**/*.{js,js.liquid}",
+    vendorJs: "tmp/scripts/vendor/*.js",
+    json: "tmp/**/*.json",
+    css: "tmp/styles/**/*.{css,scss,scss.liquid}",
+    cssLint: "tmp/styles/**/*.{css,scss}",
+    vendorCss: "tmp/styles/vendor/*.{css,scss}",
+    assets: "tmp/assets/**/*",
+    icons: "tmp/icons/**/*.svg",
+    templates: "tmp/templates/**/*",
+    snippets: "tmp/snippets/*",
+    sections: "tmp/sections/*",
+    locales: "tmp/locales/*",
+    config: "tmp/config/*",
+    layout: "tmp/layout/*",
   },
 
   dist: {
-    root: 'dist/',
-    assets: 'dist/assets/',
-    snippets: 'dist/snippets/',
-    sections: 'dist/sections/',
-    layout: 'dist/layout/',
-    templates: 'dist/templates/',
-    locales: 'dist/locales/',
+    root: "dist/",
+    assets: "dist/assets/",
+    snippets: "dist/snippets/",
+    sections: "dist/sections/",
+    layout: "dist/layout/",
+    templates: "dist/templates/",
+    locales: "dist/locales/",
   },
 
   roots: {
-    js: 'src/scripts/*.{js,js.liquid}',
-    vendorJs: 'src/scripts/vendor.js',
-    css: 'src/styles/*.{css,scss}',
+    js: "src/scripts/*.{js,js.liquid}",
+    vendorJs: "src/scripts/vendor.js",
+    css: "src/styles/*.{css,scss}",
   },
 
   plugins: {
     cheerio: {
-      run: require('./utilities.js').processSvg,
+      run: require("./utilities.js").processSvg,
     },
     postcss: [
-      tailwindcss({ config: join(themeRoot, 'tailwind.config.js')}),
-      autoprefixer(), 
-    ]
+      tailwindcss({ config: join(themeRoot, tailwindConfig) }),
+      autoprefixer(),
+    ],
   },
 };
 
+if (config.optimize) {
+  config.plugins.postcss.push((cssnano({ preset: "default" })))
+}
+
 module.exports = config;

package/src/tasks/includes/utilities.js

@@ -1,9 +1,7 @@
 const chalk = require("chalk");
 const log = require("fancy-log");
-const _ = require('lodash');
-const Promise = require('bluebird');
-const { shopifyCLI } = require("../../utils");
-
+const _ = require("lodash");
+const Promise = require("bluebird");
 
 let errors = [];
 
@@ -15,28 +13,6 @@ let errors = [];
  * @memberof seed-cli
  */
 const utilities = {
-
-  /**
-   * Launches shopify theme serve command to serve files on ./dist folder
-   * 
-   * @memberof seed-cli.utilities
-   * @returns {object} - ChildProcess
-   */
-  serveDist: () => {
-    return shopifyCLI.serve();
-  },
-
-  /**
-   * Launches shopify theme push command to deploy files on ./dist folder
-   * to a store's theme
-   * 
-   * @memberof seed-cli.utilities
-   * @returns {object} - ChildProcess
-   */
-    deployDist: () => {
-      return shopifyCLI.push();
-    },
-
   /**
    * Handles the output for any errors that might have been captured
    * during the build and zip Gulp tasks.
@@ -68,7 +44,7 @@ const utilities = {
     log(chalk.red(err));
     errors.push(err);
 
-    this.emit('end');
+    this.emit("end");
   },
 
   /**
@@ -84,7 +60,9 @@ const utilities = {
       const result = factory();
       results.push(result);
       return result;
-    }).thenReturn(results).all();
+    })
+      .thenReturn(results)
+      .all();
   },
 
   /**
@@ -96,30 +74,30 @@ const utilities = {
    * @param {fs} file - reference to current icon file?
    */
   processSvg: ($, file) => {
-    var $svg = $('svg'); // eslint-disable-line no-var
-    var $newSvg = $('<svg aria-hidden="true" focusable="false" role="presentation" class="icon" />'); // eslint-disable-line no-var
-    var fileName = file.relative.replace('.svg', ''); // eslint-disable-line no-var
-    var viewBoxAttr = $svg.attr('viewbox'); // eslint-disable-line no-var
+    var $svg = $("svg"); // eslint-disable-line no-var
+    var $newSvg = $(
+      '<svg aria-hidden="true" focusable="false" role="presentation" class="icon" />'
+    ); // eslint-disable-line no-var
+    var fileName = file.relative.replace(".svg", ""); // eslint-disable-line no-var
+    var viewBoxAttr = $svg.attr("viewbox"); // eslint-disable-line no-var
 
     // Add necessary attributes
     if (viewBoxAttr) {
-      var width = parseInt(viewBoxAttr.split(' ')[2], 10); // eslint-disable-line no-var
-      var height = parseInt(viewBoxAttr.split(' ')[3], 10); // eslint-disable-line no-var
+      var width = parseInt(viewBoxAttr.split(" ")[2], 10); // eslint-disable-line no-var
+      var height = parseInt(viewBoxAttr.split(" ")[3], 10); // eslint-disable-line no-var
       var widthToHeightRatio = width / height; // eslint-disable-line no-var
       if (widthToHeightRatio >= 1.5) {
-        $newSvg.addClass('icon--wide');
+        $newSvg.addClass("icon--wide");
       }
-      $newSvg.attr('viewBox', viewBoxAttr);
+      $newSvg.attr("viewBox", viewBoxAttr);
     }
 
     // Add required classes to full color icons
-    if (file.relative.indexOf('-full-color') >= 0) {
-      $newSvg.addClass('icon--full-color');
+    if (file.relative.indexOf("-full-color") >= 0) {
+      $newSvg.addClass("icon--full-color");
     }
 
-    $newSvg
-      .addClass(fileName)
-      .append($svg.contents());
+    $newSvg.addClass(fileName).append($svg.contents());
 
     $newSvg.append($svg.contents());
     $svg.after($newSvg);
@@ -135,9 +113,10 @@ const utilities = {
    * @returns {eventCache} see type definition for more robust documentation
    */
   createEventCache: (options) => {
-    _.defaults(options = options || {}, { // eslint-disable-line no-param-reassign
-      changeEvents: ['add', 'change'],
-      unlinkEvents: ['unlink'],
+    _.defaults((options = options || {}), {
+      // eslint-disable-line no-param-reassign
+      changeEvents: ["add", "change"],
+      unlinkEvents: ["unlink"],
     });
 
     /**
@@ -162,7 +141,7 @@ const utilities = {
        * @param {String} event - chokidar event type - only cares about `(add|change|unlink)`
        * @param {String} path - relative path to file passed via event
        */
-      addEvent: function(event, path) { 
+      addEvent: function (event, path) {
         _.each(options.changeEvents, (eventType) => {
           if (event === eventType) {
             this.change.push(path);

package/src/tasks/shopify-cli.js

@@ -0,0 +1,96 @@
+const gulp = require("gulp");
+// const path = require("path");
+const {
+  shopifyCLI,
+  extractThemeId,
+  logChildProcessOutput,
+  getDevThemeID,
+  setDevThemeID,
+  getThemeID,
+} = require("../utils");
+const config = require("./includes/config");
+
+/**
+ * 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", () => {
+  console.log("Running Shopify theme serve...");
+  const 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", (done) => {
+  const 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", (done) => {
+  const 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", () => {
+  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", (data) => {
+    const devThemeId = extractThemeId(data.toString());
+    const 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/src/tasks/watchers.js

@@ -1,19 +1,18 @@
-// const { yellow } = require('chalk');
-const gulp = require('gulp');
+const gulp = require("gulp");
+const config = require("./includes/config");
+const chokidar = require("chokidar");
+const 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');
-const utils = require('./includes/utilities.js');
-// const messages = require('./includes/messages.js');
+const messages = require("./includes/messages.js");
 
-// const cache = utils.createEventCache();
+const cache = utils.createEventCache();
 // const environment = config.environment.split(/\s*,\s*|\s+/)[0];
 
 /**
@@ -25,24 +24,26 @@ const utils = require('./includes/utilities.js');
  * @memberof seed-cli.tasks.watch
  * @static
  */
-gulp.task('watch:src', () => {
-  return gulp.parallel(
-    'watch:css',
-    'watch:js',
-    'watch:assets',
-    'watch:svg'
-    )()
+gulp.task("watch:src", () => {
+  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', () => {
-  console.log("Running Shopify theme serve...")
-  return utils.serveDist();
-})
+gulp.task("watch:dist", () => {
+  const watcher = chokidar.watch(["./"], {
+    cwd: config.dist.root,
+    ignored: /(^|[/\\])\../,
+    ignoreInitial: true,
+  });
+
+  watcher.on("all", (event, path) => {
+    messages.logFileEvent(event, path);
+    cache.addEvent(event, path);
+  });
+});

package/src/utils.js

@@ -1,6 +1,7 @@
-import spawn from "cross-spawn"; 
+import spawn from "cross-spawn";
 import { join } from "path";
-import config from "./config"
+import { readFileSync, writeFileSync } from "fs";
+import config from "./config";
 
 /**
  * Wrappers for Shopify CLI commands
@@ -10,81 +11,150 @@ import config from "./config"
  * @memberof seed-cli
  */
 export const 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: (store, async = false) => {
-    const args = ['login', '--store', store];
+    const args = ["login", "--store", store];
     const options = {
       env: process.env,
       stdio: "inherit",
       shell: true,
-    }
-  
-    if (async) 
-      return spawn('shopify', args, options);
-    else 
-      return spawn.sync('shopify', args, options);
+    };
+
+    if (async) return spawn("shopify", args, options);
+    else return spawn.sync("shopify", args, options);
   },
 
   /**
    * shopify theme serve
-   * 
+   *
    * @memberof seed-cli.shopifyCLI
    * @returns {object} - node's ChildProcess
    */
-  serve: () => {
-    return spawn('shopify theme', ['serve'], {
-      cwd: config.themeRoot + '/dist',
+  serve: (options = {}) => {
+    return spawn("shopify theme", ["serve"], {
+      cwd: config.themeRoot + "/dist",
       env: process.env,
       stdio: "inherit",
       shell: true,
-    })
+      ...options,
+    });
   },
 
   /**
    * shopify theme push
-   * 
+   *
    * @memberof seed-cli.shopifyCLI
    * @returns {object} - node's ChildProcess
    */
-  push: () => {
-    return spawn('shopify theme', ['push'], {
-      cwd: config.themeRoot + '/dist',
+  pull: (themeId = null, dir = "./src") => {
+    let args = ["pull"];
+    if (themeId) args = args.concat(["--themeid", themeId, dir]);
+
+    return spawn("shopify theme", args, {
       env: process.env,
       stdio: "inherit",
       shell: true,
-    })
-  }
-}
+    });
+  },
+
+  /**
+   * shopify theme push
+   *
+   * @memberof seed-cli.shopifyCLI
+   * @returns {object} - node's ChildProcess
+   */
+  push: (themeId = null) => {
+    let args = ["push", "--nodelete"];
+    if (themeId) args = args.concat(["--themeid", themeId]);
+
+    return spawn("shopify theme", args, {
+      cwd: config.themeRoot + "/dist",
+      env: process.env,
+      stdio: "inherit",
+      shell: true,
+    });
+  },
+};
 
 /**
  * Get seed.config.js from project root dir
- * 
+ *
  * @param {string} themeRoot - the path to theme root dir
  */
 export function getSeedConfig(themeRoot) {
-  return require(join(themeRoot, 'seed.config.js'));
+  return require(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
  */
 export 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
+ */
+export 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
+ */
+export 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
+ */
+export function extractThemeId(string) {
+  const regex = /\d{12}/;
+  const 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
+ */
+export function logChildProcessOutput(process) {
+  process.stdout.on("data", (data) => {
+    console.log(data);
+  });
+}
 
-
+/**
+ * Writes the development theme ID as a key to seed config file
+ *
+ * @param {string} themeID - development theme ID
+ */
+export function setDevThemeID(themeID) {
+  let data = readFileSync(config.seedConfig, { encoding: "utf8" });
+  data = data.split(config.seedConfigDelimiter);
+  data[1] = `\n  developmentThemeId: '${themeID}'` + "\n};";
+  writeFileSync(config.seedConfig, data.join(config.seedConfigDelimiter));
+}

package/lib/tasks/deploy.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var gulp = require('gulp');
-
-var utils = require('./includes/utilities.js');
-/**
- * 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('deploy:dist', function () {
-  console.log("Running Shopify theme push on ./dist...");
-  return utils.deployDist();
-});

package/src/tasks/deploy.js

@@ -1,15 +0,0 @@
-const gulp = require('gulp');
-const utils = require('./includes/utilities.js');
-
-/**
- * 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('deploy:dist', () => {
-  console.log("Running Shopify theme push on ./dist...")
-  return utils.deployDist();
-})