Add hot-reload script, refactor log function into module

build/build.js

@@ -1,16 +1,13 @@
 const fs = require('fs');
 const path = require('path');
 const sass = require('sass');
-const chalk = require('chalk');
 const write = require('write');
 const rimraf = require('rimraf');
 const postcss = require('postcss');
 const cssnano = require('cssnano');
 const autoprefixer = require('autoprefixer');
 
-function log(...args) {
-  return console.log('📦', chalk.cyan(...args));
-}
+const log = require('./log');
 
 async function build() {
   const entrypoint = path.resolve(__dirname, '../src/styles.scss');
@@ -20,6 +17,7 @@ async function build() {
   log('Cleaning "dist/, docs/static/assets/paper.css" folder...');
 
   rimraf.sync('dist', { disableGlob: true });
+
   if (fs.existsSync(paperDocsPath)) {
     fs.unlinkSync(paperDocsPath);
   }

build/hot-reload.js

@@ -0,0 +1,23 @@
+const util = require('util');
+const path = require('path');
+const sass = require('sass');
+const write = require('write');
+const postcss = require('postcss');
+const chokidar = require('chokidar');
+const autoprefixer = require('autoprefixer');
+
+const log = require('./log');
+
+const sassRenderPromisified = util.promisify(sass.render);
+
+const entrypoint = path.resolve(__dirname, '../src/styles.scss');
+const paperDocsPath = path.resolve(__dirname, '../docs/static/assets/paper.css');
+
+chokidar.watch('./src/**/*.scss').on('change', (event, path) => {
+  log(`Detected file change (${event}), re-building compiled CSS...`);
+
+  sassRenderPromisified({ file: entrypoint })
+    .then((compiledCSS) => postcss([autoprefixer]).process(compiledCSS.css.toString(), { from: undefined }))
+    .then((autoprefixedCSS) => write(paperDocsPath, autoprefixedCSS.css))
+    .then(() => log('Re-built compiled CSS.'));
+});

build/log.js

@@ -0,0 +1,7 @@
+const chalk = require('chalk');
+
+function log(...args) {
+  return console.log('📦 ', chalk.cyan(...args));
+}
+
+module.exports = log;

package.json

@@ -4,10 +4,12 @@
   "description": "The less formal CSS framework.",
   "main": "dist/paper.css",
   "scripts": {
+    "build": "npm run css:build && npm run hugo:build",
     "css:build": "node ./build/build.js",
+    "dev": "concurrently --kill-others \"npm run dev:hot-reload\" \"npm run hugo:serve\"",
+    "dev:hot-reload": "node ./build/hot-reload.js",
     "hugo:build": "hugo -D --source=docs",
     "hugo:serve": "hugo server --source=docs --disableFastRender",
-    "build": "npm run css:build && npm run hugo:build",
     "lint": "npm run stylelint",
     "start": "npm run hugo:serve",
     "stylelint": "stylelint 'src/**/*.scss'"