Question

您好我尝试创建自己的配置。它运作良好，但有时我更改HTML代码实时重新加载不工作不知道为什么。任何人都可以帮忙吗？

var livereload = require('gulp-livereload');
gulp.task('reload-html',function(){
    gulp.src('./*.html')
        .pipe(livereload())
        .pipe(notify({ message: 'Reload html task complete' }));
});

gulp.task('watch-files',function(){
    livereload.listen();
    gulp.watch('*.html',['reload-html'])
    gulp.watch('assets/sass/**/*.scss',['sass']);
    gulp.watch('assets/images/src/**/*',['images-min']);
});

我也使用谷歌浏览器的实时重新加载插件。

Answer 1

为什么你不能简单地使用gulp-connect？

这是一个非常简单的示例：

'use strict';

var gulp    = require('gulp');

// Files to be considered on live reload
var files   = ['index.html', 'style.css' ];

var connect = require('gulp-connect'); 

gulp.task('files', function() {
  gulp.src(files).pipe(connect.reload());
});

gulp.task('watch', function() {
  gulp.watch(files, ['files']);
});

gulp.task('connect', function() {
  // Default port: 8000
  connect.server({livereload: true});
});

gulp.task('default', ['connect', 'watch']);

因此您不需要任何Chrome插件。这是Gist。

Answer 2

认为这不是您问题的解决方案，这是使用Live-reload的替代方法。

Browser-sync是一个非常强大的工具，可以完成Livereload的功能。

以下是一个简单的gulp [浏览器同步任务：

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// or...

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "yourlocal.dev"
    });
});

有关浏览器同步的更多信息：
http://www.browsersync.io/

gulp live reload config

2 个答案: