Lots of build changes and production JS build

.grunt-tasks/env.js

@@ -0,0 +1,8 @@
+module.exports = {
+	dev: {
+		NODE_ENV : "development"
+	},
+	dist: {
+		NODE_ENV : "production"
+	}
+};

.grunt-tasks/eslint.js

@@ -4,6 +4,7 @@ module.exports = {
 			"./src/javascripts/**/*.js",
 			"./Gruntfile.js",
 			"./webpack.config.js",
+			"./webpack.production.config.js",
 			"./.grunt-tasks/**/*.js",
 			"./web/server/**/*.js",
 			"./web/client/**/*.js"

.grunt-tasks/parallel.js

@@ -2,22 +2,10 @@ module.exports = {
 	options: {
 		stream: true
 	},
-	watch: {
-		tasks: [{
-			grunt: true,
-			args: ["watch:sass"]
-		}, {
-			grunt: true,
-			args: ["watch:eslint"]
-		}, {
-			grunt: true,
-			args: ["watch:jsbuild"]
-		}, {
-			grunt: true,
-			args: ["watch:express"]
-		}, {
-			grunt: true,
-			args: ["watch:public"]
-		}]
-	},
+	default: {
+		options: {
+			grunt: true
+		},
+		tasks: ["sassdoc", "documentation", "modernizr", "sass:dev", "webpack:dev"]
+	}
 };

.grunt-tasks/sass.js

@@ -25,7 +25,7 @@ module.exports = {
 			outputStyle: "compressed"
 		},
 		files: {
-			"./dist/stylesheets/main.css": "./web/client/stylesheets/main.scss"
+			"./dist/stylesheets/app.css": "./web/client/stylesheets/app.scss"
 		}
 	},
 	dev: {
@@ -34,7 +34,7 @@ module.exports = {
 			includePaths: ["./src/stylesheets"]
 		},
 		files: {
-			"./dist/stylesheets/main.css": "./web/client/stylesheets/main.scss"
+			"./dist/stylesheets/app.css": "./web/client/stylesheets/app.scss"
 		}
 	}
 };

.grunt-tasks/sasslint.js

@@ -3,6 +3,6 @@ module.exports = {
 		src: ["./src/stylesheets/**/*.scss", "./web/client/stylesheets/**/*.scss"]
 	},
 	options: {
-		configFile: "./src/stylesheets/.sass-lint.yml",
+		configFile: "./src/stylesheets/.sass-lint.yml"
 	}
 };

.grunt-tasks/watch.js

@@ -11,7 +11,7 @@ module.exports = {
 	},
 	jsbuild: {
 		files: ["./src/javascripts/**/*.js", "./web/client/javascripts/**/*.js"],
-		tasks: ["webpack"],
+		tasks: ["webpack:dev"],
 		options: {
 			// Speed up watch task:
 			spawn: false

.grunt-tasks/webpack.js

@@ -1,3 +1,5 @@
 module.exports = {
-	default: require("./../webpack.config.js")
+	dev: require("./../webpack.config.js"),
+
+	dist: require("./../webpack.production.config.js")
 };

Gruntfile.js

@@ -17,17 +17,14 @@ module.exports = function(grunt) {
 	// Generate documentation form comments in SASS and JS
 	r("docs", ["sassdoc", "documentation"]);
 
-	// Build in dev mode
-	r("build", ["modernizr", "sass:dev", "webpack"]);
-
-	// Serve the app and watch for changes
-	r("serve", ["express"/*, "open"*/, "parallel:watch"]);
+	// Serve the app and open in a browser
+	r("serve", ["express", "open"]);
 
 	// For deploying the web app. Builds minified SASS/JS
-	r("dist", ["clean", "sass:dist", "webpack"]);
+	r("dist", ["env:dist", "clean", "sass:dist", "webpack:dist"]);
 
 	// For building before publishing to NPM etc
-	r("publish", ["clean", "sass:publish", "sass:publishMin", "webpack"]);
+	r("publish", ["env:dist", "clean", "sass:publish", "sass:publishMin", "webpack:dist"]);
 
-	r("default", ["lint", "docs", "build", "serve"]);
+	r("default", ["lint", "parallel:default", "watch"]);
 };

README.md

@@ -103,12 +103,10 @@ Before you run any tasks, you'll have to run the following from the command line
 
 | Task | Description |
 | ---- | ----------- |
-| `grunt`      | Default. Lints, builds everything and runs an express server and a watch task for dev changes. |
-| `grunt build` | Builds a custom modernizr package, CSS and JS. Usually not used directly. |
-| `grunt serve` | Runs an express app and watches for changes |
+| `grunt`      | Default. Lints, builds everything in parallel and runs an express server and a watch task for dev changes. |
 | `grunt lint` | Lints SASS (sasslint) and JS (eslint) |
-| `grunt docs` | Generates documentation JSON files for SASS and JS |
-| `grunt dist` | Builds documentation, modernizr, CSS and JS in production mode (minified etc). |
+| `grunt dist` | Builds documentation, modernizr, CSS and JS in production mode (minified etc). Fro deploying the web app itself. |
+| `grunt publish` | Builds minified code for publishing to NPM etc |
 
 #### NPM
 

package.json

@@ -18,8 +18,8 @@
   "main": "web/server/index.js",
   "scripts": {
     "start": "grunt",
-    "build:webpack": "webpack -d --progress --colors",
-    "dist:webpack": "NODE_ENV=production webpack -p",
+    "webpack:dev": "SET \"NODE_ENV=development\" && webpack --progress --colors --display-error-details",
+    "webpack:dist": "SET \"NODE_ENV=production\" && webpack --config ./webpack.production.config.js",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "grunt lint",
     "serve": "set PORT=54321&& node web/server",
@@ -33,7 +33,7 @@
   "devDependencies": {
     "grunt-contrib-watch": "^1.0.0",
     "grunt-express-server": "^0.5.3",
-    "grunt-open": "^0.2.3"
+    "grunt-open": "^0.2.3",
     "webpack-dev-server": "^1.15.2",
     "webpack-notifier": "^1.4.1"
   },
@@ -59,6 +59,7 @@
     "grunt-cli": "^1.2.0",
     "grunt-contrib-clean": "^1.0.0",
     "grunt-documentation": "^1.2.0",
+    "grunt-env": "^0.4.4",
     "grunt-eslint": "^19.0.0",
     "grunt-jsdoc": "^2.1.0",
     "grunt-modernizr": "^1.0.2",
@@ -79,7 +80,7 @@
     "nunjucks": "^2.5.2",
     "sassdoc-extras": "^2.4.1",
     "serve-favicon": "^2.3.0",
-    "webpack": "^1.13.1",
+    "webpack": "^1.13.2"
   },
   "engines": {
     "node": ">=4"

src/javascripts/.eslintignore

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

src/javascripts/.eslintrc.json

@@ -4,6 +4,11 @@
     "es6": true,
     "commonjs": true
   },
+  "globals": {
+  	"process": false,
+  	"$": false,
+  	"PRODUCTION": false
+  },
   "extends": "eslint:recommended",
   "parser": "babel-eslint",
   "plugins": [

src/javascripts/experience.js

@@ -0,0 +1,12 @@
+import $ from "jquery";
+import pluginAutoLoader from "plugin-autoloader";
+
+$().ready(function() {
+
+	// Load any plugins automatically
+	pluginAutoLoader.findPlugins();
+});
+
+export default {
+	test: true
+};

web/client/stylesheets/components/_swatch.scss

@@ -1,5 +1,5 @@
 .swatch {
-  border-radius: 0 999px 999px 999px;
+  border-radius: 0 999px 999px;
   display: none;
   float: left;
   height: 100px;
@@ -12,7 +12,9 @@
   @each $name, $palette in $palettes {
 
     @each $key, $hex in $palette {
-      &--#{$name}-#{$key} {
+      $selector: '#{$name}-#{$key}';
+
+      &--#{$selector} {
         background: $hex;
         display: block;
 

web/server/views/layouts/_layout.njk

@@ -11,7 +11,7 @@
 	<script src="/javascripts/modernizr-custom.js"></script>
 
 	<link rel="shortcut icon" href="/favicon.ico" />
-	<link rel="stylesheet" href="/stylesheets/main.css" type="text/css" media="screen" charset="utf-8">
+	<link rel="stylesheet" href="/stylesheets/app.css" type="text/css" media="screen" charset="utf-8">
 	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
 	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css">
 	<link href="//fonts.googleapis.com/css?family=Lato:200normal,200italic,300normal,300italic,400normal,400italic,700normal,700italic,900normal,900italic" rel="stylesheet" type="text/css">
@@ -106,7 +106,7 @@
 	</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="/javascripts/app.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>
 	<script>hljs.initHighlightingOnLoad();</script>

webpack.config.js

@@ -4,42 +4,39 @@
 var WebpackNotifierPlugin = require("webpack-notifier");
 var webpack = require("webpack");
 
-var isProduction = (process.env.NODE_ENV === "production");
-
 var plugins = [
 	// Notify on success/error
-	new WebpackNotifierPlugin({title: "NICE Bootstrap build"}),
-
-	// Magic globals for environment gating e.g. if (__PRODUCTION__) { }
+	new WebpackNotifierPlugin({title: "NICE Experience"}),
+	new webpack.DefinePlugin({
+		PRODUCTION: false
+	}),
 	new webpack.DefinePlugin({
-		PRODUCTION: isProduction
+		"process.env": {
+			NODE_ENV: JSON.stringify("development")
+		}
+	}),
+	new webpack.ProvidePlugin({
+		$: "jquery"
+	}),
+	new webpack.optimize.UglifyJsPlugin({
+		minimize: false,
+		mangle: false,
+		compress: false,
+		output: {
+			beautify: true
+		}
 	})
 ];
 
- if(isProduction) {
-	plugins.push(
-		new webpack.DefinePlugin({
-			"process.env": {
-				NODE_ENV: JSON.stringify("production")
-			}
-		})
-	);
-}
-
-module.exports = [{
-	name: "js",
+module.exports = {
+	name: "app",
 	entry: [/*"babel-polyfill", */"./web/client/javascripts/app"],
 	output: {
 		path: "./dist/javascripts",
-		filename: "app.bundle.js",
-		sourceMapFilename: "app.bundle.map"
+		filename: "app.js",
+		sourceMapFilename: "app.map"
 	},
 	module: {
-		/*preLoaders: [{
-			test: /\.js$/,
-			loader: "eslint",
-			exclude: /(node_modules|bower_components)/
-		}],*/
 		loaders: [{
 			test: /\.js$/,
 			loaders: ["babel-loader"],
@@ -48,12 +45,12 @@ module.exports = [{
 	},
 	externals: { jquery: "jQuery" },
 	resolve: {
-		root: ["./web/client/javascripts/", "./src/javascripts/"]
+		modulesDirectories: ["./web/client/javascripts/", "./src/javascripts/"]
 	},
 	devtool: "#source-map",
 	plugins: plugins,
 	eslint: {
 		ignorePath: "./src/javascripts/.eslintignore",
 		configFile: "./src/javascripts/.eslintrc.json"
 	}
-}];
+};

webpack.production.config.js

@@ -0,0 +1,55 @@
+/// <binding ProjectOpened="Watch - Development" />
+/*eslint-env node*/
+
+var webpack = require("webpack");
+
+var appConfig = require("./webpack.config.js");
+
+var prodPlugins = [
+	new webpack.optimize.OccurrenceOrderPlugin(true),
+	new webpack.optimize.DedupePlugin(),
+	new webpack.optimize.UglifyJsPlugin({
+		minimize: true,
+		compress: {
+			warnings: false
+		},
+		mangle: {
+			except: ["$super", "$", "exports", "require"]
+		}
+	}),
+	new webpack.optimize.AggressiveMergingPlugin(),
+	new webpack.DefinePlugin({
+		PRODUCTION: true
+	}),
+	new webpack.DefinePlugin({
+		"process.env": {
+			NODE_ENV: JSON.stringify("production")
+		}
+	}),
+	new webpack.ProvidePlugin({
+		$: "jquery"
+	})
+];
+
+appConfig.plugins = prodPlugins;
+
+module.exports = [
+	appConfig,
+	{
+		name: "experience",
+		entry: ["./src/javascripts/experience"],
+		output: {
+			path: "./dist/javascripts",
+			filename: "experience.min.js",
+			sourceMapFilename: "experience.min.map"
+		},
+		module: appConfig.module,
+		resolve: {
+			modulesDirectories: ["./src/javascripts/"]
+		},
+		externals: appConfig.externals,
+		devtool: "#cheap-module-source-map",
+		eslint: appConfig.eslint,
+		plugins: prodPlugins
+	}
+];