@madebyseed/seed-cli-tools 1.0.1 → 1.2.1

package/src/tasks/build-utils.js

@@ -1,11 +1,42 @@
-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 gulpif = require("gulp-if");
+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 messages = require("./includes/messages.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, log = false) {
+  return gulp.src(files, srcOptions)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(gulpif(log, size({ showFiles: true, pretty: true })))
+    .pipe(gulp.dest(dest));
+}
 
 /**
  * Clean up build dirs/files whenever doing a full/clean (re)build.
@@ -14,8 +45,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 +56,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", () => {
+  messages.logProcessFiles('Generating tmp folder...')
+  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
+  );
 });

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-optimizations"],
   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/messages.js

@@ -52,7 +52,7 @@ const messages = {
     log('running task',
       chalk.bold('[child process]'),
       chalk.white('-'),
-      chalk.cyan('theme', cmd),
+      chalk.cyan(cmd),
     );
   },
 
@@ -80,8 +80,8 @@ const messages = {
   },
 
   configChange: () => {
-    return 'Changes to ThemeKit Config Detected: You may need to quit <slate watch>' +
-      ' and run a full <slate deploy> as a result.';
+    return 'Changes to seed.config.js Detected: You may need to quit <seed watch>' +
+      ' and run a full <seed deploy> as a result.';
   },
 
   translationsFailed: () => {
@@ -91,13 +91,13 @@ const messages = {
   invalidThemeId: (themeId, env) => {
     log('Invalid theme id for',
       chalk.cyan(`${env}: ${themeId}`),
-      chalk.yellow('`theme_id` must be an integer or "live".'),
+      chalk.yellow('`theme_id` must be a string.'),
     );
   },
 
   configError: () => {
     log('File missing:',
-      chalk.yellow('`config.yml` does not exist. You need to add a config file before you can make changes to your Shopify store.'),
+      chalk.yellow('`seed.config.js` does not exist. You need to add a config file before you can make changes to your Shopify store.'),
     );
   },
 

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,100 @@
+const gulp = require("gulp");
+
+const {
+  shopifyCLI,
+  extractThemeId,
+  logChildProcessOutput,
+  getDevThemeID,
+  setDevThemeID,
+  getThemeID,
+} = require("../utils");
+const config = require("./includes/config");
+const 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", () => {
+  messages.logChildProcess("'shopify theme serve' on dist...");
+  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) => {
+  messages.logChildProcess("'shopify theme pull' on development theme...");
+  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) => {
+  messages.logChildProcess("'shopify theme pull' on tmp folder...");
+  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", () => {
+  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", (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,20 +1,12 @@
-// const { yellow } = require('chalk');
-const 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 gulp = require("gulp");
+const config = require("./includes/config");
+const chokidar = require("chokidar");
+const utils = require("./includes/utilities");
 
+const messages = require("./includes/messages.js");
 
-// const config = require('./includes/config.js');
-const utils = require('./includes/utilities.js');
-// const messages = require('./includes/messages.js');
-
-// const cache = utils.createEventCache();
-// const environment = config.environment.split(/\s*,\s*|\s+/)[0];
+const environment = config.environment.split(/\s*,\s*|\s+/)[0];
+const cache = utils.createEventCache();
 
 /**
  * Aggregate task watching for file changes in `src` and
@@ -25,24 +17,27 @@ 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);
+    messages.deployTo(environment);
+  });
+});