javascript - gulp-connect and connect.reload -
i trying set simple server test out d3.js stuff. i'm following screencast on tagtree.tv. code matches his, cannot index.html reload when make change js or sass files.
i'm new gulp far can tell things ok, that's based upon assumption call connect.reload() reload whatever browser looking @ content. should noted livereload js being inserted index.html file.
my directory structure follows:
d3play -bower_components -dist -css -scripts - node_modules -sass -scripts gulpfile.js index.html package.json
my gulpfile.js looks 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 simple , tested livereload solution based on connect
server , connect-livereload
, gulp-livereload
plugins 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, // files want watch changes live reload filestowatch: ['*.{html,css,js}', '!gulpfile.js'] } // default task - called when run `gulp` 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); });
Comments
Post a Comment