gulp-connect和connect.reload [英] gulp-connect and connect.reload

问题描述

我试图设置一个简单的服务器来测试一些d3.js的东西。我正在关注tagtree.tv上的截屏视频。我的代码与他匹配，但是当我对我的JS或SASS文件进行更改时，无法重新加载index.html。

I am trying to set up a simple server to test out some d3.js stuff. I'm following a screencast on tagtree.tv. My code matches his, but I cannot get my index.html to reload when I make a change to my JS or SASS files.

我是新手，因此尽管我可以告诉事情看起来不错，但这是基于我的假设，即对connect.reload（）的调用将重新加载浏览器查看其内容的任何内容。应该注意的是，livereload JS被插入到我的index.html文件中。

I'm new to gulp so as far as I can tell things look OK, but that's based upon my assumption that a call to connect.reload() will reload whatever browser is looking at its content. It should be noted that the livereload JS is being inserted into my index.html file.

我的目录结构如下：

My directory structure is as follows:

d3play
 -bower_components
 -dist
   -css
   -scripts
 - node_modules
 -sass
 -scripts
 gulpfile.js
 index.html
 package.json

我的gulpfile.js看起来像这样：

My gulpfile.js looks like this:

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']);

推荐答案

以下是简单和测试 livereload解决方案基于连接服务器和 connect-livereload 和 gulp-livereload 插件可能有所帮助：

Here is a simple and tested livereload solution based on connect server and connect-livereload and gulp-livereload plugins that might help:

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-connect和connect.reload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！