Я работаю над локальной установкой WordPress.
После того, как я внесу изменения в свой файл CSS, браузер покажет их правильно. Однако любое изменение в файлах PHP вернет стили к состоянию до того, как было сделано последнее изменение в моем CSS, что вынудит меня вернуться к любому файлу CSS, чтобы сохранить его снова, что позволит мне наблюдать за обоими внесенными изменениями правильно.
Редактировать: терминал показывает «Перезагрузка браузеров ...» как последнее сообщение каждый раз, когда я вносю изменения в файл PHP, тогда как задача CSS, кажется, запускается и заканчивается каждый раз. В документации Gulp я обнаружил следующее: «Нет сообщений об ошибках или предупреждений, потому что средство отслеживания файлов поддерживает ваш процесс Node. Поскольку процесс не завершается, невозможно определить, выполнена ли задача или просто требуется очень много времени для ее выполнения.
'под заголовком' Предупреждение: избегайте синхронного ', но я не знаю, относится ли это к моей проблеме.
Редактировать # 2: моя проблема, похоже, сохраняется в Chrome. Однако в Firefox поведение является ожидаемым. Я работаю с отключенным кешем в Chrome.
Я использую очень простой файл gulpfile.js.
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;