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

    });
});

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

    });
});

• javascript
• wordpress
• livereload
• gulp

• I'm interested in seeing your plete gulp configuration as I'm trying to use gulp to run a php server and livereload when I change php/phtml, css, and js files. – SirTophamHatt Commented Mar 13, 2014 at 19:42
• I've posted my watch task above, because the whole file seemed like a lot to post, but I can find a way to post more if you would like! – thesublimeobject Commented Mar 13, 2014 at 21:11
• Could you please post it on jsfiddle or plunkr? It would be a huge help for me getting livereload to work with PHP. – SirTophamHatt Commented Mar 13, 2014 at 21:18
• 1 Here ya go. Let me know if you have any questions. codepen.io/thesublimeobject/pen/uzeJd – thesublimeobject Commented Mar 13, 2014 at 21:29

2 Answers 2

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.

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