gulp插件livereload使用

Question

gulpfile如下

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
// var babel = require('gulp-babel');
// var react = require('gulp-react');
// var livereload = require('gulp-livereload');

gulp.task('react', function() {
    return gulp.src('src/**/*.jsx')
                    .pipe(plugins.react())
                    .pipe(gulp.dest('build'))
                    .pipe(plugins.livereload());
});

gulp.task('es6', function() {
    return gulp.src('src/**/*.js')
                    .pipe(plugins.babel())
                    .pipe(gulp.dest('build'))
                    .pipe(plugins.livereload());
})

gulp.task('html', function() {
    return gulp.src('src/**/*.html')
                    .pipe(gulp.dest('build'))
                    .pipe(plugins.livereload());
});

gulp.task('watch', function() {
    plugins.livereload.listen(3000);
  gulp.watch('src/**/*.jsx', ['react']);
  gulp.watch('src/**/*.js', ['es6']);
  gulp.watch('src/**/*.html', ['html']);
});

然后访问http://localhost:3000
显示如下

但是chrome上的插件的状态一直都激活不了

一点就提示

是gulpfile上错了吗?求指教一下应该如何使用

Answer 1

建议使用browser-sync
browser-sync

Answer 2

没有找到原因
不过找到了另外一个基于livereload开发的gulp插件
gulp-connect
最终实现自动刷新

有知道上面问题答案也请告诉我一下

Answer 3

browser-sync比较强大，建议使用

Answer 4

建议在html加上以下这几行代码，希望可以解决你的问题

<script>
    // 这句话必须加上，否则plugins.livereload()不起作用
    document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
</script>