Search code examples
asp.net-mvcasp.net-mvc-5gulpdurandal-2.0gulp-useref

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

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

  • Don't know if this is 'better' approach or the best solution but you could use something like a template for your index file. So you would have an Index-template.cshtml with al your html comments which you use to create your Index.cshtml every time in your gulp tasks.

    This way you can overwrite your Index.cshtml and keep your template with al your html comments.