如何使用 Wordpress 和 xampp 设置浏览器同步

Question

在我的 gulpfile.js 中，我有以下代码：

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

// Browsersync
function browserSyncServe(cb) {
  browsersync.init({
    proxy: `localhost/${themeName}/`,
    notify: {
      styles: {
        top: 'auto',
        bottom: '0',
      },
    },
  });
  cb();
}
function browserSyncReload(cb) {
  browsersync.reload();
  cb();
}

// Watch Task
function watchTask() {
  watch('*.html', browserSyncReload);
  watch('*.php', browserSyncReload);
  watch(
    ['src/scss/**/*.scss', 'src/**/*.js'],
    series(scssTask, jsTask, browserSyncReload)
  );
}

// Default Gulp Task
exports.default = series(
  browserSyncServe
);

似乎不太方便为每个新项目输入themeName并将themeName与 Wordpress 主题文件夹名称匹配。

有没有可能让它更自动化？ 我正在尝试与 xampp 上的 Wordpress 网站一起设置浏览器同步。

任何帮助将非常感激！

Answer 1

我绝不是 Browsersync 方面的专家，但我是 WP 和 xampp 用户，它可以与以下配置完美配合：

browserSync( {
    proxy: "https://localhost/mysite/",
    https: {
        key: "W:/xampp/htdocs/mkcert/localhost/localhost.key",
        cert: "W:/xampp/htdocs/mkcert/localhost/localhost.crt"
    }
});

注意：我使用的是 xampp，它安装在 W:/ 驱动器上。 我也在为 SSL 使用 mkcert。

您可以在此处了解更多信息。