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

Bazdin · Accepted Answer · 2022-02-08 21:06:36Z

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}" ] }

So I added cfg = require('./gulpconfig.json'),on the very top and then the gul task after the gulp.task ('watch', and also added the json file. When I ran npm run watch it ran without any issues but it didn't reload the page when I edited the header.php file with <h1> that said hello world. I feel like I need to add this INSIDE the gulp.task ('watch', but i am too sure on how.
you just need to edit this section - server.init({ proxy: dev_url, } );

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related