Search code examples
asp.net-mvc-5gulpweb-essentials

ASP.Net 5 js, css bundling


I am currently using the gulp-bundle-assets module in a task to bundle css and js in my project. Each time I run it the module generates new filename making sure the browser will pick the latest bundle. However I need to change my file references manually in my html whenever the filename changes. The gulp-bundle-asset suggests a way to programmatically update the views by reading a json file.

What would be the proper way to handle the bundling with dynamic filenames in Visual Studio?

How are the relative paths for static content treated such as images,fonts?

Thanks!


Solution

  • I'm the author of gulp-bundle-assets. I actually created an example of this awhile back using ASP.NET 5 (now named ASP.NET Core v1) seen here: https://github.com/dowjones/gulp-bundle-assets-example-aspnet-5. You'll want to rely on the bundle.result.json file.

    The key pieces are as follows:

    // read bundle.result.json
    public async Task<dynamic> GetBundleResult()
    {
        string fileName = Path.Combine(_appEnvironment.ApplicationBasePath, "bundle.result.json");
        string jsonText = File.ReadAllText(fileName);
        return await Task.FromResult(JObject.Parse(jsonText));
    }
    

    And in your view:

    @inject ExampleMVC6Application.Services.BundlerService Bundler
    @{
        dynamic Bundles = await Bundler.GetBundleResult();
    }
    <!DOCTYPE html>
    <html>
        <head>
            @Html.Raw((object)Bundles.vendor.styles)
            @Html.Raw((object)Bundles.main.styles)
        </head>
        ...