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

Question

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

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

当然，要使应用程序正常工作，我需要在 Views/Home/ 中更新 index.cshtml。我用 gulp 创建了一个 "copy" 任务，它就是这样做的；它会覆盖原始 index.cshtml 并修复连接的 js 和 css 文件的路径。
这也有效，但由于 useref 删除了 html 注释，这些注释标记了应该插入对串联文件的引用的位置，因此该过程不可重复。

让我用一些代码来说明。

在我的 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 注释，因此如果我用此文件覆盖原始 index.cshtml，useref 将不知道将注释放在哪里更新的脚本标签。如果我不覆盖原始 index.cshtml，应用程序将不会使用串联文件。

我是 gulp 的新手，所以我可能会以完全错误的方式进行此操作，但是 如何确保我的 /Views/Home/index.cshtml 使用串联文件以自动方式？

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

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

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));
});

Answer 1

不知道这是 'better' 方法还是最佳解决方案，但您可以为索引文件使用模板之类的东西。所以你会有一个 Index-template.cshtml 和你所有的 html 评论，你每次在你的 gulp 任务中用它来创建你的 Index.cshtml。

这样您就可以覆盖您的 Index.cshtml 并保留您的模板以及您的所有 html 评论。

Answer 2

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

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

Bundling and concatenation with gulp-useref Durandal and ASP.NET MVC

asp.net-mvc

asp.net-mvc-5

gulp

durandal-2.0

gulp-useref