Compilation Watch Improvements

cli/compile/index.js

@@ -53,9 +53,10 @@ function handler(argv) {
       scripts = compile.scripts({
         watch: argv.watch,
         minify: argv.minify,
-        globs: argv.globs
+        globs: argv.globs,
+        reporter: argv.reporter
       }),
-      tasks = [fonts, media, styles, templates, scripts],
+      tasks = [fonts, styles, templates, scripts],
       builders = _.map(tasks, (task) => task.build),
       watchers = _.map(tasks, (task) => task.watch).concat([media.watch]),
       isWatching = !!watchers[0];
@@ -74,12 +75,6 @@ function handler(argv) {
           }
           return { success: true, message };
         })(results);
-
-        if (isWatching) {
-          _.each(watchers, (watcher) => {
-            watcher.on('raw', helpers.debouncedWatcher);
-          });
-        }
       });
   });
 }

lib/cmd/compile/fonts.js

@@ -10,6 +10,7 @@ const _ = require('lodash'),
   rename = require('gulp-rename'),
   gulpIf = require('gulp-if'),
   cssmin = require('gulp-cssmin'),
+  reporters = require('../../reporters'),
   sourcePath = path.join(process.cwd(), 'styleguides'),
   destPath = path.join(process.cwd(), 'public'),
   // these are the font weights, styles, and formats we support
@@ -132,9 +133,10 @@ function compile(options = {}) {
     minify = options.minify || variables.minify || false,
     watch = options.watch || false,
     inlined = options.inlined || variables.inlined || false,
-    linked = options.linked || variables.linked || getLinkedSetting(options.linked, inlined);
+    linked = options.linked || variables.linked || getLinkedSetting(options.linked, inlined),
+    reporter = options.reporter || 'pretty';
 
-  gulp.task('fonts', () => {
+  function buildPipeline() {
     // loop through the styleguides, generate gulp workflows that we'll later merge together
     let tasks = _.reduce(styleguides, (streams, styleguide) => {
       let fontsSrc = path.join(sourcePath, styleguide, 'fonts', `*.{${fontFormats.join(',')}}`),
@@ -172,13 +174,28 @@ function compile(options = {}) {
       return streams;
     }, []);
 
-    return h(es.merge(tasks));
+    return es.merge(tasks);
+  }
+
+  gulp.task('fonts', () => {
+    return h(buildPipeline());
+  });
+
+  gulp.task('fonts:watch', () => {
+    return h(buildPipeline())
+      .each((item) => {
+        _.map([item], reporters.logAction(reporter, 'compile'));
+      })
+      .done(cb);
   });
 
   if (watch) {
     return {
       build: gulp.task('fonts')(),
-      watch: gulp.watch(path.join(sourcePath, '**', 'fonts', `*.{${fontFormats.join(',')}}`), gulp.task('fonts'))
+      watch: gulp.watch(
+        path.join(sourcePath, '**', 'fonts', `*.{${fontFormats.join(',')}}`),
+        gulp.task('fonts:watch')
+      )
     };
   } else {
     return {

lib/cmd/compile/media.js

@@ -7,6 +7,7 @@ const _ = require('lodash'),
   rename = require('gulp-rename'),
   changed = require('gulp-changed'),
   es = require('event-stream'),
+  reporters = require('../../reporters'),
   destPath = path.join(process.cwd(), 'public', 'media'),
   mediaGlobs = '*.+(jpg|jpeg|png|gif|webp|svg|ico)';
 
@@ -23,10 +24,11 @@ function compile(options = {}) {
     styleguidesSrc = afs.getFolders(path.join(process.cwd(), 'styleguides')).map((styleguide) => ({ name: styleguide, path: path.join(process.cwd(), 'styleguides', styleguide, 'media', mediaGlobs) })),
     sitesSrc = afs.getFolders(path.join(process.cwd(), 'sites')).map((site) => ({ name: site, path: path.join(process.cwd(), 'sites', site, 'media', mediaGlobs) }));
 
-  let watch = options.watch || false;
+  let watch = options.watch || false,
+    reporter = options.reporter || 'pretty';
 
-  gulp.task('media', () => {
-    let componentTasks = _.map(componentsSrc, (component) => {
+  function buildPipeline() {
+    const componentTasks = _.map(componentsSrc, (component) => {
         return gulp.src(component.path)
           .pipe(rename({ dirname: path.join('components', component.name) }))
           .pipe(changed(destPath))
@@ -55,19 +57,30 @@ function compile(options = {}) {
           .pipe(es.mapSync((file) => ({ type: 'success', message: file.path })));
       });
 
-    return h(es.merge(componentTasks.concat(layoutsTask, styleguidesTask, sitesTask)));
+    return es.merge(componentTasks.concat(layoutsTask, styleguidesTask, sitesTask));
+  }
+
+  gulp.task('media', () => {
+    return h(buildPipeline());
   });
 
-  if (watch) {
-    let watchPaths = _.map(componentsSrc, (component) => component.path)
-      .concat(
-        _.map(layoutsSrc, (layout) => layout.path),
-        _.map(styleguidesSrc, (styleguide) => styleguide.path),
-        _.map(sitesSrc, (site) => site.path));
+  gulp.task('media:watch', () => {
+    return h(buildPipeline())
+      .each((item) => {
+        _.map([item], reporters.logAction(reporter, 'compile'));
+      })
+      .done(cb);
+  });
 
+  if (watch) {
     return {
       build: gulp.task('media')(),
-      watch: gulp.watch(watchPaths, gulp.task('media'))
+      watch: gulp.watch([
+        `${process.cwd()}/components/**/media/${mediaGlobs}`,
+        `${process.cwd()}/layouts/**/media/${mediaGlobs}`,
+        `${process.cwd()}/styleguides/**/media/${mediaGlobs}`,
+        `${process.cwd()}/sites/**/media/${mediaGlobs}`
+      ], gulp.task('media:watch'))
     };
   } else {
     return {

lib/cmd/compile/scripts.js

@@ -29,6 +29,7 @@ const _ = require('lodash'),
   mixins = require('postcss-mixins'),
   nested = require('postcss-nested'),
   simpleVars  = require('postcss-simple-vars'),
+  reporters = require('../../reporters'),
   helpers = require('../../compilation-helpers'),
   // globbing patterns
   kilnGlob = './node_modules/clay-kiln/dist/clay-kiln-@(edit|view).js',
@@ -53,7 +54,14 @@ const _ = require('lodash'),
   },
   babelConfig = {
     // force babel to resolve the preset from claycli's node modules rather than the clay install's repo
-    presets: [[require('@babel/preset-env'), { targets: helpers.getConfigFileOrBrowsersList('babelTargets') }]]
+    presets: [
+      [
+        require('@babel/preset-env'),
+        {
+          targets: Object.assign(helpers.getConfigFileOrBrowsersList('babelTargets'), {})
+        }
+      ]
+    ]
   },
   temporaryIDs = {};
 
@@ -416,6 +424,7 @@ function compile(options = {}) {
   const watch = options.watch || false,
     minify = options.minify || variables.minify || false,
     globs = options.globs || [],
+    reporter = options.reporter || 'pretty',
     globFiles = globs.length ? _.flatten(_.map(globs, (g) => glob.sync(path.join(process.cwd(), g)))) : [],
     // client.js, model.js, kiln plugins, and legacy global scripts are passed to megabundler
     bundleEntries = glob.sync(componentClientsGlob).concat(
@@ -446,7 +455,10 @@ function compile(options = {}) {
             buildKiln();
           } else {
             // recompile changed megabundled files
-            buildScripts([file], bundleOptions);
+            buildScripts([file], bundleOptions)
+              .then(function (result) {
+                _.map(result, reporters.logAction(reporter, 'compile'));
+              });
             // and re-copy the _client-init.js if it has changed
             copyClientInit();
           }

lib/cmd/compile/styles.js

@@ -16,6 +16,7 @@ const _ = require('lodash'),
   mixins = require('postcss-mixins'),
   nested = require('postcss-nested'),
   simpleVars  = require('postcss-simple-vars'),
+  reporters = require('../../reporters'),
   helpers = require('../../compilation-helpers'),
   componentsSrc = path.join(process.cwd(), 'styleguides', '**', 'components', '*.css'),
   layoutsSrc = path.join(process.cwd(), 'styleguides', '**', 'layouts', '*.css'),
@@ -104,10 +105,11 @@ function renameFile(filepath) {
 function compile(options = {}) {
   let minify = options.minify || variables.minify || false,
     watch = options.watch || false,
-    plugins = options.plugins || [];
+    plugins = options.plugins || [],
+    reporter = options.reporter || 'pretty';
 
-  gulp.task('styles', () => {
-    return h(gulp.src([componentsSrc, layoutsSrc])
+  function buildPipeline() {
+    return gulp.src([componentsSrc, layoutsSrc])
       .pipe(changed(destPath, {
         transformPath,
         hasChanged
@@ -124,13 +126,28 @@ function compile(options = {}) {
       ].concat(plugins)))
       .pipe(gulpIf(minify, cssmin()))
       .pipe(gulp.dest(destPath))
-      .pipe(es.mapSync((file) => ({ type: 'success', message: path.basename(file.path) }))));
+      .pipe(es.mapSync((file) => ({ type: 'success', message: path.basename(file.path) })));
+  }
+
+  gulp.task('styles', () => {
+    return h(buildPipeline());
+  });
+
+  gulp.task('styles:watch', (cb) => {
+    return h(buildPipeline())
+      .each((item) => {
+        _.map([item], reporters.logAction(reporter, 'compile'));
+      })
+      .done(cb);
   });
 
   if (watch) {
     return {
       build: gulp.task('styles')(),
-      watch: gulp.watch([componentsSrc, layoutsSrc], gulp.task('styles'))
+      watch: gulp.watch(
+        [componentsSrc, layoutsSrc],
+        gulp.task('styles:watch')
+      )
     };
   } else {
     return {

lib/cmd/compile/templates.js

@@ -15,6 +15,7 @@ const _ = require('lodash'),
   uglify = require('uglify-js'),
   chalk = require('chalk'),
   escape = require('escape-quotes'),
+  reporters = require('../../reporters'),
   helpers = require('../../compilation-helpers'),
   destPath = path.join(process.cwd(), 'public', 'js'),
   templateGlob = 'template.+(hbs|handlebars)',
@@ -179,14 +180,15 @@ function compile(options = {}) {
     sourcePaths = componentPaths.concat([path.join(process.cwd(), 'layouts', '**', templateGlob)]);
 
   let watch = options.watch || false,
-    minify = options.minify || variables.minify || false;
+    minify = options.minify || variables.minify || false,
+    reporter = options.reporter || 'pretty';
 
   function concatTemplates() {
     return minify ? groupConcat(bundles) : es.mapSync((file) => file);
   }
 
-  gulp.task('templates', () => {
-    return h(gulp.src(sourcePaths, { base: process.cwd() })
+  function buildPipeline() {
+    return gulp.src(sourcePaths, { base: process.cwd() })
       .pipe(rename((filepath) => {
         const name = _.last(filepath.dirname.split(path.sep));
 
@@ -204,13 +206,25 @@ function compile(options = {}) {
       .pipe(es.mapSync((file) => minifyTemplate(file, minify)))
       .pipe(concatTemplates()) // when minifying, concat to '_templates-<letter>-<letter>.js'
       .pipe(gulp.dest(destPath))
-      .pipe(es.mapSync((file) => ({ type: 'success', message: file.path }))));
+      .pipe(es.mapSync((file) => ({ type: 'success', message: file.path })));
+  }
+
+  gulp.task('templates', () => {
+    return h(buildPipeline());
+  });
+
+  gulp.task('templates:watch', () => {
+    return h(buildPipeline())
+      .each((item) => {
+        _.map([item], reporters.logAction(reporter, 'compile'));
+      })
+      .done(cb);
   });
 
   if (watch) {
     return {
       build: gulp.task('templates')(),
-      watch: gulp.watch(sourcePaths, gulp.task('templates'))
+      watch: gulp.watch(sourcePaths, gulp.task('templates:watch'))
     };
   } else {
     return {