标签: browser-sync

默认情况下，laravel 5.4 mix 和 browserSync 即将推出。如果我*.blade.php从resources/views. 在我的webpack.mix.js我有这个配置：

const { mix } = require('laravel-mix');

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .browserSync({
        proxy:'localhost',
        port:8000,
        files: {
            match: [
                "resources/views/**/*.blade.php",
                "public/css/*.css",
                "public/js/*.js",
            ],
            fn: function (event, file) {
                /** Custom event handler **/
            },
            options: {
                ignored: [
                    '*.txt',
                    '*.json'
                ]
            }
        },
        logPrefix:'L54',
    });

我不知道我是否做得对，或者我可能必须设置 Mix 配置等等。任何帮助将非常感激。

我使用浏览器同步来提供我的本地开发网站。我也在使用 Laravel Valet。当我通过valet securehttps 为开发网站提供服务时，我会收到那些丑陋的 Chrome 隐私错误页面。有办法阻止这种情况吗？

我的浏览器同步配置如下：

browserSync.init({
        host: "https://mysite.dev",
        proxy: "https://mysite.dev",
        ...

mysite.dev随着站点的变化，我正在处理很多本地开发站点。

当我运行npm start浏览器同步输出时：

[BS] Proxying: https://mysite.dev
[BS] Access URLs:
------------------------------------------
      Local: https://localhost:3000
   External: https://https://mysite.dev:3000
 ------------------------------------------
         UI: http://localhost:3001
UI External: http://https:3001

正如您所看到的，它正确映射了 URL，如果我忽略 Chrome 隐私错误警告，我可以正常看到该网站。我只是想知道为什么 https 不能正常工作。

如果我https://mysite.dev 在没有浏览器同步:3000端口的情况下访问，它在 Chrome 中工作正常，并在地址栏上显示“安全”

我经常想将新的更改与原始更改进行比较。为此，我打开同一页面的两个浏览器选项卡，进行更改，然后重新加载其中一个选项卡进行比较。启用 Browsersync 后，这将变得不可能，因为两个选项卡都会自动重新加载。

如何禁用特定选项卡的 Browsersync 以防止发生这种情况？我正在寻找一种从 Javascript 控制台执行此操作的方法，而不必停止/重新加载我的观察者。

Browsersync API 有一个 pause() 方法，但我看不到从实际运行的 Browsersync 实例访问它的方法。有一个window.___browserSync___可访问的对象，因此必须有某种方法来实现这一点。

我有一个奇怪的问题，我想知道是否有人遇到过这种情况。我的应用程序中有 webpack 可以捆绑、提供服务以及介于两者之间的所有内容。我注意到，当我从我的 gulp 文件编译和运行 webpack-devserver 时，一切都按预期进行，在我的终端中，我得到以下信息：

webpack: Compiled successfully.

2017-11-30T11:46:05.288Z - error: 
[Browsersync] Proxying: http://localhost:3001
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3002
    External: http://10.101.51.117:3002
 --------------------------------------
          UI: http://localhost:3003
 UI External: http://10.101.51.117:3003
 --------------------------------------

现在，当我通过“本地主机”访问我的应用程序时，该页面的浏览器选项卡中没有显示收藏夹图标，控制台中没有 404，并且开发人员工具网络选项卡中没有对收藏夹图标的请求？现在我应该使用外部 URL 并在浏览器中输入http://10.101.51.117:3002 网站图标在页面选项卡中，但是开发人员工具网络选项卡中没有对网站图标的请求。

现在，当我在浏览器中直接调用 favicon 到http://localhost:3002/assets/favicon.ico 时，favicon 在浏览器窗口中提供，所以看起来服务器正在捆绑 Favicon？

在我的 HTML 中，我的标签<link rel="shortcut icon" href="assets/favicon.ico">没什么奇怪的，在我的webpack.common.js文件中，我有以下内容（为了简单起见，我在这里删除了一些项目）

module.exports = {
  // lots of things here..
  module: {
    rules: [
    // stuff here has been removed
      {
        test: /\.html$/,
        use: 'html-loader'
      }, …

我有一个 Web 项目，其中使用webpack-dev-server了启用 HMR的工作 Webpack4 配置，并通过 npm 脚本以这种方式启动：

cross-env NODE_ENV=development webpack-dev-server --inline --hot

一切正常，HMR 适用于我的 js 和 scss 文件。现在我想知道是否可以扩展我的 Webpack 配置以在我修改视图模板文件时在浏览器中完全重新加载。

对我来说似乎不能自己webpack-dev-server做到这一点，所以我想我需要一些其他的插件。在谷歌搜索了一下之后，这是我得到的：

1. webpack-dev-server +浏览器同步-webpack-plugin
2. 将我的配置重写为webpack-serve，因为它似乎可以做到
3. chokidar + webpack-dev-middleware（用于重新加载的 API？）

所以我的问题是，使用 Webpack 4(.17.2) 获得 HMR + watch 给定路径并在文件更改（blade/twig/php/etc...）时重新加载浏览器的最佳方法是什么？

我当前配置的相关部分：

devServer: {
  index: '',
  open: true,
  hotOnly: true,
  publicPath: '/build/',
  host: 'mysite.test',
  proxy: {
    '**': {
      target: 'http://mysite.test',
      changeOrigin: true,
      headers: {
        'X-Dev-Server-Proxy': 'http://mysite.test'
      }
    }
  }
}

我为我的节点应用程序运行了以下命令：

$ npm install browser-sync --save-dev

安装成功，browser-sync出现在我的package.json文件和node_modules目录中。

但是，当我运行$ browser-sync --version检查它是否正常工作时，出现以下错误：

bash：浏览器同步：找不到命令

为什么这不起作用？

注意：这个问题是类似的，但我不想像这个问题一样在全局安装它。

任何帮助将不胜感激！

Lite Server 在更改我的 index.html 文件时不会重新加载页面。

我没有使用 bs-config.json 文件。使用以下命令启动 lite 服务器时，我的 index.html 在新选项卡中正确打开：

npm run dev

此控制台信息可能会有所帮助：

> lite@1.0.0 dev C:\test\lite
> lite-server

Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync config **
{ injectChanges: false,
  files: [ './**/*.{html,htm,css,js}' ],
  watchOptions: { ignored: 'node_modules' },
  server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.39:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: …

我正在 Bedrock WordPress 网站上运行 DDEV nginx 服务器并尝试加载 Browsersync 的代码片段。

gulpfile.js browserSync 任务：

browserSync.init({
proxy: {
 target: "https://web.ddev.site"
}, 
https: {
 key: "/Users/user/Library/Application Support/mkcert/rootCA-key.pem",
 cert: "/Users/user/Library/Application Support/mkcert/rootCA.pem"
}, open:false}); 

浏览器不加载代码片段并打印以下错误：

(index):505 GET https://web.ddev.site:3000/browser-sync/browser-sync-client.js?v=2.26.7 net::ERR_SSL_KEY_USAGE_INCOMPATIBLE

我怎样才能让这两件事一起工作？在 DDEV 之前，我使用的是 MAMP，但 DDEV 的性能要好得多，我想切换到这个应用程序。感谢帮助。

我有一个asp.net mvc项目,我想在我的gulp文件中使用浏览器同步来自动注入css更改并在我对网站进行更改时重新加载页面.我之前已经在proxy模式下完成了这个,但是这个站点使用了无法代理的Windows身份验证(NTLM).有没有办法使浏览器同步工作？

我刚刚从Yeoman（ng-fullstack）安装了一个脚手架项目，并且只选择了客户端选项。它安装得很好，但是当我运行“ gulp”时，所有任务运行都没有错误，并启动了http：// localhost：3000。这永远无法解析网站，在控制台输出中，我得到：

运行browserSync的代码行如下所示：

browserSync({proxy: "http://localhost:3333", reloadDelay: 1000});

为什么这不能正常工作的任何想法？我对浏览器同步还不太熟悉。