gulp插件livereload使用


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上错了吗?求指教一下应该如何使用

gulp livereload

高处的飞鸟 8 years, 7 months ago

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

睡不醒的狐狸 answered 8 years, 7 months ago

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

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

bug616 answered 8 years, 7 months ago

建议使用browser-sync
browser-sync

震爹一下巧克力 answered 8 years, 7 months ago

Your Answer