stechico
12/21/2013 - 8:14 AM

gulpfile for a simple livereload static web server. this is a proof of concept that uses no plugins to do the work. obviously there are plug

gulpfile for a simple livereload static web server. this is a proof of concept that uses no plugins to do the work. obviously there are plugins that eliminate almost all of this code but i thought it would be a fun demonstration. this will trigger livereload any time any file is modified in the current working directory. it also serves the current directory via express on port 8080

package.json
content_copyfile_download
{
  "name": "site",
  "dependencies": {
    "tiny-lr": "0.0.5",
    "gulp": "~3.2.0",
    "express": "~3.4.7",
    "gulp-util": "~2.2.0"
  }
}
gulpfile.js
content_copyfile_download
var gulp = require('gulp');
var gutil = require('gulp-util');
var express = require('express');
var path = require('path');
var tinylr = require('tiny-lr');

var createServers = function(port, lrport) {
  var lr = tinylr();
  lr.listen(lrport, function() {
    gutil.log('LR Listening on', lrport);
  });

  var app = express();
  app.use(express.static(path.resolve('./')));
  app.listen(port, function() {
    gutil.log('Listening on', port);
  });

  return {
    lr: lr,
    app: app
  };
};

var servers = createServers(8080, 35729);

gulp.task('default', function(){
  gulp.watch(["./**/*", "!./node_modules/**/*"], function(evt){
    gutil.log(gutil.colors.cyan(evt.path), 'changed');
    servers.lr.changed({
      body: {
        files: [evt.path]
      }
    });
  });
});