用于PHP文件的Gulp LiveReload,不会刷新浏览器

Question

为WordPress主题构建自己的gulpfile.js.目前所有的JS和CSS都运行得很好,而livereload正在重新加载css/js的变化.

但我还想在PHP文件发生变化时刷新浏览器.我做了一些搜索,发现以下剪切我在gulpfile.js中使用的

gulp.task('watch', function(){

    // Listen on port 35729 for LiveReload
    server.listen(35729, function (err) {if (err) {return console.log(err) };
        gulp.watch("assets/scss/**/*.scss", ['sass']);              // Watch and run sass on changes
        gulp.watch("assets/js/_*.js", ['javascripts']);             // Watch and run javascripts on changes
        gulp.watch("assets/img/*", ['imagemin', 'svgmin']);     // Watch and minify images on changes

        gulp.watch('**/*.php').on('change', function(file) {
            util.log('PHP FILES CHANGED!');
            server.changed(file.path);
        });

    });
});

每当我更改PHP文件时,我都会看到"PHP文件已更改!" 在控制台中,但livereload不会更新浏览器.我错过了什么？

Answer 1

做了一些进一步的研究和测试,并且由于gulp-livereload可以完成所有工作,因此使用tiny-lr毫无意义.所以我改变了我的任务来重新加载.pipe(livereload());- 并将我的监视任务更改为以下内容:

gulp.task('watch', function(){

    var server = livereload();
    gulp.watch('**/*.php').on('change', function(file) {
          server.changed(file.path);
          util.log(util.colors.yellow('PHP file changed' + ' (' + file.path + ')'));
      });

    gulp.watch("assets/scss/**/*.scss", ['sass']);              // Watch and run sass on changes
    gulp.watch("assets/js/_*.js", ['javascripts']);             // Watch and run javascripts on changes
    gulp.watch("assets/img/*", ['imagemin', 'svgmin']);     // Watch and minify images on changes

});

Answer 2

有一个较短的解决方案可能对那些使用gulp-livereload的人有用.有一种reload方法可以触发.像这样:

gulp.task('watch', function(){
    livereload.listen();

    gulp.watch('source/*.php', livereload.reload);
});