Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 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')(),
http = require('http'),
ecstatic = require('ecstatic'),
livereloadport = 35729,
serverport = 5000;
//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 embedding the livereload snippet into html-files
//This could be replaced with connect-livereload if using a connect-static-server
//Ecstatic(the static server in use) does not have livereload-middleware
gulp.task('html', function(){
gulp.src('views/*.html')
.pipe(embedlr())
.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
http.createServer(ecstatic({ root: __dirname + '/build' })).listen(serverport);
//Set up your livereload server
lrserver.listen(livereloadport);
});
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');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.