Instantly share code, notes, and snippets.

What would you like to do?
Gulpfile for livereload + static server
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserify = require('gulp-browserify'),
concat = require('gulp-concat'),
embedlr = require('gulp-embedlr'),
refresh = require('gulp-livereload'),
lrserver = require('tiny-lr')(),
express = require('express'),
livereload = require('connect-livereload')
livereloadport = 35729,
serverport = 5000;
//We only configure the server here and start it only when running the watch task
var server = express();
//Add livereload middleware before static-middleware
port: livereloadport
//Task for sass using libsass through gulp-sass
gulp.task('sass', function(){
//Task for processing js with browserify
gulp.task('browserify', function(){
//Task for moving html-files to the build-dir
//added as a convenience to make sure this gulpfile works without much modification
gulp.task('html', function(){
//Convenience task for running a one-off build
gulp.task('build', function() {'html', 'browserify', 'sass');
gulp.task('serve', function() {
//Set up your static fileserver, which serves files in the build dir
//Set up your livereload server
gulp.task('watch', function() {
//Add watching on sass-files'sass/*.scss', function() {'sass');
//Add watching on js-files'js/*.js', function() {'browserify');
//Add watching on html-files'views/*.html', function () {'html');
gulp.task('default', function () {'build', 'serve', 'watch');
var http = require('http');
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');
var less = require('gulp-less');
var refresh = require('gulp-livereload');
var lr = require('tiny-lr');
var lrserver = lr();
var minifyCSS = require('gulp-minify-css');
var embedlr = require('gulp-embedlr');
var ecstatic = require('ecstatic');
var imagemin = require('gulp-imagemin');
var livereloadport = 35729,
serverport = 5001;
gulp.task('scripts', function() {
return gulp.src(['app/src/**/*.js'])
gulp.task('styles', function() {
return gulp.src(['app/css/style.less'])
.on('error', console.log)
gulp.task('serve', function() {
//Set up your static fileserver, which serves files in the build dir
http.createServer(ecstatic({ root: __dirname + '/dist' })).listen(serverport);
//Set up your livereload server
gulp.task('html', function() {
return gulp.src("app/*.html")
gulp.task('assets', function() {
return gulp.src("app/assets/**")
.pipe(imagemin({optimizationLevel: 5}))
// Requires gulp >=v3.5.0
gulp.task('watch', function () {'app/src/**', ['scripts']);'app/css/**', ['styles']);'app/**/*.html', ['html']);'app/assets/**', ['assets']);
gulp.task('default', ['scripts', 'styles', 'html', 'assets', 'serve', 'watch']);

This comment has been minimized.

2WheelCoder commented Jul 18, 2014

Thanks for the code! In gulpfile-server.js I had an error on line 57 because there is no lrport. I changed it to livereloadport and the whole thing crashed. So I just commented it out and everything works great, maybe because the port was specified on line 17?


This comment has been minimized.

designeng commented Dec 1, 2015

lrport should be replaced with livereloadport


This comment has been minimized.

herberthamaral commented Jan 12, 2016


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment