提问人：stevan antic 提问时间：11/17/2023 更新时间：11/17/2023 访问量：12
WordPress + Gulp - 浏览器同步不会更新我的 .php 文件
WordPress + Gulp - browserSync won't update my .php files
问：
SCSS 和 JS 文件像以前一样工作，但是当我保存 .php 文件时，它会重新加载浏览器，但不会更新 html。
这是我的 gulpfile.js
我试图分离手表功能并试图添加一些延迟，但没有成功
const gulp = require('gulp');
const { src, dest, watch, series } = require('gulp');
// styles
const scss = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const cssMinify = require('gulp-clean-css');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
function styles(){
return src([
'./wp-content/themes/savez-tema/src/scss/vendor/_bootstrap.min.scss',
'./wp-content/themes/savez-tema/src/scss/**/*.scss'
])
.pipe( scss() )
.pipe( autoprefixer('last 2 versions') )
.pipe( cssMinify() )
.pipe( dest('./wp-content/themes/savez-tema/dist/css'))
.pipe(browserSync.stream());
}
// scripts
const jsMinify = require('gulp-terser');
function scripts(){
return src ([
'./wp-content/themes/savez-tema/src/js/vendor/bootstrap.min.js',
'./wp-content/themes/savez-tema/src/js/**/*.js'
])
.pipe(concat('main.js'))
.pipe( jsMinify() )
.pipe( dest('./wp-content/themes/savez-tema/dist/js'))
.pipe(browserSync.reload({stream: true})); // proveri
}
// watch
function watchTask(){
browserSync.init({
proxy: 'http://localhost:8888/savez',
});
watch(['./wp-content/themes/savez-tema/**/*.php', './wp-content/themes/savez-tema/src/scss/**/*.scss', './wp-content/themes/savez-tema/src/js/**/*.js'],
series(styles, scripts))
}
exports.default = series(styles, scripts, watchTask)
答：
0赞
stevan antic
11/17/2023
#1
在花费大量时间尝试不同的方法之后，这里是有效的解决方案：
PS - 如果使用 MAMP 禁用 PHP-Cache，这是必须的！
// REQUIREMENTS
const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const php = require('gulp-connect-php');
// PATHS
const paths = {
scss: {
src: './wp-content/themes/savez-tema/src/scss/**/*.scss',
dest: './wp-content/themes/savez-tema/dist/css'
},
js: {
src: './wp-content/themes/savez-tema/src/js/**/*.js',
dest: './wp-content/themes/savez-tema/dist/js/'
}
};
// BROWSER SYNC WITH PHP INSIDE SERVER
function sync() {
php.server({
base: './savez/',
port: 3000,
keepalive: true,
// custom PHP locations
bin: '/Applications/MAMP/bin/php/php7.4.33/bin/php',
ini: '/Applications/MAMP/bin/php/php7.4.33/conf/php.ini',
reloadOnRestart: true,
});
browserSync.init({
proxy: "http://localhost:8888/savez/",
baseDir: "./savez",
notify: false,
reloadOnRestart: true,
});
}
// TASKS
function compileSass() {
return src(paths.scss.src)
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer('last 2 versions'))
.pipe(rename({ extname: ".min.css" }))
.pipe(sourcemaps.write())
.pipe(dest(paths.scss.dest))
.pipe(browserSync.stream());
}
function compileJs() {
return src(paths.js.src)
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(sourcemaps.write())
.pipe(dest(paths.js.dest))
.pipe(browserSync.stream());
}
// WATCH
function watchSass() {
watch(paths.scss.src, compileSass)
}
function watchJs() {
watch(paths.js.src, compileJs)
console.log(paths.js.src, compileJs);
}
function watchPhp() {
watch(['./wp-content/themes/savez-tema/**/*.html', './wp-content/themes/savez-tema/**/*.php']).on('change', browserSync.reload);
}
// DEFAULT TASK
exports.default = series(compileSass, compileJs, parallel(sync, watchSass, watchJs, watchPhp))
评论