Question

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

Answer 1

是的，浏览器同步功能snippet-mode适用于代理无法运行的情况。一般用法是将一个片段剪切并粘贴到您的页面正文中，您将获得注入/重新加载支持。然而，这是一项永久的手工工作。

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

首先添加到您的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视图文件夹中的

创建 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可以在不破坏您的代码段的情况下更新浏览器同步）并且它使用端口号的约定为1在IISExpress服务之上。

现在在您@Html.Partial("BrowserSync")的{{1}} </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后享受自动刷新功能！

Answer 2

如果你使用gulp，你可以尝试bs-snippet-injector。如果您使用gulp运行browsersync，它会自动注入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/**'
  );
});

如何在VS项目中使用ntlm进行浏览器同步

2 个答案: