Gulp.js：重新加载更改的 php/html 页面

Question

我在我的 wordpress 环境中运行了一个基本的 gulp.js 设置。除了我重新加载更改的 .php 文件的方式之外，一切都按我的意愿进行。我是这样设置的：

gulp.task('php', function(){
    gulp.src('../*.php').pipe(livereload(server));
});

    gulp.task('watch', function() {
        server.listen(35729, function (err) {
            if (err) {
                return console.log(err)
            };
            gulp.watch('styl/src/*.scss', ['styl']);
            gulp.watch('js/src/*.js', ['js']);
            gulp.watch('../*.php', ['php']);
        });
    });

我基本上只是在保存任何 php 文件时重新加载页面，但每当我保存一个文件时，它会自动刷新每个 php 页面，无论我是否打开它，是否保存它，或其他任何东西：

[gulp] footer.php was reloaded.
... Reload /Users/KBD/sites/vi/cnt/themes/vi/footer.php ...
[gulp] front-page.php was reloaded.
... Reload /Users/KBD/sites/vi/cnt/themes/vi/front-page.php ...
[gulp] functions.php was reloaded.
... Reload /Users/KBD/sites/vi/cnt/themes/vi/functions.php ...
[gulp] header.php was reloaded.
... Reload /Users/KBD/sites/vi/cnt/themes/vi/header.php ...
[gulp] index.php was reloaded.
... Reload /Users/KBD/sites/vi/cnt/themes/vi/index.php ...
[gulp] social-media.php was reloaded.
... Reload /Users/KBD/sites/vi/cnt/themes/vi/social-media.php ...
[gulp] template-contact.php was reloaded.
... Reload /Users/KBD/sites/vi/cnt/themes/vi/template-contact.php ...
[gulp] template-interior.php was reloaded.
... Reload /Users/KBD/sites/vi/cnt/themes/vi/template-interior.php ...

有没有办法让它只实时重新加载保存的页面？这似乎是我唯一无法使用 gulp 进行工作的事情；不过，我喜欢它的运行速度比 grunt 快得多。

编辑：@SirTophamHatt

gulp.task('watch', function() {
    server.listen(35729, function (err) {
        if (err) {
            return console.log(err)
        };
        gulp.watch('styl/src/*.scss', ['styl']);
        gulp.watch('js/src/*.js', ['js']);
        gulp.watch('js/src/*.coffee', ['coffee']);
        gulp.src('../*.php').pipe(watch()).pipe(livereload(server));

    });
});

Answer 1

请改用gulp-watch plugin。观看单个文件并仅将其传递给您的结果要好得多。另外，如果您使用watch({glob: ['files']}).pipe(...) 而不是gulp.src(['files']).pipe(watch()).pipe(...)，它也可以监视新 文件。

另一种方法是使用gulp-newer 或gulp-changed，它们都使用时间戳来确定文件是否已更改。我也没有亲自使用过，但gulp-newer 似乎有更多的功能。但是，两者都无法检测到新文件。

Answer 2

参考here，你可以简单地watch他们：

gulp.watch('../*.php').on('change', function(file) {
    livereload(server).changed(file.path);
});

此外，目前gulp-livereload 支持自动创建tiny-lr 服务器的实例。因此，您不需要明确要求 tiny-lr：

livereload = require('gulp-livereload');

gulp.task('task foo', function() {
    gulp.src('foo').pipe(...).pipe(livereload());
});

gulp.task('watch', function() {
    gulp.watch('foo', ['task foo'])
    gulp.watch('bar').on('change', function(file) {
        livereload().changed(file.path);
    });
});