javascript – gulp-connect和connect.reload

我正在尝试设置一个简单的服务器来测试一些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);
});