Merge pull request #9 from MattSurabian/live-reload

Live reload

Author: MattSurabian

README.md

@@ -4,13 +4,15 @@
 
 This is an implementation of DuckHunt in javascript using HTML5 audio.
 
-All of the game logic is in the duckhunt directory.  This project uses [gulp](http://gulpjs.com/) to build two concatenated js files;
+All of the game logic is in the duckhunt directory. This project uses [gulp](http://gulpjs.com/) to build two concatenated js files;
 one representing all of our game logic the other representing necessary javascript library dependencies.
 
 This refactor of the game relies on custom events to control game flow which has cut down a bit on the "animation callback hell"
 faced in version 1.
 
-To work with this project on your own simply clone this git repo into a directory, and run `npm install` inside that
-directory. The package.json file included in this repo helps npm install all the necessary node module dependencies.  Make your edits
-to the code and run `gulp`. The default gulp task will lint the javascript, concatenate, and minify it into the build
-directory.
+## Working With This Repo
+
+1. Clone the repo into a directory of your choice
+1. `cd` into that directory and run `npm install`
+1. Use the `gulp dev` task during active development. This task automatically builds all necessary JS files and triggers the [livereload browser extension](http://livereload.com/extensions/) to do its thing and reload the page when changes are detected in the `lib` and `duckhunt` directories.
+1. If you want to manually cut a build of the JS the default gulp task will lint, concatenate, and minify the project's javascript files it into the build directory.

gulpfile.js

@@ -3,12 +3,23 @@ var concat = require('gulp-concat');
 var uglify = require('gulp-uglify');
 var jshint = require('gulp-jshint');
 var gutil = require('gulp-util');
+var livereload = require('gulp-livereload');
+
+// Command line option:
+//  --fatal=[warning|error|off]
+var fatalLevel = require('yargs').argv.fatal;
+
+var ERROR_LEVELS = ['error', 'warning'];
+
+function isFatal(level) {
+  return ERROR_LEVELS.indexOf(level) <= ERROR_LEVELS.indexOf(fatalLevel || 'error');
+}
 
 // Handle an error based on its severity level.
 // Log all levels, and exit the process for fatal levels.
 function handleError(level, error) {
   gutil.log(gutil.colors.red(error.message));
-  if (level === 'error') {
+  if (isFatal(level)) {
     process.exit(1);
   }
 }
@@ -29,19 +40,32 @@ gulp.task('duckhunt', function() {
     .on('error', handleError.bind(this, 'error'))
     .pipe(concat('duckhunt.min.js'))
     .pipe(uglify())
-    .pipe(gulp.dest('./build/'));
+    .pipe(gulp.dest('./build/'))
+    .pipe(livereload());
 });
 
 gulp.task('libs', function() {
   return gulp.src([
-    './lib/jquery.js',
-    './lib/underscore.js',
-    './lib/jquery.spritely.js',
-    './lib/jquery.color.js',
-    './lib/fastclick.js'
+    'lib/jquery.js',
+    'lib/underscore.js',
+    'lib/jquery.spritely.js',
+    'lib/jquery.color.js',
+    'lib/fastclick.js'
   ]).pipe(concat('libs.min.js'))
     .pipe(uglify())
-    .pipe(gulp.dest('./build/'));
+    .pipe(gulp.dest('./build/'))
+    .pipe(livereload());
+});
+
+gulp.task('dev', function() {
+  // no fatal errors during active development by default
+  // this prevents this task from exiting unexpectedly
+  fatalLevel = fatalLevel || 'off';
+
+  livereload.listen();
+  gulp.watch('duckhunt/*.js', ['duckhunt']);
+  gulp.watch('lib/*.js', ['libs']);
+
 });
 
 gulp.task('default', ['libs', 'duckhunt']);

package.json

@@ -23,7 +23,9 @@
     "gulp": "^3.9.0",
     "gulp-concat": "^2.5.2",
     "gulp-jshint": "^1.11.0",
+    "gulp-livereload": "^3.8.0",
     "gulp-uglify": "^1.2.0",
-    "gulp-util": "^3.0.5"
+    "gulp-util": "^3.0.5",
+    "yargs": "^3.10.0"
   }
 }