Gulp.js: Reload altered php/html pages

Question

I have a basic gulp.js setup running in my wordpress environment. Everything works how I would like except for the way I am reloading my changed .php files. I have it set up like this:

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

I am essentially just having it reload the page whenever any php file is saved, but whenever I save one, it will automatically refresh every php page, whether I have it open, whether it was saved, or anything else:

[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 ...

Is there a way I can have it only livereload the page that was saved? This seems to be the only thing I can't get to work how I want with gulp; I am loving how much faster it runs than grunt, though.

EDIT: @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

Use the gulp-watch plugin instead. It's much better for watching individual files, and only passing those through to your results. Plus, it can watch for new files as well, if you use watch({glob: ['files']}).pipe(...) instead of gulp.src(['files']).pipe(watch()).pipe(...) .

An alternative is to use gulp-newer or gulp-changed , which both use timestamps to determine if a file has changed or not. I haven't personally used either, but gulp-newer appears to have a little more functionality. Neither will be able to detect new files, however.

Answer 2

Refs here , You could simply watch them:

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

Furthermore, currently gulp-livereload supports automatic creating of an instance of tiny-lr server. Thus you don't require tiny-lr explicitly:

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