Add --watch flag to serve command

[raphaelokon]

This is a must-have for all PatternLab power users, so that they can specify their own paths to watch

[bmuenzenmeyer]

thinking about this a bit more - I think we actually are in luck of sorts.

most/all of the watches that come with editions are defined from the paths object found on the patternlab-config.json object anyways. what this means is that we can, with reasonable confidence, watch those paths and file types internally as a black box for users - under normal circumstances they have no need to alter the watch. we don't need to supply an array of globs to watch if we use the paths object and blackbox the watches against them!

take this snippet from the edition-node-gulp gulpfile.js

  var patternWatches = [
    resolvePath(paths().source.patterns) + '/**/*.json',
    resolvePath(paths().source.patterns) + '/**/*.md',
    resolvePath(paths().source.data) + '/*.json',
    resolvePath(paths().source.fonts) + '/*',
    resolvePath(paths().source.images) + '/*',
    resolvePath(paths().source.meta) + '/*',
    resolvePath(paths().source.annotations) + '/*'
  ].concat(getTemplateWatches());

  gulp.watch(patternWatches, { awaitWriteFinish: true }).on('change', gulp.series(build, reload));

all this really equates to is "hey PL, build again when something you care about and already use changes"

the css is one place where, in my mind, we can optimize things by directly injecting via BS. again from the gulpfile:

  gulp.watch(resolvePath(paths().source.css) + '/**/*.css', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:css', reloadCSS));
  gulp.watch(resolvePath(paths().source.styleguide) + '/**/*.*', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:styleguide', 'pl-copy:styleguide-css', reloadCSS));

we can do that on behalf of users too I think.

anyone that wants to do something with their asset pipeline still can, knowing that once changes hit our watched directories, PL takes over if need be

we might need to be careful about this snippet, however, which supports watching whichever template extensions a user has engines for

// watch task utility functions
function getSupportedTemplateExtensions() {
  var engines = require('./node_modules/patternlab-node/core/lib/pattern_engines');
  return engines.getSupportedFileExtensions();
}
function getTemplateWatches() {
  return getSupportedTemplateExtensions().map(function (dotExtension) {
    return resolvePath(paths().source.patterns) + '/**/*' + dotExtension;
  });
}

I think this can likely be internalized too

I will open a different issue discussing remaining browsersync server options to consider.

[raphaelokon]

Thanks … this sounds great and mitigates a lot of boilerplate

[raphaelokon]

Fixed via c696a6a