Is there a way to have Browsersynch on gulp watch my WP php files?

Question

So I downloaded this Worpress template with gulp and browsersynch which watches all .js files and .css files. The wierd thing is that whenever I want to use gulp and BroswerSynch I have to type npm run watch So what I am trying to add on my gulp file, is to be able to watch for changes on my php files from my template (/wp-content/theme/MYTEMPLATE) so whenever I am doing modifications I am able to see them in real time. Is it possible to do this?

Here is my gulpfile.js code

   const gulp = require( 'gulp' ),
    fancylog = require( 'fancy-log' ),
    browserSync = require( 'browser-sync' ),
    server = browserSync.create(),
    dev_url = 'http://localhost:10013/';


/**
 * Define all source paths
 */

var paths = {
    styles: {
        src: './assets/*.scss',
        dest: './assets/css'
    },
    scripts: {
        src: './assets/*.js',
        dest: './assets/js'
    }
};


/**
 * Webpack compilation: http://webpack.js.org, https://github.com/shama/webpack-stream#usage-with-gulp-watch
 * 
 * build_js()
 */

function build_js() {
    const compiler = require( 'webpack' ),
        webpackStream = require( 'webpack-stream' );

    return gulp.src( paths.scripts.src )
        .pipe(
            webpackStream( {
                config: require( './webpack.config.js' )
            },
                compiler
            )
        )
        .pipe(
            gulp.dest( paths.scripts.dest )
        )
        .pipe(
            server.stream() // Browser Reload
        );
}


/**
 * SASS-CSS compilation: https://www.npmjs.com/package/gulp-sass
 * 
 * build_css()
 */

function build_css() {
    const sass = require( 'gulp-sass' )( require( 'sass' ) ),
        postcss = require( 'gulp-postcss' ),
        sourcemaps = require( 'gulp-sourcemaps' ),
        autoprefixer = require( 'autoprefixer' ),
        cssnano = require( 'cssnano' );

    const plugins = [
        autoprefixer(),
        cssnano(),
    ];

    return gulp.src( paths.styles.src )
        .pipe(
            sourcemaps.init()
        )
        .pipe(
            sass()
                .on( 'error', sass.logError )
        )
        .pipe(
            postcss( plugins )
        )
        .pipe(
            sourcemaps.write( './' )
        )
        .pipe(
            gulp.dest( paths.styles.dest )
        )
        .pipe(
            server.stream() // Browser Reload
        );
}

/**
 * Watch task: Webpack + SASS
 * 
 * $ gulp watch
 */

gulp.task( 'watch',
    function () {
        // Modify "dev_url" constant and uncomment "server.init()" to use browser sync
        server.init({
            proxy: dev_url,
        } );

        gulp.watch( paths.scripts.src, build_js );
        gulp.watch( [ paths.styles.src, './assets/scss/*.scss' ], build_css );
    }
);

Answer 1

You will need to tweak this to fit your build but I setup something similar to make it a bit more portable.

Set the cfg as a variable and create a gulpconfig.json (could call it whatever you want.)

gulp.js

cfg = require('./gulpconfig.json'),

gulp.task('browser-sync', () => {

    browserSync.init(cfg.browserSyncWatchFiles, cfg.browserSyncOptions);

});

gulpconfig.json

{
    "browserSyncOptions": {
        "proxy": "example.com",
        "notify": true,
        "browser": [
            "google chrome"
        ]
    },
    "browserSyncWatchFiles": [
        "./**/*.php",
        "./images/*.{png,jpg,gif}"
    ]
}