3

I have a Durandal 2 app based on ASP.NET MVC 5 and Web API, with the initial Index.cshtml (on HomeController) being served through the MVC router. From then on it's all regular html views being handled by the Durandal router.

Anyway, I'm trying to use gulp-useref to concatenate all css and js files. I've got everything working and gulp-useref drops the newly concatenated files and an index.cshtml with the updated script and stylesheet references in a dist folder.

Of course, for the application to work I need the updated index.cshtml back in Views/Home/. I have created a "copy" task with gulp that does just that; it overwrites the original index.cshtml and fixes the paths to the concatenated js and css files.
That works as well, but since useref removes the html comments that mark the spot where it should insert the references to the concatenated files, the process is not repeatable.

Let me illustrate with some code.

In my Index.cshtml I have:

<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>

This is where gulp-useref will place the updated script reference so it will end up looking like this:

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

As you can see, useref removes the html comments so if I overwrite the original index.cshtml with this file, useref will not know where to place the updated script tag. And if I don't overwrite the original index.cshtml, the application will not be using the concatenated files.

I'm new to gulp so I might be going at this in the completely wrong way, but how can I make sure that my /Views/Home/index.cshtml uses the concatenated files in an automated manner?

Or, alternatively, is there a better approach for what I'm trying to do, namely, get everything ready for deployment?

Here are my relevant gulp tasks, for reference:

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

2 回答 2

1

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

这样您就可以用您的所有Index.cshtmlhtml 注释覆盖您的模板并保留您的模板。

于 2015-04-12T09:49:38.570 回答
0

我是 .net mvc 的新手，正在尝试做与 Sergi 完全相同的事情。如果您修改了默认视图位置方案以包含您的 dist 文件夹（如何在 ASP.NET MVC 中更改默认视图位置方案？），.net 会知道包含 dist 文件夹并编译这些.cshtml文件吗？

于 2015-04-15T18:11:06.540 回答