gulp-useref doesn't replace <--! build --> when it is in a PHP file

Question

I try to use gulp-useref. Everything works fine as long as my filename is index.html, but if I rename it to index.php (also changing gulp.src('app/*.html') to gulp.src('app/*.php') in the gulpfile.js), it still creates the minified concatinated CSS and JS files but does not replace the <!-- build ><!-- endbuild > block in the destination file.

The source index files (and the destination index.php file):

<!-- build:js main.min.js -->
<script src="js/test.js"></script>
<script src="js/test.js"></script>
<!-- endbuild -->

The destination index.html (this is what I want when I rename it to index.php too):

<script src="main.min.js"></script>

the working gulpfile.js:

gulp.task('useref', function(){
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpIf('*.js', uglify()))
        // Minifies only if it's a CSS file
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('dist'))
});

the one which does not replace the <!-- build ><!-- endbuild --> block:

gulp.task('useref', function(){
    return gulp.src('app/*.php')
        .pipe(useref())
        .pipe(gulpIf('*.js', uglify()))
        // Minifies only if it's a CSS file
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('dist'))
});

What could cause this issue and how could I fix it quickly?

Answer 1

I made it work, the gulp.watch task caused this issue. I did not run the useref task correctly when I watched for file changes.

When it did not work:

// Watch for file changes:
gulp.task('watch', ['sass', 'useref', 'copy'], function(){
    gulp.watch('app/scss/**/*.scss', ['sass']);

    // Reload the browser whenever PHP or JS files change:
    gulp.watch('app/js/**/*.js', ['copy']);
    gulp.watch('app/**/*.php', ['copy']);
    gulp.watch('app/.htaccess', ['copy']);
    // Other watchers
});

When it suddenly started working:

// Watch for file changes:
gulp.task('watch', ['sass', 'copy'], function(){
    gulp.watch('app/scss/**/*.scss', ['sass', 'useref']);

    // Reload the browser whenever PHP or JS files change:
    gulp.watch('app/js/**/*.js', ['useref']);
    gulp.watch('app/**/*.php', ['copy']);
    gulp.watch('app/.htaccess', ['copy']);
    // Other watchers
});