@madebyseed/seed-cli-tools 1.0.0

package/src/tasks/build-assets.js

@@ -0,0 +1,93 @@
+const gulp = require('gulp');
+const plumber = require('gulp-plumber');
+const chokidar = require('chokidar');
+const vinylPaths = require('vinyl-paths');
+const del = require('del');
+const size = require('gulp-size');
+
+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,
+];
+
+/**
+ * Copies assets to the `/dist` directory
+ *
+ * @param {Array} files
+ * @returns {Stream}
+ * @private
+ */
+function processAssets(files) {
+  messages.logProcessFiles('build:assets');
+  return gulp.src(files, {base: config.src.root})
+    .pipe(plumber(utils.errorHandler))
+    .pipe(size({
+      showFiles: true,
+      pretty: true,
+    }))
+    .pipe(gulp.dest(config.dist.root));
+}
+
+/**
+ * Deletes specified files
+ *
+ * @param {Array} files
+ * @returns {Stream}
+ * @private
+ */
+function removeAssets(files) {
+  messages.logProcessFiles('remove:assets');
+
+  const mapFiles = files.map((file) => {
+    const distFile = file.replace(config.src.root, config.dist.root);
+    return distFile;
+  });
+
+  return gulp.src(mapFiles)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(vinylPaths(del))
+    .pipe(size({
+      showFiles: true,
+      pretty: true,
+    }));
+}
+
+/**
+ * Copies assets to the `/dist` directory
+ *
+ * @function build:assets
+ * @memberof seed-cli.tasks.build
+ * @static
+ */
+gulp.task('build:assets', () => {
+  return processAssets(assetsPaths);
+});
+
+/**
+ * Watches assets in the `/src` directory
+ *
+ * @function watch:assets
+ * @memberof seed-cli.tasks.watch
+ * @static
+ */
+gulp.task('watch:assets', () => {
+  const eventCache = utils.createEventCache();
+
+  chokidar.watch(assetsPaths, {
+    ignored: /(^|[/\\])\../,
+    ignoreInitial: true,
+  }).on('all', (event, path) => {
+    messages.logFileEvent(event, path);
+    eventCache.addEvent(event, path);
+    utils.processCache(eventCache, processAssets, removeAssets);
+  });
+});

package/src/tasks/build-css.js

@@ -0,0 +1,54 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+const postcss = require('gulp-postcss');
+const cssimport = require('gulp-cssimport');
+const plumber = require('gulp-plumber');
+const chokidar = require('chokidar');
+
+
+const config = require('./includes/config.js');
+// const utils = require('./includes/utilities.js');
+const messages = require('./includes/messages.js');
+
+
+/**
+ * Concatenate css via gulp-cssimport and copys to the `/dist` folder
+ *
+ * @param {Array} files
+ * @returns {Stream}
+ * @private
+ */
+function processCss() {
+  return gulp.src(config.roots.css)
+    .pipe(plumber())
+    .pipe(sass().on('error', sass.logError))
+    .pipe(postcss(config.plugins.postcss))
+    .pipe(cssimport())
+    .pipe(gulp.dest(config.dist.assets));
+}
+
+/**
+ * Concatenate css via gulp-cssimport
+ *
+ * @function build:css
+ * @memberof seed-cli.tasks.build
+ * @static
+ */
+gulp.task('build:css', () => {
+  return processCss();
+});
+
+/**
+ * Watches css in the `/src` directory
+ *
+ * @function watch:css
+ * @memberof seed-cli.tasks.watch
+ * @static
+ */
+gulp.task('watch:css', () => {
+  chokidar.watch(config.src.css, {ignoreInitial: true})
+    .on('all', (event, path) => {
+      messages.logFileEvent(event, path)
+      processCss();
+    });
+});

package/src/tasks/build-js.js

@@ -0,0 +1,53 @@
+const gulp = require('gulp');
+const uglify = require('gulp-uglify');
+const include = require('gulp-include');
+const plumber = require('gulp-plumber');
+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(gulp.dest(config.dist.assets));
+}
+
+function processVendorJs() {
+  messages.logProcessFiles('build:vendor-js');
+  return gulp.src(config.roots.vendorJs)
+    .pipe(plumber())
+    .pipe(include())
+    .pipe(uglify({
+      mangle: true,
+      compress: true,
+    }))
+    .pipe(gulp.dest(config.dist.assets));
+}
+
+gulp.task('build:js', () => {
+  return processThemeJs();
+});
+
+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();
+    });
+});
+
+gulp.task('build:vendor-js', () => {
+  return processVendorJs();
+});
+
+gulp.task('watch:vendor-js', () => {
+  chokidar.watch([config.roots.vendorJs, config.src.vendorJs], {ignoreInitial: true})
+    .on('all', (event, path) => {
+      messages.logFileEvent(event, path);
+      processVendorJs();
+    });
+});

package/src/tasks/build-svg.js

@@ -0,0 +1,89 @@
+const gulp = require('gulp');
+const vinylPaths = require('vinyl-paths');
+const del = require('del');
+const size = require('gulp-size');
+const chokidar = require('chokidar');
+const svgmin = require('gulp-svgmin');
+const cheerio = require('gulp-cheerio');
+const extReplace = require('gulp-ext-replace');
+const plumber = require('gulp-plumber');
+
+const config = require('./includes/config.js');
+const utils = require('./includes/utilities.js');
+const messages = require('./includes/messages.js');
+
+/**
+ * Processing for SVGs prior to deployment - adds accessibility markup, and converts
+ * the file to a liquid snippet.
+ *
+ * @param {String|Array} files - glob/array of files to match & send to the stream
+ * @returns {Stream}
+ * @private
+ */
+function processIcons(files) {
+  messages.logProcessFiles('build:svg');
+  return gulp.src(files)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(svgmin())
+    .pipe(cheerio(config.plugins.cheerio))
+    .pipe(extReplace('.liquid'))
+    .pipe(size({
+      showFiles: true,
+      pretty: true,
+    }))
+    .pipe(gulp.dest(config.dist.snippets));
+}
+
+/**
+ * Cleanup/remove liquid snippets from the `dist` directory during watch tasks if
+ * any underlying SVG files in the `src` folder have been removed.
+ *
+ * @param {String|Array} files - glob/array of files to match & send to the stream
+ * @returns {Stream}
+ * @private
+ */
+function removeIcons(files) {
+  messages.logProcessFiles('remove:svg');
+  const mapFiles = files.map((file) => {
+    const distFile = file.replace('src/icons', 'dist/snippets');
+    const snippetFile = distFile.replace('.svg', '.liquid');
+    return snippetFile;
+  });
+
+  return gulp.src(mapFiles)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(vinylPaths(del))
+    .pipe(size({
+      showFiles: true,
+      pretty: true,
+    }));
+}
+
+/**
+ * Pre-processing for svg icons
+ *
+ * @function build:svg
+ * @memberof slate-cli.tasks.build
+ * @static
+ */
+gulp.task('build:svg', () => {
+  return processIcons(config.src.icons);
+});
+
+/**
+ * Watches source svg icons for changes...
+ *
+ * @function watch:svg
+ * @memberof slate-cli.tasks.watch
+ * @static
+ */
+gulp.task('watch:svg', () => {
+  const cache = utils.createEventCache();
+
+  chokidar.watch([config.src.icons], {ignoreInitial: true})
+    .on('all', (event, path) => {
+      messages.logFileEvent(event, path);
+      cache.addEvent(event, path);
+      utils.processCache(cache, processIcons, removeIcons);
+    });
+});

package/src/tasks/build-utils.js

@@ -0,0 +1,37 @@
+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');
+
+/**
+ * Clean up build dirs/files whenever doing a full/clean (re)build.
+ *
+ * @function build:clean
+ * @memberof slate-cli.tasks.build
+ * @static
+ */
+gulp.task('clean', () => {
+  return del(['upload', 'dist']);
+});
+
+/**
+ * Compress theme and build a shopify-compatible `.zip` file for uploading to store
+ *
+ * @function compress
+ * @memberof slate-cli.tasks.deploy
+ * @static
+ */
+gulp.task('compress', () => {
+  const distFiles = `${config.dist.root}**/*`;
+  const ignoreConfig = `!${config.dist.root}config.yml`;
+
+  return gulp.src([distFiles, ignoreConfig])
+    .pipe(plumber(utils.errorHandler))
+    .pipe(zip(`${config.packageJson.name}.zip` || 'theme.zip'))
+    .pipe(size({showFiles: true, pretty: true}))
+    .pipe(gulp.dest('./upload/'));
+});

package/src/tasks/deploy.js

@@ -0,0 +1,15 @@
+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();
+})

package/src/tasks/includes/config.js

@@ -0,0 +1,95 @@
+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 themeRoot = findRoot(process.cwd());
+
+let pkg = {};
+
+try {
+  pkg = require(join(themeRoot, 'package.json'));
+} catch (err) {
+  logger(err);
+}
+
+/**
+ * seed-cli configuration object
+ * ## Markdown stuff
+ *
+ * It's a big description written in `markdown`
+ *
+ * Example:
+ *
+ * ```javascript
+ * $('something')
+ *   .something(else);
+ * ```
+ *
+ * @namespace config
+ * @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 {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',
+  themeRoot,
+  packageJson: pkg,
+
+  tkConfig: 'config.yml',
+  deployLog: 'deploy.log',
+
+  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/*',
+  },
+
+  dist: {
+    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}',
+  },
+
+  plugins: {
+    cheerio: {
+      run: require('./utilities.js').processSvg,
+    },
+    postcss: [
+      tailwindcss({ config: join(themeRoot, 'tailwind.config.js')}),
+      autoprefixer(), 
+    ]
+  },
+};
+
+module.exports = config;

package/src/tasks/includes/messages.js

@@ -0,0 +1,116 @@
+const chalk = require("chalk");
+const log = require("fancy-log");
+
+/**
+ * Separates filename and directory from a path string. Returns an object containing both.
+ *
+ * @param path {String} - a string representing the path to a file
+ * @returns {Object} - an object with separated `file` (the filename) and `dir` (path minus filename) properties
+ * @private
+ */
+function separatePath(path) {
+  const tmp = path.split('/');
+
+  return {
+    file: tmp.pop(),
+    dir: tmp.join('/'),
+  };
+}
+
+const messages = {
+  logFileEvent: (event, path) => {
+    const pathObject = separatePath(path);
+
+    log('change in',
+      chalk.magenta(pathObject.dir),
+      chalk.white('-'),
+      chalk.cyan(event),
+      chalk.yellow(pathObject.file),
+    );
+  },
+
+  logTransferDone: () => {
+    log('Transfer Complete:',
+      chalk.green('File changes successfully synced to store'),
+    );
+  },
+
+  logTransferFailed: (errMsg) => {
+    log('Transfer Failed:',
+      chalk.yellow(`${typeof errMsg === 'string' ? errMsg : 'File(s) failed to upload to store. See log notes in deploy.log'}`),
+    );
+  },
+
+  logProcessFiles: (processName) => {
+    log('running task',
+      chalk.white('-'),
+      chalk.cyan(processName),
+    );
+  },
+
+  logChildProcess: (cmd) => {
+    log('running task',
+      chalk.bold('[child process]'),
+      chalk.white('-'),
+      chalk.cyan('theme', cmd),
+    );
+  },
+
+  logDeploys: (cmd, files) => {
+    const timestamp = `Deploy complete @ ${new Date()}. `;
+    const action = cmd === 'upload' ? 'added/changed ' : 'removed ';
+    const amount = `${files.length} file(s): `;
+    const fileList = `${files.join(', ')}.\n`;
+
+    return timestamp + action + amount + fileList;
+  },
+
+  logDeployErrors: (cmd, files, err) => {
+    const timestamp = `Deploy error @ ${new Date()}. `;
+    const action = cmd === 'upload' ? 'added/changed ' : 'removed ';
+    const amount = `${files.length} file(s): `;
+    const fileList = `${files.join(', ')}.\n`;
+    const errMsg = `${err} \n`;
+
+    return timestamp + action + amount + fileList + errMsg;
+  },
+
+  logBundleJs: () => {
+    log('Updating JS Bundle...');
+  },
+
+  configChange: () => {
+    return 'Changes to ThemeKit Config Detected: You may need to quit <slate watch>' +
+      ' and run a full <slate deploy> as a result.';
+  },
+
+  translationsFailed: () => {
+    return 'Translation errors detected.';
+  },
+
+  invalidThemeId: (themeId, env) => {
+    log('Invalid theme id for',
+      chalk.cyan(`${env}: ${themeId}`),
+      chalk.yellow('`theme_id` must be an integer or "live".'),
+    );
+  },
+
+  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.'),
+    );
+  },
+
+  deployTo: (environment) => {
+    log('Initiating deploy to', chalk.bold(environment));
+  },
+
+  allDeploysComplete: () => {
+    log('Multiple environments:',
+      chalk.green('Deploy completed for all environments in series'),
+    );
+  },
+
+};
+
+module.exports = messages;