gulp-connect和connect.reload

cre*_*tim 7 javascript livereload gulp

我正在尝试设置一个简单的服务器来测试一些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
Run Code Online (Sandbox Code Playgroud)

我的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']);
Run Code Online (Sandbox Code Playgroud)

And*_*rew 0

面对我试图做的类似情况

gulp.watch(['path/to/**/*.foo'], ['doTheReload'])
Run Code Online (Sandbox Code Playgroud)

我通过将重新加载更改为直接在手表上进行流式传输来使其工作,例如:

gulp.watch(['path/to/**/*.foo']).pipe(connect.reload());
Run Code Online (Sandbox Code Playgroud)

在不了解更多信息的情况下,我猜测connect.reload()期望的流与 提供的流在某种程度上有所不同gulp.src()

  • 在我的例子中,gulp.watch.pipe 导致“不是函数”错误 (7认同)