ASP.NET script bundling without minification

In a project I recently joined, the team uses React for the front-end. They have a Gulp task which compiles jsx files to js files and minify them. The Gulp task also appends a version number at the end of the minified js file’s name. I notice that the front-end developer has to manually increment this version number in the Gulp setting as well in the project file and the cshtml file where the js file is referenced.

This has been ok as he is the only developer working on the front-end. However, as more people developers start working on the front-end, it gets very tedious. We have to work out the next version number each developer can use in their commit. Another issue is that we keep getting merge conflicts when putting up pull requests. There has been some days where I find myself resolving conflicts for the same pull request multiple times.

ASP.NET script bundling

I propose using bundling to avoid having to manually update the file version manually. Bundling has worked really well in my previous projects.

The team says that they had tried bundling before but it did not work as some JS components don’t work after getting bundled. Also, apparently the changes don’t get applied and requires users to force refresh their browser or clear the cache.

With the second issue, I know that is not true. Bundling generates a new token when there are changes in the scripts. The browser will only request the files if there’s a new token, otherwise it uses the file from its cache.

As with the first issue, I’m not sure what might cause this. I decide to give this a go and attempt to solve the issue.

In the BundleConfig.cs, add a new script bundle.

bundles.Add(new ScriptBundle("~/Scripts/reactScripts")
                .Include("~/Scripts/reactScripts.js"));

In the cshtml file where the js file is referenced, add the following just before the closing </body> tag.

@Scripts.Render("~/Scripts/reactScripts")

This seems to work. Changes get applied without having to clear the browser cache after Gulp compilation task. However, I notice the datepickers are broken as the team mention before. Turns out that ASP.NET bundling minifies the already minified js files and this breaks some of the js components.

I try removing the minification task in the Gulp setting and use the ASP.NET minification but the datepickers still break. This is apparently a known issue with ASP.NET bundling minification. So I decide to keep the Gulp minification and use ASP.NET bundling to only bundle the js files without minification. After a bit of Googling, to bundle scripts without minification, simply create a new Bundle rather than ScriptBundle.

bundles.Add(new Bundle("~/Scripts/reactScripts")
                .Include("~/Scripts/reactScripts.js"));

This solves all the issues with having to manually update the version number and js component breaking.