I am trying to set up a simple server to test out some d3.js stuff. I'm following a screencast on tagtree.tv. My code matches his, but I cannot get my index.html to reload when I make a change to my JS or SASS files.
I'm new to gulp so as far as I can tell things look OK, but that's based upon my assumption that a call to connect.reload() will reload whatever browser is looking at its content. It should be noted that the livereload JS is being inserted into my index.html file.
My directory structure is as follows:
d3play
-bower_components
-dist
-css
-scripts
- node_modules
-sass
-scripts
gulpfile.js
index.html
package.json
My gulpfile.js looks like this:
var gulp = require('gulp'),
connect = require('gulp-connect'),
traceur = require('gulp-traceur'),
sass = require('gulp-ruby-sass');
gulp.task('connect', function(){
connect.server({
livereload: true
});
});
gulp.task('reload', function(){
gulp.src('./dist/**/*.*')
.pipe(connect.reload());
});
gulp.task('sass', function(){
gulp.src('./sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css'));
});
gulp.task('traceur', function(){
gulp.src('./scripts/*.js')
.pipe(traceur())
.pipe(gulp.dest('./dist/scripts'));
});
gulp.task('watch', function(){
gulp.watch(['./sass/*.scss'], ['sass']);
gulp.watch(['./scripts/*.js'], ['traceur']);
gulp.watch(['./dist/**/*.*'], ['reload']);
});
gulp.task('default', ['connect', 'sass', 'traceur', 'watch']);
Here is a simple and tested livereload solution based on connect
server and connect-livereload
and gulp-livereload
plugins that might help:
var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');
var config = {
rootDir: __dirname,
servingPort: 8080,
// the files you want to watch for changes for live reload
filesToWatch: ['*.{html,css,js}', '!Gulpfile.js']
}
// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);
gulp.task('watch', ['connect'], function () {
gulpLivereload.listen();
gulp.watch(config.filesToWatch, function(file) {
gulp.src(file.path)
.pipe(gulpLivereload());
});
});
gulp.task('serve', ['connect'], function () {
return opn('http://localhost:' + config.servingPort);
});
gulp.task('connect', function(){
return connect()
.use(connectLivereload())
.use(connect.static(config.rootDir))
.listen(config.servingPort);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With