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

Question

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

Answer 1

是的，Browser-Sync 有 snippet-mode对于代理不起作用的情况。一般用法是将片段剪切并粘贴到页面正文中，您将获得注入(inject)/重新加载支持。然而，这是很多永久性的手工工作。

我想出了一个惯例来消除手工工作。

首先添加到您的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查看文件夹 a 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 所服务的端口号。

现在添加@Html.Partial("BrowserSync")正上方 </body在任何 _layout.html你有。

最后让这一切都在您的 gulpfile.js 中工作与 serve浏览同步任务。

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在任务运行器中!