Gulpfile with server, livereload, etc.

gulpfile.js

var gulp      = require('gulp');
var plumber   = require('gulp-plumber'); // used for error catching during watch
var less      = require('gulp-less');
var swig      = require('gulp-swig');
var webserver = require('gulp-webserver');
var changed   = require('gulp-changed'); // only move changed files
var opn       = require('opn'); // for opening the browser

var sourcePaths = {
  styles:     ['less/**/*.less'],
  templates:  ['templates/**/*.html'],
  images:     ['img/**/*']
};

var distPaths = {
  styles:     'dist/css',
  templates:  'dist',
  images:     'dist/img'
};

var server = {
  host: 'localhost',
  port: '8001'
}

gulp.task('less', function () {
  gulp.src( sourcePaths.styles )
    .pipe(plumber())
    .pipe(less())
    .pipe(gulp.dest( distPaths.styles ));
});

gulp.task('templates', function() {
  gulp.src( sourcePaths.templates )
    .pipe(plumber())
    .pipe(swig({
      defaults: {
        cache: false
      }
    }))
    .pipe(gulp.dest( distPaths.templates ))
});

gulp.task('webserver', function() {
  gulp.src( distPaths.templates )
    .pipe(webserver({
      host:             server.host,
      port:             server.port,
      livereload:       true,
      directoryListing: false
    }));
});

gulp.task('images', function () {
  gulp.src( sourcePaths.images )
    .pipe(changed( distPaths.images ))
    .pipe(gulp.dest( distPaths.images ));
});

gulp.task('openbrowser', function() {
  opn( 'http://' + server.host + ':' + server.port );
});

// Rerun the task when a file changes
gulp.task('watch', function(){
  gulp.watch(sourcePaths.styles, ['less']);
  gulp.watch(sourcePaths.templates, ['templates']);
  gulp.watch(sourcePaths.images, ['images']);
});


// The default task (run with just `gulp`) runs 'watch', and starts a local express server
gulp.task('default', ['webserver', 'watch', 'images', 'openbrowser', 'images']);

// The build task
gulp.task('build', ['less', 'templates', 'images']);