Skip to content

Commit

Permalink
Compilation Watch Improvements (#113)
Browse files Browse the repository at this point in the history 
* Updates to handle watch for the styles command

* Update watches for fonts and media

* Display errors during script compilation watching

* Fix the template file, and unify the logs.

* More logging improvements
  • Loading branch information
yuliy authored Dec 3, 2018
1 parent 804264f commit d90a04e
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 35 deletions.
11 changes: 3 additions & 8 deletions cli/compile/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -74,12 +75,6 @@ function handler(argv) {
}
return { success: true, message };
})(results);

if (isWatching) {
_.each(watchers, (watcher) => {
watcher.on('raw', helpers.debouncedWatcher);
});
}
});
});
}
Expand Down
25 changes: 21 additions & 4 deletions lib/cmd/compile/fonts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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(',')}}`),
Expand Down Expand Up @@ -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 {
Expand Down
35 changes: 24 additions & 11 deletions lib/cmd/compile/media.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)';

Expand All @@ -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))
Expand Down Expand Up @@ -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 {
Expand Down
16 changes: 14 additions & 2 deletions lib/cmd/compile/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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 = {};

Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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();
}
Expand Down
27 changes: 22 additions & 5 deletions lib/cmd/compile/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -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
Expand All @@ -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 {
Expand Down
24 changes: 19 additions & 5 deletions lib/cmd/compile/templates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
Expand Down Expand Up @@ -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));

Expand All @@ -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 {
Expand Down

0 comments on commit d90a04e

Please sign in to comment.