Live Reload 不适用于 express、connect-livereload、tiny-lr、gulp-embedlr 和 gulp-livereload

Question

我关注this tutorial 为我正在进行的一个小项目设置了一个 Gruntfile。一切似乎都很好，除了实时重新加载部分。我没有收到任何错误，但也没有实时重新加载。代码如下：

var browserify = require('browserify'),
    buffer = require('vinyl-buffer'),
    concat = require('gulp-concat'),
    del = require('del'),
    embedlr = require('gulp-embedlr'),
    express = require('express'),
    gulp = require('gulp'),
    gutil = require('gulp-util'),
    jshint = require('gulp-jshint'),
    livereload = require('connect-livereload'),
    lrserver = require('tiny-lr')(),
    refresh = require('gulp-livereload'),
    replace = require('gulp-replace'),
    source = require('vinyl-source-stream'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify');

// clean
gulp.task('clean', function(callback) {
  del('./dist/*', callback);
});

// img
gulp.task('img', function() {
  return gulp.src('./src/img/*')
        .pipe(gulp.dest('./dist/img/'));
});

// index
gulp.task('index', function() {
  return gulp.src('./src/index.html')
        .pipe(replace('__now__', new Date().toDateString()))
        .pipe(gulp.dest('./dist/'));
});

gulp.task('index-dev', function() {
  return gulp.src('./src/index.html')
        .pipe(replace('__now__', new Date().toDateString()))
        .pipe(gulp.dest('./dist/'))
        .pipe(refresh(lrserver));
});

// script
gulp.task('lint', function() {
  return gulp.src('./src/script/*')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('script', [ 'lint' ], function() {
  browserify({ entries: './src/script/dforbes.js', debug: true })
  .bundle()
  .pipe(source('dforbes.js'))
  .pipe(buffer())
  .pipe(uglify({ mangle: false }))
  .on('error', gutil.log)
  .pipe(gulp.dest('./dist/script/'));
});

gulp.task('script-dev', [ 'lint' ], function() {
  browserify({ entries: './src/script/dforbes.js', debug: true })
  .bundle()
  .pipe(source('dforbes.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({ loadMaps: true }))
  .pipe(uglify({ mangle: false }))
  .on('error', gutil.log)
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/script/'));
});

// style
gulp.task('style', function() {
  return gulp.src('./src/style/*')
        .pipe(gulp.dest('./dist/style/'));
});

// tmp
gulp.task('tmp', function() {
  return gulp.src('./src/tmp/*')
        .pipe(gulp.dest('./dist/tmp/'));
});

gulp.task('tmp-dev', function() {
  return gulp.src('./src/tmp/*')
        .pipe(gulp.dest('./dist/tmp/'))
        .pipe(refresh(lrserver));
});

// watch
gulp.task('watch', function() {
  gulp.watch([ './src/img/*' ], [ 'img' ]);
  gulp.watch([ './src/index.html' ], [ 'index-dev' ]);
  gulp.watch([ './src/script/*' ], [ 'script-dev' ]);
  gulp.watch([ './src/style/*' ], [ 'style' ]);
  gulp.watch([ './src/tmp/*' ], [ 'tmp-dev' ]);
});

// dev
gulp.task('dev', [ 'clean' ], function() {
  gulp.start([ 'img', 'index', 'script-dev', 'style', 'tmp' ]);

  var livereloadPort = 35729;
  var serverPort = 8080;

  var server = express();
  server.use(livereload({ port: livereloadPort, start: true }));
  server.use(express.static('./dist'));
  server.all('/*', function(req, res) {
    res.sendFile('index.html', { root: 'dist' });
  });

  server.listen(serverPort);
  lrserver.listen(livereloadPort);

  gulp.start('watch');
});

// default
gulp.task('default', [ 'clean' ], function() {
  gulp.start([ 'img', 'index', 'script', 'style', 'tmp' ]);
});

Answer 1

你错过了refresh 的电话，让 LiveReload 知道某些部分发生了变化。这是您的 style 任务的更改：

gulp.task('style', function() {
   return gulp.src('./src/style/*')
       .pipe(gulp.dest('./dist/style/'))
       .pipe(refresh());
});

只需在您希望refresh 发生的任何地方添加最后一个pipe。

更新

此外，您的 Gulpfile 中存在一些问题。请返回您找到的每个gulp.src 语句，如果您不合并它们，也不要将两个gulp.src 语句合并为一个gulp.task。

// wrong
gulp.task('tmp-dev', function() {
  gulp.src('./src/index.html')
  .pipe(gulp.dest('./dist/'))
  .pipe(refresh(lrserver));

  gulp.src('./src/tmp/*')
  .pipe(gulp.dest('./dist/tmp/'))
  .pipe(refresh(lrserver));
});

// correct
gulp.task('tmp-dev', function() {
  return gulp.src(['./src/index.html','./src/tmp/*'])
    .pipe(gulp.dest('./dist/'))
    .pipe(refresh(lrserver));
});

另一种解决方案是创建一个指向 dist 目录的观察程序，每当那里发生变化时刷新：

 gulp.watch('./dist/**/*', refresh);

不过，另一种方式会更好，因为它可以让您拥有更多控制权 编辑：这个是假的