Better gulp

gulpfile.js

@@ -1,5 +1,6 @@
 var gulp = require('gulp');
 var uglify = require('gulp-uglify');
+var nodemon = require('gulp-nodemon');
 
 gulp.task('watch', function() {
   gulp.watch('src/js/main.js', ['build']);
@@ -11,4 +12,16 @@ gulp.task('uglify', function() {
   gulp.src('src/js/main.js')
     .pipe(uglify())
     .pipe(gulp.dest('src/public'));
-});
+});
+
+gulp.task('start', function() {
+  nodemon({
+    script: 'index.js',
+    ext: 'css js mustache',
+    ignore: ['src/public/main.js'],
+    env: {
+      'NODE_ENV': 'development'
+    },
+    tasks: ['build']
+  })
+})

package.json

@@ -18,7 +18,9 @@
     "underscore": "^1.8.3",
     "uuid": "^2.0.1"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "gulp-nodemon": "^2.0.6"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "jsbuild": "uglifyjs src/js/main.js --compress --mangle -o src/public/main.js"

readme.md

@@ -11,12 +11,7 @@ Install dependencies
 You need Gulp installed globally:
 
     npm install -g gulp
-    gulp watch
-
-Run the app (nodemon is nice to have)
-
-    npm install -g nodemon
-    nodemon --watch src index.js -e css,js,mustache
+    gulp start
 
 FattyChat is now running on `http://localhost:3000`
 
@@ -24,4 +19,4 @@ FattyChat is now running on `http://localhost:3000`
 
 Build source
 
-    gulp build
+    gulp build

src/js/main.js

@@ -25,6 +25,7 @@ $(function() {
   var $key = $('#key');
   var $genKey = $('.new_key');
   var $removeKey = $('#remove_key');
+  var $participants = $('#participants');
 
   var $chatPage = $('.chat.page'); // The chatroom page
 
@@ -49,11 +50,17 @@ $(function() {
 
   function addParticipantsMessage (data) {
     var message = '';
+    var headerMsg = '';
+
     if (data.numUsers === 1) {
       message += "There's 1 participant";
+      headerMsg = "1 Participant";
     } else {
       message += "There are " + data.numUsers + " participants";
+      headerMsg = data.numUsers + " participants";
     }
+
+    $participants.text(headerMsg);
     log(message);
   }
 

src/views/index.mustache

@@ -24,7 +24,7 @@
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
-        <a class="navbar-brand" href="#">FattyChat</a>
+        <a class="navbar-brand" href="#">FattyChat</a> <small id="participants"></small>
       </div>
 
       <!-- Collect the nav links, forms, and other content for toggling -->