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文件时，我都会看到＆＃34; PHP文件已更改！＆＃34;在控制台中，但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);
});

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

2 个答案: