如何在带有 ntlm 的 VS 项目中使用浏览器同步

Question

我有一个 asp.net mvc 项目，我想在我的 gulp 文件中使用浏览器同步来自动注入 css 更改并在我更改时重新加载页面网站。我以前在 proxy 模式下做过这个，但是这个站点使用 windows 身份验证 (NTLM)，不能按原样代理。有没有办法让浏览器同步工作？

Answer 1

是的，Browser-Sync 有 snippet-mode 代理无法工作的情况。一般用法是将一个片段剪切并粘贴到您的页面正文中，您将获得 injecting/reloading 支持。然而，这是很多永久性的手动工作。

我想出了一个消除手动工作的约定。

首先添加到你的Web.config:

  <configuration>
      <appSettings>
          <add key="IncludeBrowserSync" value="true" />
          <!--...-->
      </appSettings>
      <!--...-->
  </configuration>

然后添加到你的Web.Release.config:

<appSettings>
   <add key="IncludeBrowserSync" value="false" xdt:Transform="SetAttributes"
      xdt:Locator="Match(key)" />
</appSettings>

这让我们不用担心不小心部署了代码段。

在 Shared Views 文件夹中创建 BrowserSync.cshtml:

@using System.Configuration
@if (ConfigurationManager.AppSettings["IncludeBrowserSync"]?.ToLower().Contains("t") ?? false)
{
    <!-- BrowserSync:SNIPPET-->
    <script type='text/javascript' id="__bs_script__">
    //<![CDATA[
        document.write("<script async src='http://HOST:PORT/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname).replace("PORT", parseInt(location.port) + 1));
        //]]>
    </script>
    <!-- BS:BrowserSyncs:END-->
}

正如您在代码片段中看到的那样，它与浏览器同步告诉您剪切和粘贴的内容略有不同。主要区别在于它不会包含版本号（因此 npm 可以在不破坏您的代码段的情况下更新浏览器同步）并且它使用的端口号约定高于 IISExpress 所服务的端口号。

现在在您拥有的任何_layout.html中的</body上方添加@Html.Partial("BrowserSync")。

最终通过 serve 浏览同步任务使这一切在您的 gulpfile.js 中正常工作。

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
...
var dllName = "<YourProjectName>.dll";
var iisPort = <YourPortNumber>;

gulp.task('serve', ['default'], function () {

    browserSync.init({
        port: iisPort + 1;
    });

    gulp.watch("<your wildchar to find your editable css files>", ['compile-minimize-css']); 
    /*...*/
    gulp.watch("Views/**/*.cshtml").on('change', browserSync.reload);
    gulp.watch("bin/"+dllName).on('change', browserSync.reload);
});

在任务运行器中启动 serve 后享受自动刷新！

Answer 2

如果你使用gulp，你可以试试bs-snippet-injector。如果您运行 browsersync 与 gulp.

，它会自动注入 browsersync 片段

var browserSync = require("browser-sync").create();

browserSync.use(require("bs-snippet-injector"), {
  // path to the file containing the closing </body> tag
  file: "wwwroot/index.html" 
});

gulp.task('watch', function() {
  // gupl.watch(...);
  browserSync.init(
    files: 'wwwroot/**'
  );
});

如何在带有 ntlm 的 VS 项目中使用浏览器同步

How to use browser-sync in a VS project with ntlm

visual-studio

authentication

browser-sync