Last active
March 28, 2021 20:07
-
-
Save mollerse/8450954 to your computer and use it in GitHub Desktop.
Gulpfile for livereload + static server
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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']); |
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
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?