Several updates:

- Swapped to Alpine Node with other dependencies for Dockerfile
- Add sourcemap to webpack
- Fix grunt task JS formatting issues
- Improve speed of watch tasks by using no spawn
- Move jQuery into CDN script tag out of bundle

.babelrc

@@ -3,9 +3,9 @@
 	"passPerPreset": true,
 	"plugins": [
 		["typecheck", {
-      		"disable": { "production": true }
-    	}],
-    	"syntax-flow",
+			"disable": { "production": true }
+		}],
+		"syntax-flow",
 		"transform-flow-strip-types"
 	]
 }

.grunt-tasks/documentation.js

@@ -6,4 +6,4 @@ module.exports = {
 			format: "json"
 		}
 	}
-}
+};

.grunt-tasks/eslint.js

@@ -1,15 +1,17 @@
 module.exports = {
-	target: [
-		"./src/javascripts/**/*.js",
-		"./Gruntfile.js",
-		"./webpack.config.js",
-		"./.grunt/**/*.js",
-		"./web/server/**/*.js",
-		"./web/client/**/*.js"
-	],
+	target: {
+		src: [
+			"./src/javascripts/**/*.js",
+			"./Gruntfile.js",
+			"./webpack.config.js",
+			"./.grunt-tasks/**/*.js",
+			"./web/server/**/*.js",
+			"./web/client/**/*.js"
+		]
+	},
 	options: {
 		ignorePath: "./src/javascripts/.eslintignore",
 		configFile: "./src/javascripts/.eslintrc.json",
-		quiet: true
+		quiet: false
 	}
 };

.grunt-tasks/express.js

@@ -8,4 +8,4 @@ module.exports = {
 			}
 		}
 	}
-}
+};

.grunt-tasks/jsdoc.js

@@ -9,4 +9,4 @@ module.exports = {
 			config: "./src/javascripts/.jsdoc.json"
 		}
 	}
-}
+};

.grunt-tasks/parallel.js

@@ -1,23 +1,23 @@
 module.exports = {
 	options: {
-    	stream: true
-    },
+		stream: true
+	},
 	watch: {
 		tasks: [{
-		  grunt: true,
-		  args: ["watch:sass"]
+			grunt: true,
+			args: ["watch:sass"]
 		}, {
-		  grunt: true,
-		  args: ["watch:eslint"]
+			grunt: true,
+			args: ["watch:eslint"]
 		}, {
-		  grunt: true,
-		  args: ["watch:jsbuild"]
+			grunt: true,
+			args: ["watch:jsbuild"]
 		}, {
-		  grunt: true,
-		  args: ["watch:express"]
+			grunt: true,
+			args: ["watch:express"]
 		}, {
-		  grunt: true,
-		  args: ["watch:public"]
+			grunt: true,
+			args: ["watch:public"]
 		}]
 	},
-}
+};

.grunt-tasks/sass.js

@@ -8,4 +8,4 @@ module.exports = {
 			"./dist/stylesheets/main.css": "./web/client/stylesheets/main.scss"
 		}
 	}
-}
+};

.grunt-tasks/sassdoc.js

@@ -5,4 +5,4 @@ module.exports = {
 			config: "./.sassdocrc",
 		}
 	}
-}
+};

.grunt-tasks/sasslint.js

@@ -3,4 +3,4 @@ module.exports = {
 	options: {
 		configFile: "./src/stylesheets/.sass-lint.yml",
 	}
-}
+};

.grunt-tasks/watch.js

@@ -1,18 +1,29 @@
 var eslint = require("./eslint");
 
-
 module.exports = {
 	sass: {
 		files: ["./src/stylesheets/**/*.scss", "./web/client/stylesheets/**/*.scss"],
-		tasks: ["sasslint", "sass", "sassdoc"]
-	},
-	eslint: {
-		files: eslint.target,
-		tasks: ["eslint"]
+		tasks: ["sass", "newer:sasslint", "sassdoc"],
+		options: {
+			// Speed up watch task:
+			spawn: false
+		}
 	},
 	jsbuild: {
 		files: ["./src/javascripts/**/*.js", "./web/client/javascripts/**/*.js"],
-		tasks: ["webpack"]
+		tasks: ["webpack"],
+		options: {
+			// Speed up watch task:
+			spawn: false
+		}
+	},
+	eslint: {
+		files: eslint.target.src,
+		tasks: ["newer:eslint"],
+		options: {
+			// Speed up watch task:
+			spawn: false
+		}
 	},
 	express: {
 		files: ["./web/server/**/*.js"],
@@ -28,4 +39,4 @@ module.exports = {
 			livereload: true
 		}
 	}
-}
+};

Dockerfile

@@ -1,6 +1,6 @@
 # Define from what image we want to build from
 # Comes with Node.js and NPM already installed
-FROM node:6.4
+FROM mhart/alpine-node:6.4
 
 ENV PORT=80
 
@@ -15,11 +15,14 @@ WORKDIR /app
 # Copy just the package.json so we can npm install
 COPY package.json /app
 
-# Install grunt CLI globally
-RUN npm i -g grunt-cli
+# Install build tools for e.g. node-sass
+RUN apk add --no-cache make gcc g++ python
+
+# Install grunt CLI globally and node-gyp for building
+RUN npm i -g grunt-cli node-gyp
 
 # Install app dependencies
-RUN npm i
+RUN npm install
 
 # Copy application source into the docker image
 COPY . /app

package.json

@@ -15,34 +15,28 @@
   "author": "NICE Digital Services",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.10.4",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-lodash": "^3.2.0",
-    "babel-plugin-syntax-flow": "^6.8.0",
-    "babel-plugin-typecheck": "^3.9.0",
-    "babel-polyfill": "^6.9.1",
-    "babel-preset-es2015": "^6.9.0",
-    "css-loader": "^0.23.1",
-    "express": "^4.14.0",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-express-server": "^0.5.3",
     "grunt-open": "^0.2.3",
-    "grunt-parallel": "^0.5.1",
-    "grunt-sass-lint": "^0.2.0",
-    "node-sass": "^3.8.0",
-    "sass-loader": "^4.0.0",
-    "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1",
     "webpack-notifier": "^1.3.0"
   },
   "dependencies": {
+    "babel-core": "^6.10.4",
     "babel-eslint": "^6.1.0",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-lodash": "^3.2.0",
+    "babel-plugin-syntax-flow": "^6.8.0",
     "babel-plugin-transform-flow-strip-types": "^6.8.0",
+    "babel-plugin-typecheck": "^3.9.0",
+    "babel-polyfill": "^6.9.1",
+    "babel-preset-es2015": "^6.9.0",
     "chroma-js": "^1.1.1",
     "compression": "^1.6.2",
     "eslint": "^3.0.0",
     "eslint-loader": "^1.4.0",
     "eslint-plugin-flowtype": "^2.3.0",
+    "express": "^4.14.0",
     "extend": "^3.0.0",
     "favicon": "0.0.2",
     "grunt": "^1.0.1",
@@ -51,7 +45,10 @@
     "grunt-eslint": "^19.0.0",
     "grunt-jsdoc": "^2.1.0",
     "grunt-modernizr": "^1.0.2",
+    "grunt-newer": "^1.2.0",
+    "grunt-parallel": "^0.5.1",
     "grunt-sass": "^1.2.1",
+    "grunt-sass-lint": "^0.2.0",
     "grunt-sassdoc": "^2.0.2",
     "grunt-webpack": "^1.0.11",
     "html-minifier": "^3.0.1",
@@ -61,6 +58,7 @@
     "load-grunt-tasks": "^3.5.0",
     "lodash": "^4.13.1",
     "node-common-errors": "^0.4.0",
+    "node-sass": "^3.8.0",
     "nunjucks": "^2.4.2",
     "sassdoc-extras": "^2.4.1",
     "serve-favicon": "^2.3.0",

src/javascripts/.eslintignore

@@ -2,3 +2,4 @@
 # See http://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories
 
 dist/*
+!.grunt-tasks/*

src/javascripts/tabs.js

@@ -1,7 +1,7 @@
 /*eslint-env browser */
 import $ from "jquery";
 
-const NAME = "tabs";
+const NAME: string = "tabs";
 
 const ClassName = {
 	Tabs: ".tabs",

web/server/index.js

@@ -1,10 +1,8 @@
 /*eslint-env node*/
-var _ = require("lodash"),
-	compression = require("compression"),
+var compression = require("compression"),
 	errors = require("node-common-errors"),
 	express = require("express"),
 	favicon = require("serve-favicon"),
-	fs = require("fs"),
 	nunjucks = require("nunjucks"),
 	path = require("path");
 
@@ -55,9 +53,11 @@ app.use(require("./controllers"));
 
 
 // Error routes
+/*eslint-disable no-unused-vars*/
 app.use(function (req, res, next) {
 	throw new errors.NotFound("Page not found.");
 });
+/*eslint-disable no-unused-vars*/
 app.use(function (err, req, res, next) {
 	if (err instanceof errors.NotFound) {
 		res.status(404).render("404", { error: err });

web/server/nunjucks/example-extension.js

@@ -1,5 +1,4 @@
-var _ = require("lodash"),
-	nunjucks = require("nunjucks");
+var nunjucks = require("nunjucks");
 
 /// A custom tag for showing a code example.
 /// @see {@link https://mozilla.github.io/nunjucks/api.html#custom-tags)
@@ -16,7 +15,7 @@ var _ = require("lodash"),
 function ExampleExtension() {
 	this.tags = ["example"];
 
-	this.parse = function(parser, nodes, lexer) {
+	this.parse = function(parser, nodes) {
 		// get the tag token
 		var tok = parser.nextToken();
 

web/server/views/layouts/_layout.njk

@@ -105,6 +105,7 @@
 		</nav>
 	</footer>
 
+	<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script>
 	<script src="/javascripts/app.bundle.js"></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/scss.min.js"></script>

webpack.config.js

@@ -3,7 +3,6 @@
 
 var WebpackNotifierPlugin = require("webpack-notifier");
 var webpack = require("webpack");
-var path = require("path");
 
 var isProduction = (process.env.NODE_ENV === "production");
 
@@ -17,8 +16,7 @@ var plugins = [
 	})
 ];
 
-
-if(isProduction) {
+ if(isProduction) {
 	plugins.push(
 		new webpack.DefinePlugin({
 			"process.env": {
@@ -30,26 +28,29 @@ if(isProduction) {
 
 module.exports = [{
 	name: "js",
-	entry: ["babel-polyfill", "./web/client/javascripts/app"],
+	entry: [/*"babel-polyfill", */"./web/client/javascripts/app"],
 	output: {
 		path: "./dist/javascripts",
-		filename: "app.bundle.js"
+		filename: "app.bundle.js",
+		sourceMapFilename: "app.bundle.map"
 	},
 	module: {
-		preLoaders: [{
+		/*preLoaders: [{
 			test: /\.js$/,
 			loader: "eslint",
 			exclude: /(node_modules|bower_components)/
-		}],
+		}],*/
 		loaders: [{
 			test: /\.js$/,
 			loaders: ["babel-loader"],
 			exclude: /(node_modules|bower_components)/
 		}]
 	},
+	externals: { jquery: "jQuery" },
 	resolve: {
 		root: ["./web/client/javascripts/", "./src/javascripts/"]
 	},
+	devtool: "#source-map",
 	plugins: plugins,
 	eslint: {
 		ignorePath: "./src/javascripts/.eslintignore",