Gulping with Nodemon and Watch

Recently I began learning to Gulp. It goes down quick, I like it.

One of the things I set about having gulp do for me was: automatically restart my npm development server while concatenating and uglifying my public/client javascript files, placing the result in my distribution folder.

Here are the modules that I used, and my concat/uglify task:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var nodemon = require('gulp-nodemon');


gulp.task('scripts', function(){
  return gulp.src(['./public/lib/jquery.js',
                   './public/lib/underscore.js',
                   './public/lib/backbone.js',
                   './public/lib/socket.io.js',
                   './public/client/**/*.js'])
          .pipe(concat('scripts.js'))
          .pipe(rename('scripts.min.js'))
          .pipe(uglify())
          .pipe(gulp.dest('./public/dist/'));
});

Awesome, now I can insert just one file instead of many in my index.html. However during development this became cumbersome, as everytime I made a change I needed to run this script again. So I added a watcher:

gulp.task('watch-public', function(){
  gulp.watch(['public/', '!public/dist/*.js'], ['scripts']);
});

When run, this will watch the specified directory and run the script task when changes are detected, while ignoring the distribution folder. Lastly we must make nodemon reset whenever this happens as well:

gulp.task('develop', function(){
  gulp.start('scripts');
  nodemon({ 
    script: './server.js',
    env: { 'NODE_ENV': 'development' },
    ignore: ['public/dist/']
  })
  //have nodemon run watch on start
  .on('start', ['watch-public']);
});