Added error notification and livereload

gulpfile.js

@@ -4,26 +4,65 @@ var source = require('vinyl-source-stream');
 var browserify = require('browserify');
 var watchify = require('watchify');
 var reactify = require('reactify');
+var notifier = require('node-notifier');
+var server = require('gulp-server-livereload');
 
-gulp.task('default', function() {
-  var bundler = watchify(browserify({
-    entries: ['./src/app.jsx'],
-    transform: [reactify],
-    extensions: ['.jsx'],
-    debug: true,
-    cache: {},
-    packageCache: {},
-    fullPaths: true
-  }));
-
-  function build(file) {
-    if (file) gutil.log('Recompiling ' + file);
-    return bundler
-      .bundle()
-      .on('error', gutil.log.bind(gutil, 'Browserify Error'))
-      .pipe(source('main.js'))
-      .pipe(gulp.dest('./'));
-  };
-  build();
-  bundler.on('update', build);
+var notify = function(error) {
+  var message = 'In: ';
+  var title = 'Error: ';
+
+  if(error.description) {
+    title += error.description;
+  } else if (error.message) {
+    title += error.message;
+  }
+
+  if(error.filename) {
+    var file = error.filename.split('/');
+    message += file[file.length-1];
+  }
+
+  if(error.lineNumber) {
+    message += '\nOn Line: ' + error.lineNumber;
+  }
+
+  notifier.notify({title: title, message: message});
+};
+
+var bundler = watchify(browserify({
+  entries: ['./src/app.jsx'],
+  transform: [reactify],
+  extensions: ['.jsx'],
+  debug: true,
+  cache: {},
+  packageCache: {},
+  fullPaths: true
+}));
+
+function bundle() {
+  return bundler
+    .bundle()
+    .on('error', notify)
+    .pipe(source('main.js'))
+    .pipe(gulp.dest('./'))
+}
+bundler.on('update', bundle)
+
+gulp.task('build', function() {
+  bundle()
 });
+
+gulp.task('serve', function(done) {
+  gulp.src('')
+    .pipe(server({
+      livereload: {
+        enable: true,
+        filter: function(filePath, cb) {
+          cb( /main.js/.test(filePath) )
+        }
+      },
+      open: true
+    }));
+});
+
+gulp.task('default', ['build', 'serve']);

package.json

@@ -12,7 +12,9 @@
     "gulp": "^3.8.11",
     "gulp-concat": "^2.5.2",
     "gulp-react": "^3.0.1",
+    "gulp-server-livereload": "^1.3.0",
     "gulp-util": "^3.0.4",
+    "node-notifier": "^4.2.1",
     "react": "^0.13.1",
     "reactify": "^1.1.0",
     "vinyl-source-stream": "^1.1.0",

src/app.jsx

@@ -3,7 +3,7 @@ var React = require('react');
 var Hello = React.createClass({
   render: function() {
     return <h1>
-      Hello, React!
+      Hello!
     </h1>
   }
 });