gulp-connect 和 connect.reload答案

【问题标题】：gulp-connect and connect.reloadgulp-connect 和 connect.reload
【发布时间】：2015-02-04 04:09:24
【问题描述】：

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

【问题讨论】：

此外，当我运行 gulp 并保存 SASS 或 JS 文件时，控制台输出看起来像是重新加载工作正常，但它在我的浏览器中什么也没做。

标签： javascript gulp livereload

【解决方案1】：

这是一个基于connect 服务器和connect-livereload 和gulp-livereload 插件的simple and tested livereload solution 可能会有所帮助：


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', ['connect'], function () {
  return opn('http://localhost:' + config.servingPort);
});

gulp.task('connect', function(){
  return connect()
    .use(connectLivereload())
    .use(connect.static(config.rootDir))
    .listen(config.servingPort);
});

【讨论】：

在gulp.watch 中调用livereload 的gulp.src 的详细信息是救命稻草——它轻松解决了我自己与connect.reload() 的问题。谢谢你。
@rlafuente 很高兴为您提供帮助。最近，我一直在使用 github.com/mattdesl/budo 进行更简单的实时重新加载设置。

【解决方案2】：

面临着我试图做的类似情况

gulp.watch(['path/to/**/*.foo'], ['doTheReload'])

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

gulp.watch(['path/to/**/*.foo']).pipe(connect.reload());

除了这些，我猜想connect.reload() 所期望的流与gulp.src() 提供的流在某种程度上有所不同。

【讨论】：

gulp.watch.pipe 在我的情况下导致“不是函数”错误