在Wordpress中更改PHP后,BrowserSync不会显示新样式

我正在进行本地wordpress安装。 </ p>

在我对CSS文件进行更改后,浏览器将正确显示它们。 但是,PHP文件中的任何更改都会将样式恢复到我的CSS最后一次更改之前的状态,迫使我回到任何CSS文件再次保存它,这样我就可以正确地观察这两个更改。 </ p>

编辑:终端在每次我对PHP文件进行更改时显示“重新加载浏览器...”作为最后一条消息,而CSS任务似乎每次都开始和结束。 在Gulp文档中,我发现了以下内容:'没有提供错误或警告消息,因为文件监视器使Node进程保持运行。 由于该过程没有退出,因此无法确定任务是否已完成或仅执行了非常非常长的时间。

'在'警告:避免同步'标题下但我不知道这是否是 与我的问题相关。</ p>

编辑#2:我的问题似乎在Chrome中仍然存在。 但是,在Firefox中,行为是预期的。 我在Chrome中使用已停用的缓存。 </ p>

我使用的是一个非常简单的gulpfile.js文件。 </ p>

  const gulp = require('gulp');

nbspst browsersync = require('browser-sync')。create();

const postcss = require('gulp-postcss');

ncst 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功能
功能browserSync(已完成){
browsersync.init({
proxy:'localhost / Produccion / wordpress',
notify:false
});

done();

}

//重新加载函数
function reload(done){
browsersync.reload();

done();

函数css(){
返回gulp.src(stylePath)
.pipe(postcss([cssImport,postcssVariables,autoprefixer]))
.pipe(gulp.dest(styleDest))
.pipe(browsersync.stream());

功能watchFiles(已完成){
gulp.watch(“./ wordpress / wp-content / themes / Produccion / styleFolders / ** / 。css”,css);
gulp.watch( “./wordpress/wp-content/themes/Produccion/
*/*.php”,重新加载);
done();

}

const build = gulp.series(browserSync,watchFiles);

exports.default = build;

</ code> </ pre>
</ div>

展开原文

原文

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; 

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问