title: how to setup gulp watch
body: <p>My directory structure is something like:</p>
  
  <pre><code>  -client/
       index.html
       app.js
       js/
         -controllers/
         -directives/
       partials/
           someHTML.html
           anotherHTML.html
  
    -server
       server.js
  </code></pre>
  
  <p>I have setup a Gulpfile.js in the client directory. I am not quiet sure how to setup a watch task so that gulp automatically rebuilds and refreshes my browser. This is what I have been trying out till now:</p>
  
  <pre><code>/*jshint globalstrict: true*/
  'use strict';
  
  var gulp = require('gulp'),
      browserify = require('gulp-browserify'),
      clean = require('gulp-clean'),
      connect = require('gulp-connect'),
      jshint = require('gulp-jshint'),
      stylish = require('jshint-stylish');
  
  
  var liveReload = true;
  
  gulp.task('clean', function () {
      return gulp.src(['./dist'], {
              read: false
          })
          .pipe(clean());
  });
  
  gulp.task('browserify', ['lint'], function () {
      // Single entry point to browserify
      gulp.src('app.js')
          .pipe(browserify({
              insertGlobals: true,
              debug: true
          }))
          .pipe(gulp.dest('./dest'));
  });
  
  gulp.task('lint', function () {
      return gulp.src(['gulpfile.js',
      'app.js',
      'controllers/*.js',
      'directives/*.js'
   ])
          .pipe(jshint())
          .pipe(jshint.reporter(stylish));
  });
  
  gulp.task('connect', function () {
      connect.server({
          root: '.',
          livereload: true
      });
  });
  
  gulp.task('html', function () {
      gulp.src(['./**/*.html', '!./node_modules/**'])
          .pipe(connect.reload());
  });
  
  gulp.task('watch', function () {
      gulp.watch(['./**/*.js', '!./node_modules/**'], ['html']);
  });
  
  
  gulp.task('default', ['clean', 'connect', 'watch'], function () {
      var liveReload = false;
      gulp.start('browserify');
  });
  </code></pre>