我正在尝试设置一个简单的服务器来测试一些 d3.js 的东西。我正在关注 tagtree.tv 上的截屏视频。我的代码与他的代码匹配,但当我更改 JS 或 SASS 文件时,我无法重新加载我的 index.html。
据我所知,我是 gulp 的新手,但这是基于我的假设,即调用 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']);