我正在尝试设置一个简单的服务器来测试一些d3.js的东西.我正在关注tagtree.tv上的截屏视频.我的代码与他匹配,但是当我对JS或SASS文件进行更改时,我无法重新加载我的index.html.
我是新来的,所以我可以说事情看起来不错,但这是基于我的假设,即对connect.reload()的调用会重新加载任何浏览器正在查看其内容.应该注意的是,livereload JS正被插入到我的index.html文件中.
我的目录结构如下:
d3play -bower_components -dist -css -scripts - node_modules -sass -scripts gulpfile.js index.html package.json
我的gulpfile.js看起来像这样:
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']);
解决方法
这是一个基于连接服务器的
simple and tested livereload solution和connect-livereload以及gulp-livereload插件,可能会有所帮助:
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',function () { return opn('http://localhost:' + config.servingPort); }); gulp.task('connect',function(){ return connect() .use(connectLivereload()) .use(connect.static(config.rootDir)) .listen(config.servingPort); });