使用 gulp-useref Durandal 和 ASP.NET MVC 进行捆绑和连接答案

【问题标题】：Bundling and concatenation with gulp-useref Durandal and ASP.NET MVC使用 gulp-useref Durandal 和 ASP.NET MVC 进行捆绑和连接
【发布时间】：2015-04-09 08:47:12
【问题描述】：

我有一个基于ASP.NET MVC 5 和Web API 的Durandal 2 应用程序，最初的Index.cshtml（在HomeController 上）通过MVC 路由器提供服务。从那时起，所有常规的 html 视图都由 Durandal 路由器处理。

无论如何，我正在尝试使用gulp-useref 连接所有css 和js 文件。我已经完成了所有工作，gulp-useref 将新连接的文件和 index.cshtml 与更新的脚本和样式表引用放在 dist 文件夹中。

当然，要使应用程序正常工作，我需要将更新后的 index.cshtml 重新返回到 Views/Home/。我用gulp 创建了一个“复制”任务，它就是这样做的；它会覆盖原始的index.cshtml 并修复连接的js 和css 文件的路径。
这同样有效，但由于useref 删除了标记应插入连接文件引用的位置的html cmets，因此该过程不可重复。

让我用一些代码来说明。

在我的Index.cshtml 我有：

<html>
   <head></head>
   <body>
      <!-- build:js js/lib.js-->

      <script src="/bower_components/numeral/languages.js"></script>
      <script src="/scripts/bootstrap.js"></script>
      <script src="/scripts/typeahead.js"></script>
      <script src="/scripts/knockout-bootstrap.js"></script>
      <script src="/scripts/knockout-extenders.js"></script>

      <!-- endbuild -->
   </body>
</html>

gulp-useref 将在这里放置更新后的脚本引用，因此它最终看起来像这样：

<html>
   <head></head>
   <body>   
      <script src="/js/lib.js"></script>
   </body>
</html>

如您所见，useref 删除了 html cmets，因此如果我用这个文件覆盖原始的 index.cshtml，useref 将不知道在哪里放置更新的脚本标签。如果我不覆盖原始的index.cshtml，应用程序将不会使用连接的文件。

我是 gulp 的新手，所以我可能会以完全错误的方式处理此问题，但是 我如何确保我的 /Views/Home/index.cshtml 以自动方式使用连接的文件？

或者，或者，对于我正在尝试做的事情，是否有更好的方法，即为部署做好一切准备？

以下是我的相关@987654349@任务，供参考：

gulp.task("optimize-for-deployment", function () {
    var assets = $.useref.assets({ searchPath: "./" });
    var cssFilter = $.filter("**/*.css");
    var jsFilter = $.filter("**/*.js");

    return gulp
        .src(config.index)
        .pipe($.plumber())
        .pipe(assets)
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore())
        .pipe(jsFilter)
        .pipe($.uglify())
        .pipe(jsFilter.restore())
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe(gulp.dest(config.appDist));
});

// copy the updated index.cshtml to Views/Home/
gulp.task("copy-for-deployment", ["optimize-for-deployment"], function () {
    return gulp.src(config.appDist + "index.cshtml")
      .pipe($.replacePath(/js\/lib.js/, "/app/dist/js/lib.js"))
        .pipe($.replacePath(/style\/app.css/, "/app/dist/style/app.css"))
        .pipe(gulp.dest(config.indexLocation));
});

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-5 gulp durandal-2.0 gulp-useref

【解决方案1】：

不知道这是“更好”的方法还是最佳解决方案，但您可以为索引文件使用模板之类的东西。因此，您将拥有一个 Index-template.cshtml 和所有您的 html cmets，您每次在您的 gulp 任务中都使用它来创建您的 Index.cshtml。

这样您就可以覆盖您的Index.cshtml 并将您的模板与您的所有html cmets 一起保存。

【讨论】：

在这种情况下如何在调试和发布之间切换？如果有人要使用这种方法？

【解决方案2】：

我是 .net mvc 的新手，正在尝试做与 Sergi 完全相同的事情。如果您修改了默认视图位置方案以包含您的 dist 文件夹 (How to change default view location scheme in ASP.NET MVC?)，.net 会知道包含 dist 文件夹并编译那些 .cshtml 文件吗？

【讨论】：

是的，但我仍然会遇到同样的问题，即我在开发过程中使用的Index.cshtml 在部署时会被 gulp 任务覆盖。它只会发生在不同的位置。