I am working on a local wordpress installation.
After I make changes to my CSS file the browser will show them correctly. However, any change in PHP files will revert the styles back to the state before the last change in my CSS was made, forcing me to go back to any CSS file to save it again allowing me to watch both changes made correctly.
Edit: terminal shows 'Reloading Browsers...' as last message everytime I make a change to a PHP file, whereas the CSS task seems to start and end everytime. In the Gulp documentation, I found the following: 'There is no error or warning message provided because the file watcher keeps your Node process running. Since the process doesn't exit, it cannot be determined whether the task is done or just taking a really, really long time to run. ' under the 'Warning: Avoid Synchronous' title but I don't know if this is relevant to my problem.
Edit #2: my problem seems to persist in Chrome. However, in Firefox the behavior is the expected. I work with a disabled cache in Chrome.
I am using a very simple gulpfile.js file.
const gulp = require('gulp');
const browsersync = require('browser-sync').create();
const postcss = require('gulp-postcss');
const cssImport = require('postcss-import');
const postcssVariables = require('postcss-simple-vars');
const autoprefixer = require('autoprefixer');
const { series, parallel } = require('gulp');
const stylePath = "./wordpress/wp-content/themes/Produccion/styleFolders/style.css";
const styleDest = "./wordpress/wp-content/themes/Produccion/";
// BrowserSync function
function browserSync(done) {
browsersync.init({
proxy: 'localhost/Produccion/wordpress',
notify: false
});
done();
}
// Reload function
function reload(done) {
browsersync.reload();
done();
}
function css() {
return gulp.src(stylePath)
.pipe(postcss([cssImport, postcssVariables, autoprefixer]))
.pipe(gulp.dest(styleDest))
.pipe(browsersync.stream());
}
function watchFiles(done) {
gulp.watch("./wordpress/wp-content/themes/Produccion/styleFolders/**/*.css", css);
gulp.watch("./wordpress/wp-content/themes/Produccion/**/*.php", reload);
done();
}
const build = gulp.series(browserSync, watchFiles);
exports.default = build;