Create a gist now

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
server.use(livereload({
port: livereloadport
}));
server.use(express.static('./build'));
//Task for sass using libsass through gulp-sass
gulp.task('sass', function(){
gulp.src('sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('build'))
.pipe(refresh(lrserver));
});
//Task for processing js with browserify
gulp.task('browserify', function(){
gulp.src('js/*.js')
.pipe(browserify())
.pipe(concat('bundle.js'))
.pipe(gulp.dest('build'))
.pipe(refresh(lrserver));
});
//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(){
gulp.src('views/*.html')
.pipe(gulp.dest('build'))
.pipe(refresh(lrserver));
});
//Convenience task for running a one-off build
gulp.task('build', function() {
gulp.run('html', 'browserify', 'sass');
});
gulp.task('serve', function() {
//Set up your static fileserver, which serves files in the build dir
server.listen(serverport);
//Set up your livereload server
lrserver.listen(lrport);
});
gulp.task('watch', function() {
//Add watching on sass-files
gulp.watch('sass/*.scss', function() {
gulp.run('sass');
});
//Add watching on js-files
gulp.watch('js/*.js', function() {
gulp.run('browserify');
});
//Add watching on html-files
gulp.watch('views/*.html', function () {
gulp.run('html');
});
});
gulp.task('default', function () {
gulp.run('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'])
.pipe(browserify())
.pipe(concat('dest.js'))
.pipe(gulp.dest('dist/build'))
.pipe(refresh(lrserver));
});
gulp.task('styles', function() {
return gulp.src(['app/css/style.less'])
.pipe(less())
.on('error', console.log)
.pipe(minifyCSS())
.pipe(gulp.dest('dist/build'))
.pipe(refresh(lrserver));
});
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
lrserver.listen(livereloadport);
});
gulp.task('html', function() {
return gulp.src("app/*.html")
.pipe(embedlr())
.pipe(gulp.dest('dist/'))
.pipe(refresh(lrserver));
})
gulp.task('assets', function() {
return gulp.src("app/assets/**")
.pipe(imagemin({optimizationLevel: 5}))
.pipe(gulp.dest('dist/assets/'))
.pipe(refresh(lrserver));
});
// Requires gulp >=v3.5.0
gulp.task('watch', function () {
gulp.watch('app/src/**', ['scripts']);
gulp.watch('app/css/**', ['styles']);
gulp.watch('app/**/*.html', ['html']);
gulp.watch('app/assets/**', ['assets']);
});
gulp.task('default', ['scripts', 'styles', 'html', 'assets', 'serve', 'watch']);

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?

lrport should be replaced with livereloadport

Thanks!

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