Question

我已经定义了一个如下所示的gulpfile.js：

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

gulp.task('connect', function() {
    console.log('connecting');
    connect.server({
        livereload: true,
        port:35729
    });
});

gulp.task('html', function () {
    console.log('html changed do a reload')
    gulp.src('*.html')
        .pipe(connect.reload());
});

gulp.task('watch', function () {
    console.log('watching');
    gulp.watch(['*.html'], ['html']);
});

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

我想在更改index.html时刷新页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>testing gulpreload</title>
    <link type="text/css" href="css/mystyles.css" rel="stylesheet">
</head>
<body>

</body>
</html>

当我运行gulp命令时，我可以看到以下内容：

server started http://localhost:8000
livereload started on port 35729

为什么更改index.html时页面没有重新加载？它显示了更改后的重新加载＆＃39;但是消息。

Answer 1

在此示例中，您不需要使用connect

之前我曾经这样使用过它：

var livereload = require('gulp-livereload');
var gutil = require('gulp-util');

...

gulp.task('watch', function () {
    livereload.listen({port: 35729});

    gulp.watch(['*.html'], ['html']).on('change', livereload.changed);
    gutil.log(gutil.colors.green('Watching for changes...'));
});

更新：

正如下面评论中所述，我忘了提及您需要安装LiveReload Chrome插件才能实现此目的。

gulp如何重新加载？

1 个答案:

在此示例中，您不需要使用connect

之前我曾经这样使用过它：