Skip to content

Instantly share code, notes, and snippets.

@pete-otaqui
Created December 7, 2014 19:07
Show Gist options
  • Save pete-otaqui/397e1989db3ea10e9d6a to your computer and use it in GitHub Desktop.
Save pete-otaqui/397e1989db3ea10e9d6a to your computer and use it in GitHub Desktop.
Simple Gulpfile with static serving and live reload
var gulp = require('gulp'),
connect = require('connect'),
serveStatic = require('serve-static'),
livereloadInjector = require('connect-livereload'),
livereloadTinyLR = require('tiny-lr'),
path = require('path'),
gutil = require('gulp-util');
var FOLDER_DEST = '.',
PORT_SERVER = process.env.PORT || 8888,
PORT_LIVERELOAD = 35729;
var livereloadServer = livereloadTinyLR(),
middlewareLivereload = livereloadInjector(),
middlewareStatic = serveStatic(FOLDER_DEST);
function notifyLivereload(event) {
var filename = path.relative(__dirname, event.path);
livereloadServer.changed({
body: {
files: [filename]
}
});
}
gulp.task('server', ['livereload'], function(next) {
var server = connect();
server
.use(middlewareLivereload)
.use(middlewareStatic)
.use(function(req, res, next) {
var url = req.url;
gutil.log(url);
next();
})
.listen(PORT_SERVER, next);
});
gulp.task('livereload', function() {
livereloadServer.listen(PORT_LIVERELOAD);
});
gulp.task('watch', ['server'], function() {
gulp.watch(FOLDER_DEST + '/*.css').on('change', notifyLivereload);
gulp.watch(FOLDER_DEST + '/*.html').on('change', notifyLivereload);
gulp.watch(FOLDER_DEST + '/*.js').on('change', notifyLivereload);
});
gulp.task('default', ['watch']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment