WordPress + BrowserSync + Local by Flywheel - CSS & JS Live Reload Workflow 不工作答案

【问题标题】：WordPress + BrowserSync + Local by Flywheel - CSS & JS Live Reload Workflow not workingWordPress + BrowserSync + Local by Flywheel - CSS & JS Live Reload Workflow 不工作
【发布时间】：2022-06-14 17:15:39
【问题描述】：

我试图让这个设置工作一段时间，但网络上没有支持或类似问题。本地社区实际上有一个封闭的话题，但根本没有解决方案。

所以，我的设置是：

WordPress 的 Flywheel 服务器本地
安装了 Node 的 VS Code
@wordpress/scripts 捆绑我所有的 CSS 和 JS 文件
浏览器同步到实时重新加载

这是我的 .json 文件：

{
  "name": "mywebsite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "live": "npm-run-all --parallel sync start",
    "sync": "browser-sync start -p 'mywebsite.local' --files '**/*.php' 'build/*.js' 'build/*.css'",
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "dev": "wp-scripts start",
    "devFast": "wp-scripts start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@wordpress/scripts": "*",
    "browser-sync": "^2.27.9",
    "node-sass": "^7.0.1",
    "normalize.css": "^8.0.1",
    "npm-run-all": "^4.1.5"
  }
}

因此，浏览器同步可以在命令行中很好地启动，启动时会打开一个新的浏览器窗口，并显示以下错误。正如他们在此错误屏幕上所建议的那样，本地日志中没有任何内容。

有没有人遇到过类似的问题并且知道如何解决这个问题？我将非常感谢任何提示、解决方法或解决方案，或者也许有人可以分享其他简单的设置想法来实现实时重新加载功能？

【问题讨论】：

标签： wordpress browser-sync

【解决方案1】：

我遇到了同样的问题，它来自 npm-run-all 和 browser-sync 的组合。我没有使用 npm-run-all，而是使用 browser-sync 作为 webpack 插件。

安装browser-sync-webpack-plugin

npm install browser-sync-webpack-plugin -D

然后在您的webpack.config.js 文件中添加browser-sync-webpack-plugin 作为插件。当您使用@wordpress/scripts 时，您的配置将是：

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 
module.exports = {
    ...defaultConfig,
    plugins: [
        ...defaultConfig.plugins,
        new BrowserSyncPlugin({
          // browse to http://localhost:3000/ during development,
          // ./public directory is being served
          host: 'localhost',
          port: 3000,
          proxy: 'http://YOURDOMAIN.local/'
        })
    ]
};

注意替换YOURDOMAIN。

现在当你运行时：

npm start

browser-sync 将自动启动。

【讨论】：