Suppose the site is located locally in openserver for testing in the folder C:\OpenServer\domains\site\
Is it possible to use gulp when writing php-code, changes in the browser were visible without reloading the page?

gulpfile.js

 var gulp = require('gulp'), browserSync = require('browser-sync').create(), replace = require('gulp-replace'), gulpif = require('gulp-if'), cache = require('gulp-cache'), del = require('del'), path = require('path'); gulp.task('serve',function () { browserSync.init({ server: '/' }); browserSync.watch('/**/*').on('change', browserSync.reload); }); gulp.task('default',gulp.parallel('serve'));

This code gives the error Cannot GET /
gulpfile.js is at the root of the site

---------- PS ---------- added code
gulpfile.js

 var gulp = require('gulp'), bs = require('browser-sync').create(); gulp.task('serve',function () { bs.init({ proxy: "test", port: 3000 }); }); gulp.task('watch',function () { var watcher = gulp.watch('/*.php'); return watcher.on('change', bs.reload); }); gulp.task('default', gulp.series( 'serve', gulp.parallel('watch')));

D:\OSPanel\domains\test path to the test domain D:\OSPanel\domains\test
The index.php file is in the root of the folder, but nothing changes after edits
Plz tell me how to configure?
those. the server is started under the name http://localhost:3000/ and the index.php file is working, but after editing the changes are not visible, the page does not reload

PS

 var gulp = require('gulp'), bs = require('browser-sync').create(); gulp.task('serve',function () { bs.init({ proxy: "http://test", port: 3000 }); }); gulp.task('php',function () { return gulp.src('./*.php') .pipe(gulp.dest('/')) }); gulp.task('watch',function () { var watcher = gulp.watch('./*.php', gulp.series('php')); return watcher.on('change', bs.reload); }); gulp.task('default', gulp.parallel('watch', 'serve'));

gives an error message:

 [15:00:39] 'php' errored after 96 ms [15:00:39] Error: EPERM: operation not permitted, mkdir 'D:\'

tried to add such code in init , but also does not work:

  bs.init({ proxy: "http://test", files: ["**/*.php"], port: 3000 });
  • Is it possible to do this? may not be necessary with the help of gulp - word

1 answer 1

That bs worked in php and did not issue

Cannot get /

The proxy option is required.

  1. the site
  2. your directory
  3. alias in openserver

 const gulp = require('gulp'), uglify = require('gulp-uglify'); let bs = require('browser-sync').create(); gulp.task('js', () => { return gulp .src('./source/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./build') }); gulp.task('serve', () => { bs.init({ proxy: "site.loc", port: 3000 }); }); gulp.task('watch', () => { let watcher = gulp.watch('./source/**/*.js', gulp.parallel('js')); return watcher.on('change', (e) => { bs.reload(); }); }); gulp.task('default', gulp.series('js', 'serve', gulp.parallel('watch'))));

This is how the general code will look like.

  • look, added gulpfile.js code to the question - word
  • and what task is performed in gulp.watch('/*.php'); There should be a task running when changing php files. By type gulp.src('./*.php').pipe(gulp.dest('./')); - Daniil Bagaev
  • check pos. something not working code. added the code to the question - word