BrowserSync与WordPress和XAMPP集成：自动化开发工作流

const browsersync = require('browser-sync').create();

function browserSyncServe(cb) {
  browsersync.init({
    // 将此处的URL替换为你的WordPress站点在XAMPP下的实际访问地址
    // 例如：http://localhost/your-wordpress-site/ 或 https://localhost/your-wordpress-site/
    proxy: "https://localhost/mysite/", 
    // 禁用BrowserSync的通知气泡，避免干扰
    notify: {
      styles: {
        top: 'auto',
        bottom: '0',
      },
    },
    // 可选：启用HTTPS支持，需要预先配置SSL证书
    https: {
        key: "W:/xampp/htdocs/mkcert/localhost/localhost.key", // 你的SSL私钥路径
        cert: "W:/xampp/htdocs/mkcert/localhost/localhost.crt" // 你的SSL证书路径
    }
  });
  cb();
}

function browserSyncReload(cb) {
  browsersync.reload();
  cb();
}

const { src, dest, watch, series, parallel } = require('gulp');
const browsersync = require('browser-sync').create();
const sass = require('gulp-sass')(require('sass')); // 使用Dart Sass
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

// SASS编译任务
function scssTask() {
  return src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/css')) // 输出到你的主题CSS目录
    .pipe(browsersync.stream()); // 注入CSS而不刷新页面
}

// JavaScript处理任务
function jsTask() {
  return src('src/js/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('main.js')) // 合并所有JS文件为main.js
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/js')) // 输出到你的主题JS目录
    .pipe(browsersync.stream());
}

// BrowserSync服务启动任务
function browserSyncServe(cb) {
  browsersync.init({
    proxy: "https://localhost/mysite/", // 替换为你的WordPress站点根URL
    notify: {
      styles: {
        top: 'auto',
        bottom: '0',
      },
    },
    https: {
        key: "W:/xampp/htdocs/mkcert/localhost/localhost.key",
        cert: "W:/xampp/htdocs/mkcert/localhost/localhost.crt"
    }
  });
  cb();
}

// BrowserSync刷新任务
function browserSyncReload(cb) {
  browsersync.reload();
  cb();
}

// 监听文件变化任务
function watchTask() {
  // 监听WordPress主题目录下的PHP文件和HTML文件
  watch(['./**/*.php', './**/*.html'], browserSyncReload); 
  // 监听SCSS和JS源文件，执行相应任务后刷新浏览器
  watch(
    ['src/scss/**/*.scss', 'src/js/**/*.js'],
    series(scssTask, jsTask, browserSyncReload)
  );
}

// 默认Gulp任务：启动BrowserSync并监听文件
exports.default = series(
  parallel(scssTask, jsTask), // 初始编译SCSS和JS
  browserSyncServe,
  watchTask
);