Gulp 大口装药是如何工作的？_Gulp_Gulp Watch

Gulp 大口装药是如何工作的？

gulp

Gulp 大口装药是如何工作的？,gulp,gulp-watch,Gulp,Gulp Watch,我定义了一个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('htm

我定义了一个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>

为什么在我更改index.html时不重新加载页面？不过，它显示了“html已更改，请重新加载”消息。

在本例中，您不需要使用connect 我以前也这样用过：更新：

正如下面的评论中提到的，我忘了提到你需要安装Chrome插件才能工作。

这实际上是不一样的。gulp livereload只将livereload事件发送到指定的端口，您需要在浏览器中插入livereload或安装livereload插件，而gulp connect也会为页面提供服务器并自行插入livereload脚本..我更新了我的问题。至于“相同”，那么最终的结果就是OP想要实现的。这只是不使用connect的另一种方法。当您在浏览器中检查dom或网络选项卡时，是否插入/加载了livereload.js文件？我也有同样的问题，是的，我确实在源代码中看到了livereload.js……但它不起作用

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

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...'));
});