chore(build): unify client bundling scripts (#3600)

Remove bundling logic from Grunt and introduce watch mode into the scripts/client.js. New script (`npm run build:watch`) allows to watch for the changes in client sources and bundle them automatically.

This also fixes a bug where `npm run build` could swallow errors and silently do nothing.

Fixes #3599

Author: devoto13

docs/dev/02-making-changes.md

@@ -49,6 +49,8 @@ Here are some tips on how to set up a Karma workspace and how to send a good pul
 - Build the client code via:
   ```bash
   $ npm run build
+  # or use the watch mode
+  $ npm run build:watch
   ```
 
 ## Changing the Code

gruntfile.js

@@ -9,24 +9,10 @@ module.exports = function (grunt) {
       context: ['context/**/*.js'],
       grunt: ['grunt.js', 'tasks/*.js']
     },
-    browserify: {
-      client: {
-        files: {
-          'static/karma.js': ['client/main.js'],
-          'static/context.js': ['context/main.js']
-        }
-      }
-    },
     test: {
       unit: 'mochaTest:unit',
       client: 'test/client/karma.conf.js'
     },
-    watch: {
-      client: {
-        files: '<%= files.client %>',
-        tasks: 'browserify:client'
-      }
-    },
     mochaTest: {
       options: {
         reporter: 'dot',
@@ -43,7 +29,6 @@ module.exports = function (grunt) {
     },
     'npm-publish': {
       options: {
-        requires: ['build'],
         abortIfDirty: true,
         tag: 'latest'
       }
@@ -93,16 +78,14 @@ module.exports = function (grunt) {
   grunt.loadTasks('tasks')
   require('load-grunt-tasks')(grunt)
 
-  grunt.registerTask('build', ['browserify:client'])
-  grunt.registerTask('default', ['build', 'test'])
+  grunt.registerTask('default', ['test'])
   grunt.registerTask('test-appveyor', ['test:unit', 'test:client'])
 
   grunt.registerTask('release', 'Build, bump and publish to NPM.', function (type) {
     grunt.task.run([
       'check_clean',
       'npm-contributors',
       'bump:' + (type || 'patch') + ':bump-only',
-      'build',
       'conventionalChangelog',
       'bump-commit',
       'conventionalGithubReleaser',

package-lock.json

@@ -447,7 +447,6 @@
     "eslint-plugin-standard": "^4.0.1",
     "grunt": "^1.2.1",
     "grunt-auto-release": "^0.0.7",
-    "grunt-browserify": "^5.0.0",
     "grunt-bump": "^0.8.0",
     "grunt-check-clean": "^0.1.2",
     "grunt-cli": "^1.1.0",
@@ -480,6 +479,7 @@
     "sinon-chai": "^3.5.0",
     "supertest": "^4.0.2",
     "timer-shim": "^0.3.0",
+    "watchify": "^3.11.1",
     "which": "^1.3.1"
   },
   "main": "./lib/index",
@@ -506,6 +506,7 @@
     "test": "npm run test:unit && npm run test:e2e && npm run test:client",
     "build": "node scripts/client.js build",
     "build:check": "node scripts/client.js check",
+    "build:watch": "node scripts/client.js watch",
     "test:appveyor": "grunt test-appveyor",
     "test:integration": "./scripts/integration-tests.sh",
     "link": "node --eval \"path=require('path'); require('fs').symlinkSync(path.resolve(__dirname), path.resolve(__dirname, 'node_modules', 'karma'), 'junction')\"",

package.json

@@ -1,13 +1,14 @@
 const browserify = require('browserify')
-const fs = require('fs')
+const watchify = require('watchify')
+const { createWriteStream } = require('fs')
 const { readFile } = require('fs').promises
 
 const bundleResourceToFile = (inPath, outPath) => {
   return new Promise((resolve, reject) => {
     browserify(inPath).bundle()
-      .pipe(fs.createWriteStream(outPath))
-      .once('finish', () => resolve())
       .once('error', (e) => reject(e))
+      .pipe(createWriteStream(outPath))
+      .once('finish', () => resolve())
   })
 }
 
@@ -24,6 +25,28 @@ const bundleResource = (inPath) => {
   })
 }
 
+const watchResourceToFile = (inPath, outPath) => {
+  const b = browserify({
+    entries: [inPath],
+    cache: {},
+    packageCache: {},
+    plugin: [watchify]
+  })
+
+  const bundle = () => {
+    b.bundle()
+      .once('error', (e) => {
+        console.error(`Failed to bundle ${inPath} into ${outPath}.`)
+        console.error(e)
+      })
+      .pipe(createWriteStream(outPath))
+      .once('finish', () => console.log(`Bundled ${inPath} into ${outPath}.`))
+  }
+
+  b.on('update', bundle)
+  bundle()
+}
+
 const main = async () => {
   if (process.argv[2] === 'build') {
     await bundleResourceToFile('client/main.js', 'static/karma.js')
@@ -39,6 +62,9 @@ const main = async () => {
       // eslint-disable-next-line no-throw-literal
       throw 'Bundled client assets are outdated. Forgot to run "npm run build"?'
     }
+  } else if (process.argv[2] === 'watch') {
+    watchResourceToFile('client/main.js', 'static/karma.js')
+    watchResourceToFile('context/main.js', 'static/context.js')
   } else {
     // eslint-disable-next-line no-throw-literal
     throw `Unknown command: ${process.argv[2]}`