Question

Building myself a gulpfile.js for a WordPress theme. Currently all the JS and CSS is working perfectly, and livereload is reloading on css/js change.

But I also want to refresh the browser whenever a PHP file is changed. I did some searching and found the following snipped which I'm using within my 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);
        });

    });
});

Whenever I change a PHP file I can see "PHP FILES CHANGED!" in the console, but livereload does not update the browser. What am I missing?

Was it helpful?

Solution

Did some further research and testing, and it turns there's no point in using tiny-lr since gulp-livereload does everything. So I changed my tasks to do the reloading by .pipe(livereload()); – and changed my watch task to the following:

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

});

OTHER TIPS

There's a shorter solution that maybe useful to those using gulp-livereload. There's a reload method that can be triggered. Like so:

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

    gulp.watch('source/*.php', livereload.reload);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top