NodeJS + Express + Gulp + Browsersync

gulpfile.js

var gulp            = require('gulp');
var gulpif          = require('gulp-if');
var argv            = require('yargs').argv;
var autoprefixer    = require('gulp-autoprefixer');
var sass            = require('gulp-sass');
var csso            = require('gulp-csso');
var buffer          = require('vinyl-buffer');
var jshint          = require('gulp-jshint');
var concat          = require('gulp-concat');
var uglify          = require('gulp-uglify');
var sourcemaps      = require('gulp-sourcemaps');
var plumber         = require('gulp-plumber');
var gutil           = require('gulp-util');
var nodemon         = require('gulp-nodemon');
var browsersync     = require('browser-sync').create();

var PROXY_SERVER_HOST                   = 'localhost';
var PROXY_SERVER_PORT                   = process.env.PORT || 3000;
var WAIT_TIME_FOR_PROXY_SERVER_START    = 10000;  // in ms
var WAIT_TIME_FOR_PROXY_SERVER_RESTART  = 5000;   // in ms


// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
  return gulp.src('public/css/main.scss')
    .pipe(plumber())
    .pipe(gutil.env.ENV === 'production' ? sourcemaps.init() : gutil.noop())
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gutil.env.ENV === 'production' ? sourcemaps.write() : gutil.noop())
    .pipe(gutil.env.ENV === 'production' ? csso() : gutil.noop())
    .pipe(gulp.dest('public/css'))
    // ignore sourcemaps (.map files) if generated
    .pipe(browsersync.stream({match: '**/*.css'}));
});

gulp.task('js', function() {
  return gulp.src('public/js/lib/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'))
    .pipe(gutil.env.ENV === 'production' ? sourcemaps.init() : gutil.noop())
    .pipe(concat('main.js'))
    .pipe(gulp.dest('public/js'))
    .pipe(gutil.env.ENV === 'production' ? uglify() : gutil.noop())
    .pipe(gutil.env.ENV === 'production' ? sourcemaps.write() : gutil.noop())
    .pipe(gulp.dest('public/js'));
});

// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) {
    browsersync.reload();
    done();
});

gulp.task('nodemon', function () {
  return nodemon({
    script: 'server.js',
    ext: 'js pug',
    ignore: [
      'gulpfile.js',
      'node_modules/',
      'package.json',
      'public/',
      'test/'
    ]
  })
  .on('start', function () {
    gutil.log('Waiting for server to start.');
  })
  .on('restart', function () {
    gutil.log('Waiting for server to restart.');

    if (gutil.env.ENV !== 'production') {
      setTimeout(function () {
        browsersync.reload({ stream: false });
      }, WAIT_TIME_FOR_PROXY_SERVER_RESTART);
    }
  });
});

gulp.task('watch', ['nodemon'], function() {
  if (gutil.env.ENV !== 'production') {
    gutil.log('Initialising browser sync.');

    setTimeout(function () {
      gulp.watch('public/css/**/*.scss', ['sass']);
      gulp.watch('public/js/**/*.js', ['js-watch']);
      gulp.watch('public/fonts/**/*.*', browsersync.reload);

      browsersync.init({
        proxy: {
          target: 'http://'+PROXY_SERVER_HOST+':'+PROXY_SERVER_PORT,
          ws: true
        },
        port: 4000,  // use *different* port than above
        notify: true
      });
    }, WAIT_TIME_FOR_PROXY_SERVER_START);
  }
});

gulp.task('build', ['sass', 'js']);
gulp.task('default', ['build', 'watch']);