Improve incremental build times

client/build.js

@@ -57,6 +57,8 @@ const glob = require('glob');
 const path = require('path');
 const util = require('util');
 const execSync = require('child_process').execSync;
+const browserify = require('browserify');
+const chokidar = require('chokidar');
 
 function readTextFile(path) {
     return fs.readFileSync(path, 'utf-8');
@@ -148,9 +150,6 @@ function bundleCss() {
     console.info('Bundled CSS');
 }
 
-function bundleJs() {
-    const browserify = require('browserify');
-
 function minifyJs(path) {
     return require('terser').minify(
         fs.readFileSync(path, 'utf-8'), { compress: { unused: false } }).code;
@@ -158,7 +157,7 @@ function bundleJs() {
 
 function writeJsBundle(b, path, compress, callback) {
     let outputFile = fs.createWriteStream(path);
-        b.bundle().pipe(outputFile);
+    b.bundle().on('error', console.error).pipe(outputFile);
     outputFile.on('finish', () => {
         if (compress) {
             fs.writeFileSync(path, minifyJs(path));
@@ -167,7 +166,7 @@ function bundleJs() {
     });
 }
 
-    if (!process.argv.includes('--no-vendor-js')) {
+function bundleVendorJs(compress) {
     let b = browserify();
     for (let lib of external_js) {
         b.require(lib);
@@ -176,7 +175,7 @@ function bundleJs() {
         b.add(require.resolve('babel-polyfill'));
     }
     const file = './public/js/vendor.min.js';
-        writeJsBundle(b, file, true, () => {
+    writeJsBundle(b, file, compress, () => {
         if (process.argv.includes('--gzip')) {
             gzipFile(file);
         }
@@ -184,21 +183,32 @@ function bundleJs() {
     });
 }
 
-    if (!process.argv.includes('--no-app-js')) {
-        let b = browserify({debug: process.argv.includes('--debug')});
-        if (!process.argv.includes('--no-transpile')) {
-            b = b.transform('babelify');
-        }
-        b = b.external(external_js).add(glob.sync('./js/**/*.js'));
-        const compress = !process.argv.includes('--debug');
+function bundleAppJs(b, compress, callback) {
     const file = './public/js/app.min.js';
     writeJsBundle(b, file, compress, () => {
         if (process.argv.includes('--gzip')) {
             gzipFile(file);
         }
         console.info('Bundled app JS');
+        callback();
     });
 }
+
+function bundleJs() {
+    if (!process.argv.includes('--no-vendor-js')) {
+        bundleVendorJs(true);
+    }
+
+    if (!process.argv.includes('--no-app-js')) {
+        let watchify = require('watchify');
+        let b = browserify({ debug: process.argv.includes('--debug') });
+        if (!process.argv.includes('--no-transpile')) {
+            b = b.transform('babelify');
+        }
+        b = b.external(external_js).add(glob.sync('./js/**/*.js'));
+        const compress = !process.argv.includes('--debug');
+        bundleAppJs(b, compress, () => { });
+    }
 }
 
 function bundleConfig() {
@@ -298,10 +308,53 @@ function makeOutputDirs() {
     }
 }
 
+function watch() {
+    chokidar.watch('./fonts/**/*').on('change', bundleBinaryAssets);
+    chokidar.watch('./img/**/*').on('change', bundleWebAppFiles);
+    chokidar.watch('./html/**/*.tpl').on('change', bundleHtml);
+    chokidar.watch('./css/**/*.styl').on('change', bundleCss);
+
+    bundleBinaryAssets();
+    bundleWebAppFiles();
+    bundleCss();
+    bundleHtml();
+
+    let watchify = require('watchify');
+    let b = browserify({
+        debug: process.argv.includes('--debug'),
+        entries: ['js/main.js'],
+        cache: {},
+        packageCache: {},
+    });
+
+    b.plugin(watchify);
+
+    if (!process.argv.includes('--no-transpile')) {
+        b = b.transform('babelify');
+    }
+    b = b.external(external_js).add(glob.sync('./js/**/*.js'));
+    const compress = false;
+
+    function bundle(id) {
+        console.info("Rebundling app JS...");
+        let start = new Date();
+        bundleAppJs(b, compress, () => {
+            let end = new Date() - start;
+            console.info('Rebundled in %ds.', end / 1000)
+        });
+    }
+
+    b.on('update', bundle);
+    bundle();
+}
+
 // -------------------------------------------------
 
 makeOutputDirs();
 bundleConfig();
+if (process.argv.includes('--watch')) {
+    watch();
+} else {
     if (!process.argv.includes('--no-binary-assets')) {
         bundleBinaryAssets();
     }
@@ -317,3 +370,4 @@ if (!process.argv.includes('--no-css')) {
     if (!process.argv.includes('--no-js')) {
         bundleJs();
     }
+}

client/package.json

@@ -3,7 +3,8 @@
   "private": true,
   "scripts": {
     "build": "node build.js",
-    "watch": "c1=\"\";while :;do c2=$(find html js css img -type f -and -not -iname '*autogen*'|sort|xargs cat|md5sum);[[ $c1 != $c2 ]]&&npm run build -- --debug --no-vendor-js;c1=$c2;sleep 1;done"
+    "watch": "bash watch.sh",
+    "watchify": "watchify ./js/**/*.js -o ./public/js/app.min.js -d -v"
   },
   "dependencies": {
     "dompurify": "^2.0.17",
@@ -21,12 +22,14 @@
     "babel-preset-env": "^1.7.0",
     "babelify": "^8.0.0",
     "browserify": "^16.2.2",
+    "chokidar": "^3.5.1",
     "csso": "^3.5.1",
     "glob": "^7.1.2",
     "html-minifier": "^3.5.18",
     "jimp": "^0.13.0",
     "stylus": "^0.54.5",
     "terser": "^3.7.7",
-    "underscore": "^1.9.1"
+    "underscore": "^1.9.1",
+    "watchify": "^4.0.0"
   }
 }

client/watch.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+npm run watchify &
+
+c1="";
+while :; do
+    c2=$(find html css img -type f -and -not -iname '*autogen*'|sort|xargs cat|md5sum);
+    [[ $c1 != $c2 ]] && npm run build -- --debug --no-js --no-binary-assets --no-web-app-files
+    c1=$c2;
+    sleep 1;
+done
+
+wait