claycli compilation (#85)

* font compilation first pass

* added logging and watch functionality

* added media compilation

* added multi-command build + watch

* added style compilation

* better error messaging for custom plugins

* add styles to root command

* template compilation

* add sites back to media compilation

* added alphabetical-based bucket

* add template bundling

* run media task before templates

* testing script compilation first pass

* testing more script compilation issues

* client dependencies

* model compilation, too large

* client and model compilation, watching

* underscore ids.json and registry.json

* added kiln plugin compilation

* compile legacy js

* command-specific minification via env variables

* fixed legacy script compilation

* not working

* instantiate legacy and controller modules on page load

* compile kiln vue stuff with postcss

* watch kiln

* only recompile browserified things

* use folder and file name for kiln plugin IDs

* compile layout model.js and client.js

* reorder subcommands in order of increasing complexity

* auto-remove trailing slash from asset host

* added docs

* update code for highland 2.x, add test

* update docs

* updated docs and whatnot based on byron's feedback

Author: nelsonpecora

README.md

@@ -34,18 +34,50 @@ module.exports = {
     requiresArg: true
   },
   publish: {
-    alias: 'publish', // -p, --publish
+    alias: 'publish', // -p, --publish (note: -p is also used when compiling css with plugins)
     describe: 'publish items when importing',
     type: 'boolean'
   },
   layout: {
-    alias: 'layout', // -l, --layout
+    alias: 'layout', // -l, --layout (note: -l is also used when compiling fonts)
     describe: 'export layout when exporting page(s)',
     type: 'boolean'
   },
   yaml: {
     alias: 'yaml', // -y, --yaml
     describe: 'parse bootstrap format',
     type: 'boolean'
+  },
+  // compilation options
+  minify: {
+    alias: 'minify', // -m, --minify
+    describe: 'run through minification',
+    type: 'boolean'
+  },
+  watch: {
+    alias: 'watch', // -w, --watch
+    describe: 'watch files and recompile on changes',
+    type: 'boolean'
+  },
+  inlined: {
+    alias: 'inlined', // -i, --inlined
+    describe: 'compile base64 inlined fonts',
+    type: 'boolean'
+  },
+  linked: {
+    alias: 'linked', // -l, --linked (note: -l is also used when exporting layouts)
+    describe: 'compile linked fonts',
+    type: 'boolean',
+    default: undefined // will be undefined if unset
+  },
+  plugins: {
+    alias: 'plugins', // -p, --plugins (note: -p is also used when publishing imports)
+    describe: 'space-separated list of postcss plugins',
+    type: 'array'
+  },
+  globs: {
+    alias: 'globs', // -g, --globs
+    describe: 'globbing patterns of legacy js to compile to _global.js',
+    type: 'array'
   }
 };

cli/cli-options.js

@@ -0,0 +1,55 @@
+'use strict';
+const pluralize = require('pluralize'),
+  compile = require('../../lib/cmd/compile'),
+  options = require('../cli-options'),
+  reporter = require('../../lib/reporters'),
+  helpers = require('../../lib/compilation-helpers');
+
+function builder(yargs) {
+  return yargs
+    .usage('Usage: $0 fonts')
+    .example('$0 fonts', 'compile linked fonts')
+    .example('$0 fonts --watch', 'compile and watch linked fonts')
+    .example('$0 fonts --inlined --linked', 'compile inlined and linked fonts')
+    .option('w', options.watch)
+    .option('m', options.minify)
+    .option('i', options.inlined)
+    .option('l', options.linked)
+    .option('r', options.reporter);
+}
+
+function handler(argv) {
+  const t1 = Date.now(),
+    compiled = compile.fonts({
+      watch: argv.watch,
+      minify: argv.minify,
+      inlined: argv.inlined,
+      linked: argv.linked
+    });
+
+  return compiled.build
+    .map(reporter.logAction(argv.reporter, 'fonts'))
+    .toArray((results) => {
+      const t2 = Date.now();
+
+      reporter.logSummary(argv.reporter, 'fonts', (successes) => {
+        let message = `Compiled ${pluralize('font', successes, true)} in ${helpers.time(t2, t1)}`;
+
+        if (compiled.watch) {
+          message += '\nWatching for changes...';
+        }
+        return { success: true, message };
+      })(results);
+
+      if (compiled.watch) {
+        compiled.watch.on('raw', helpers.debouncedWatcher);
+      }
+    });
+}
+
+module.exports = {
+  command: 'fonts',
+  describe: 'Compile fonts',
+  builder,
+  handler
+};

cli/compile/fonts.js

@@ -0,0 +1,101 @@
+'use strict';
+const h = require('highland'),
+  _ = require('lodash'),
+  chalk = require('chalk'),
+  pluralize = require('pluralize'),
+  compile = require('../../lib/cmd/compile'),
+  options = require('../cli-options'),
+  reporter = require('../../lib/reporters'),
+  helpers = require('../../lib/compilation-helpers');
+
+function builder(yargs) {
+  return yargs
+    .usage('Usage: $0 compile [asset type]')
+    .command(require('./media'))
+    .command(require('./fonts'))
+    .command(require('./styles'))
+    .command(require('./templates'))
+    .command(require('./scripts'))
+    .example('$0 compile', 'compile all assets')
+    .example('$0 compile --watch', 'compile and watch all assets')
+    .option('w', options.watch)
+    .option('m', options.minify)
+    // font-specific options
+    .option('i', options.inlined)
+    .option('l', options.linked)
+    // style-specific options
+    .option('p', options.plugins)
+    // script-specific options
+    .option('g', options.globs)
+    // reporter option
+    .option('r', options.reporter);
+}
+
+function handler(argv) {
+  const t1 = Date.now(),
+    plugins = _.map(argv.plugins, (pluginName) => {
+      try {
+        return require(pluginName)();
+      } catch (e) {
+        console.error(`${chalk.red('Error: Cannot init plugin "' + pluginName + '"')}\n${chalk.grey(e.message)}`);
+      }
+    }),
+    media = compile.media({ watch: argv.watch }); // run media task before others (specifically, templates)
+
+  return h(media.build).collect().toArray((mediaResults) => {
+    const fonts = compile.fonts({
+        watch: argv.watch,
+        minify: argv.minify,
+        inlined: argv.inlined,
+        linked: argv.linked
+      }),
+      styles = compile.styles({
+        watch: argv.watch,
+        minify: argv.minify,
+        plugins
+      }),
+      templates = compile.templates({
+        watch: argv.watch,
+        minify: argv.minify
+      }),
+      scripts = compile.scripts({
+        watch: argv.watch,
+        minify: argv.minify,
+        globs: argv.globs
+      }),
+      tasks = [fonts, media, styles, templates, scripts],
+      builders = _.map(tasks, (task) => task.build),
+      watchers = _.map(tasks, (task) => task.watch).concat([media.watch]),
+      isWatching = !!watchers[0];
+
+    return h([h.of(mediaResults)].concat(builders))
+      .merge()
+      .map(reporter.logAction(argv.reporter, 'compile'))
+      .toArray((results) => {
+        const t2 = Date.now();
+
+        reporter.logSummary(argv.reporter, 'compile', (successes) => {
+          let message = `Compiled ${argv.minify ? 'and minified ' : '' }${pluralize('file', successes, true)} in ${helpers.time(t2, t1)}`;
+
+          if (isWatching) {
+            message += '\nWatching for changes...';
+          }
+          return { success: true, message };
+        })(results);
+
+        if (isWatching) {
+          _.each(watchers, (watcher) => {
+            watcher.on('raw', helpers.debouncedWatcher);
+          });
+        }
+      });
+  });
+}
+
+module.exports = {
+  command: 'compile [asset type]',
+  describe: 'Compile fonts, media, styles, scripts, and templates',
+  aliases: ['compiler', 'c'],
+  builder,
+  handler
+};

cli/compile/index.js

@@ -0,0 +1,46 @@
+'use strict';
+const pluralize = require('pluralize'),
+  compile = require('../../lib/cmd/compile'),
+  options = require('../cli-options'),
+  reporter = require('../../lib/reporters'),
+  helpers = require('../../lib/compilation-helpers');
+
+function builder(yargs) {
+  return yargs
+    .usage('Usage: $0 media')
+    .example('$0 media', 'compile media files')
+    .example('$0 media --watch', 'compile and watch media files')
+    .option('w', options.watch)
+    .option('r', options.reporter);
+}
+
+function handler(argv) {
+  const t1 = Date.now(),
+    compiled = compile.media({ watch: argv.watch });
+
+  return compiled.build
+    .map(reporter.logAction(argv.reporter, 'media'))
+    .toArray((results) => {
+      const t2 = Date.now();
+
+      reporter.logSummary(argv.reporter, 'media', (successes) => {
+        let message = `Compiled ${pluralize('file', successes, true)} in ${helpers.time(t2, t1)}`;
+
+        if (compiled.watch) {
+          message += '\nWatching for changes...';
+        }
+        return { success: true, message };
+      })(results);
+
+      if (compiled.watch) {
+        compiled.watch.on('raw', helpers.debouncedWatcher);
+      }
+    });
+}
+
+module.exports = {
+  command: 'media',
+  describe: 'Compile component, layout, styleguide, and site media files',
+  builder,
+  handler
+};

cli/compile/media.js

@@ -0,0 +1,52 @@
+'use strict';
+const pluralize = require('pluralize'),
+  compile = require('../../lib/cmd/compile'),
+  options = require('../cli-options'),
+  reporter = require('../../lib/reporters'),
+  helpers = require('../../lib/compilation-helpers');
+
+function builder(yargs) {
+  return yargs
+    .usage('Usage: $0 scripts')
+    .example('$0 scripts', 'compile js files')
+    .example('$0 scripts --watch', 'compile and watch js files')
+    .option('w', options.watch)
+    .option('m', options.minify)
+    .option('g', options.globs)
+    .option('r', options.reporter);
+}
+
+function handler(argv) {
+  const t1 = Date.now(),
+    compiled = compile.scripts({
+      watch: argv.watch,
+      minify: argv.minify,
+      globs: argv.globs
+    });
+
+  return compiled.build
+    .map(reporter.logAction(argv.reporter, 'scripts'))
+    .toArray((results) => {
+      const t2 = Date.now();
+
+      reporter.logSummary(argv.reporter, 'scripts', (successes) => {
+        let message = `Compiled ${argv.minify ? 'and minified ' : '' }${pluralize('script', successes, true)} in ${helpers.time(t2, t1)}`;
+
+        if (compiled.watch) {
+          message += '\nWatching for changes...';
+        }
+        return { success: true, message };
+      })(results);
+
+      if (compiled.watch) {
+        compiled.watch.on('raw', helpers.debouncedWatcher);
+      }
+    });
+}
+
+module.exports = {
+  command: 'scripts',
+  describe: 'Compile scripts',
+  builder,
+  handler
+};

cli/compile/scripts.js

@@ -0,0 +1,61 @@
+'use strict';
+const _ = require('lodash'),
+  chalk = require('chalk'),
+  pluralize = require('pluralize'),
+  compile = require('../../lib/cmd/compile'),
+  options = require('../cli-options'),
+  reporter = require('../../lib/reporters'),
+  helpers = require('../../lib/compilation-helpers');
+
+function builder(yargs) {
+  return yargs
+    .usage('Usage: $0 styles')
+    .example('$0 styles', 'compile css files with postcss')
+    .example('$0 styles --watch', 'compile and watch css files')
+    .option('w', options.watch)
+    .option('m', options.minify)
+    .option('p', options.plugins)
+    .option('r', options.reporter);
+}
+
+function handler(argv) {
+  const t1 = Date.now(),
+    plugins = _.map(argv.plugins, (pluginName) => {
+      try {
+        return require(pluginName)();
+      } catch (e) {
+        console.error(`${chalk.red('Error: Cannot init plugin "' + pluginName + '"')}\n${chalk.grey(e.message)}`);
+      }
+    }),
+    compiled = compile.styles({
+      watch: argv.watch,
+      minify: argv.minify,
+      plugins
+    });
+
+  return compiled.build
+    .map(reporter.logAction(argv.reporter, 'styles'))
+    .toArray((results) => {
+      const t2 = Date.now();
+
+      reporter.logSummary(argv.reporter, 'styles', (successes) => {
+        let message = `Compiled ${argv.minify ? 'and minified ' : '' }${pluralize('css file', successes, true)} in ${helpers.time(t2, t1)}`;
+
+        if (compiled.watch) {
+          message += '\nWatching for changes...';
+        }
+        return { success: true, message };
+      })(results);
+
+      if (compiled.watch) {
+        compiled.watch.on('raw', helpers.debouncedWatcher);
+      }
+    });
+}
+
+module.exports = {
+  command: 'styles',
+  describe: 'Compile styles',
+  builder,
+  handler
+};