Set up watching in Gruntfile

.jshintrc

@@ -34,12 +34,14 @@
   "globals": {
     "afterEach": true,
     "beforeEach": true,
+    "console": true,
     "define": true,
     "describe": true,
     "expect": true,
     "it": true,
     "jasmine": true,
     "module": true,
+    "process": true,
     "require": true,
     "requirejs": true,
     "spyOn": true,

Dockerfile

@@ -64,4 +64,6 @@ WORKDIR /opt/phantom-talk
 COPY package.json /opt/phantom-talk/package.json
 RUN ["npm", "install"]
 EXPOSE 8000
+EXPOSE 8001
+EXPOSE 35729
 ENTRYPOINT ["npm"]

Gruntfile.js

@@ -1,6 +1,7 @@
 var _ = require('lodash');
 var glob = require('glob');
 var requireConfig = require('./assets/app/config');
+var spawn = require('child_process').spawn;
 
 function buildRequireConfig(options) {
   'use strict';
@@ -67,7 +68,9 @@ module.exports = function (grunt) {
 
     clean: {
       app: './static/app',
-      compass: './sass-cache'
+      compass: './sass-cache',
+      karma: './karma-*',
+      tmp: './tmp-*.tmp'
     },
 
     compass: {
@@ -81,7 +84,18 @@ module.exports = function (grunt) {
       }
     },
 
-    karma: {unit: {configFile: 'config/test.js'}},
+    karma: {
+      server: {
+        configFile: 'config/test.js',
+        background: true
+
+      },
+      unit: {
+        configFile: 'config/test.js',
+        background: false,
+        singleRun: true
+      }
+    },
 
     jshint: {
       options: {jshintrc: './.jshintrc'},
@@ -96,20 +110,44 @@ module.exports = function (grunt) {
     jscs: {
       src: ['Gruntfile.js', 'test/**/*.js'],
       options: {config: '.jscsrc'}
+    },
+
+    watch: {
+      style: {
+        files: '<%= compass.dist.options.sassDir %>/**/*.scss',
+        tasks: ['compass'],
+        options: {livereload: true}
+      },
+      handlebars: {
+        files: './assets/**/*.hbs',
+        tasks: ['js'],
+        options: {livereload: true}
+      },
+      app: {
+        files: './assets/**/*.js',
+        tasks: ['js'],
+        options: {livereload: true}
+      },
+      test: {
+        files: './test/**/*.js',
+        tasks: ['test'],
+        options: {livereload: true}
       }
+    }
+  });
 
+  grunt.registerTask('run-deck', function () {
+    var deck = spawn('./bin/deck');
+    grunt.log.writeln('Running deck with pid: ' + deck.pid);
+    deck.stdout.pipe(process.stdout);
+    deck.stderr.pipe(process.stderr);
   });
 
-  grunt.registerTask('test', ['jshint', 'jscs', 'karma']);
+  grunt.registerTask('test', ['jshint', 'jscs', 'karma:unit', 'clean:karma']);
   grunt.registerTask('dev', ['default']);
-  grunt.registerTask('style', ['compass', 'clean:compass']);
-
-  grunt.registerTask('default', [
-    'clean:app',
-    'style',
-    'handlebars',
-    'copy',
-    'requirejs',
-    'jshint'
-  ]);
+  grunt.registerTask('style', ['compass', 'clean:compass', 'clean:tmp']);
+  grunt.registerTask('js', ['handlebars', 'copy', 'requirejs', 'test']);
+  grunt.registerTask('build', ['clean:app', 'style', 'js', 'watch']);
+
+  grunt.registerTask('default', ['run-deck', 'karma:server', 'build']);
 };

assets/index.html

@@ -19,5 +19,6 @@
     });
   }(this));
   </script>
+  <script src="//localhost:35729/livereload.js"></script>
 </body>
 </html>

bin/deck

@@ -9,6 +9,16 @@ var express = require('express');
 var app = express();
 var staticHandler = express['static'].bind(express);
 
+app.use((function log() {
+  var text = '{{date}} {{req.method}} {{req.url}}';
+  var logTemplate = handlebars.compile(text);
+
+  return function (req, res, next) {
+    console.log(logTemplate({date: new Date().toISOString(), req: req}));
+    next();
+  };
+}()));
+
 app.get('/', function index(req, res) {
   var indexFile = __dirname + '/../assets/index.html';
 

config/test.js

@@ -35,7 +35,7 @@ module.exports = function(config) {
     reporters: ['progress'],
 
     // web server port
-    port: 8000,
+    port: 8001,
 
     // enable / disable colors in the output (reporters and logs)
     colors: true,
@@ -47,7 +47,7 @@ module.exports = function(config) {
 
     // enable / disable watching file and executing tests
     // whenever any file changes
-    autoWatch: false,
+    autoWatch: true,
 
     // start these browsers
     // available browser launchers:
@@ -56,6 +56,6 @@ module.exports = function(config) {
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
-    singleRun: true
+    singleRun: false
   });
 };

scripts/bash

@@ -7,6 +7,6 @@ docker run \
     --interactive \
     --tty \
     --volume $(abspath $dir/..):/opt/phantom-talk \
-    --publish=8000:8000 \
+    $port_args \
     --entrypoint /bin/bash \
     phantom-talk

scripts/common

@@ -1,3 +1,7 @@
+# vi: ft=sh
+
+export port_args='--publish 8000:8000 --publish 8001:8001 --publish 35729:35729'
+
 function abspath {
   python -c 'import sys, os; print(os.path.abspath(sys.argv[1]))' "$1"
 }

scripts/dev

@@ -5,6 +5,6 @@ source $dir/common
 
 docker run \
     --volume $(abspath $dir/..):/opt/phantom-talk \
-    --publish 8000:8000 \
+    $port_args \
     phantom-talk \
     run dev

scripts/run

@@ -5,6 +5,6 @@ source $dir/common
 
 docker run \
     --volume $(abspath $dir/..):/opt/phantom-talk \
-    --publish 8000:8000 \
+    $port_args \
     phantom-talk \
     run deck

scripts/test

@@ -5,6 +5,6 @@ source $dir/common
 
 docker run \
     --volume $(abspath $dir/..):/opt/phantom-talk \
-    --publish 8000:8000 \
+    $port_args \
     phantom-talk \
     test