Add watch tasks for smaller bits, so we’re not building the entire site for css changes

build/index.js

@@ -68,3 +68,27 @@ exports.everything = function (prod = false) {
   fn.displayName = prod ? 'buildForProd' : 'build';
   return fn;
 };
+
+
+exports.task = function (action, prod = false) {
+  const fn = async () => {
+    const tasks = await {
+      scss,
+      favicon,
+      svg,
+      scripts,
+    }[action](prod);
+
+    if (!tasks.length) return;
+
+    await fs.ensureDir(resolve('dist'));
+    const cache = new Cache({ prod });
+    await cache.load();
+    await evaluate(tasks, cache);
+    await evaluate(tasks.flat(), cache);
+    await cache.save();
+  };
+
+  fn.displayName = prod ? action + 'ForProd' : action;
+  return fn;
+};

gulp/index.js

@@ -8,6 +8,11 @@ var build = require('../build');
 const devBuildTask  = build.everything();
 const prodBuildTask = build.everything(true);
 
+const scss    = exports.scss    = build.task('scss');
+const favicon = exports.favicon = build.task('favicon');
+const svg     = exports.svg     = build.task('svg');
+const scripts = exports.scripts = build.task('scripts');
+
 var cleanTask = require('./clean');
 exports.clean = cleanTask;
 
@@ -39,10 +44,24 @@ function watcher () {
     'public/**/*',
     'posts/**/*',
     'templates/*.{md,hbs,html}',
-    'scss/*.scss',
-    'js/*.js',
   ], devBuildTask);
 
+  watch([
+    'scss/*.scss',
+  ], scss);
+
+  watch([
+    'js/*.js',
+  ], scripts);
+
+  watch([
+    'svg/**/*.svg',
+  ], svg);
+
+  watch([
+    'favicon.png',
+  ], favicon);
+
   server();
 }