Bundling a linked JavaScript file

Question

I'm working with Visual Studio 2012 and MVC4. I've added a linked file (from another project) to my MVC4 application. Here are the properties of the file:

• Build Action: Content
• Copy to Output Directory: Do not copy

Here is an example of my bundle:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*","~/Scripts/jquery.validate*","~/Scripts/FolderA/*.js"));

For testing, I've also added an empty JavaScript file (temp.js) to that folder. This is not a linked file. When inspecting the source of the page this file appears but the linked file does not. I cannot navigate directly to this file either. The other files in the bundle appear just fine.

Can linked files be bundled?

Answer 1

Short answer: No in debug mode, yes in release mode.

File linking is a Visual Studio concept used to include files stored elsewhere into code and resource compilation. Clearly, linking a file will work if you need to compile it (it's a source file), if you need to embed it as a resource or you need it copied to target directory (if Copy to Output Directory is set to Copy).

---

Why it doesn't work in debug mode

In debug mode, bundling is disabled and scripts are linked to individually. Since files are not copied to root of your web application, they will not be accessible to user through IIS. If you try to enable copying of the script file every time you build the application, file will be copied to bin directory of web application. This directory is not accessible through IIS, and again this won't work.

---

Why it works in release mode

In release mode, bundling of scripts is performed. Script files are not linked to individually from web pages, and therefore user does not need to have access to them directly. Only bundling code needs to be able to access it. But you have to be sneaky about configuring this. You need to:

• Set Copy to Output Directory of linked scripts to Copy always . If you store your linked scripts in ~/Scripts, once you compile the application they will be copied to ~/bin/Scripts folder.
• Configure bundling path to include bin directory.

Note ~/bin/Scripts/ in following line:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*","~/Scripts/jquery.validate*","~/bin/Scripts/FolderA/*.js"));

---

Disabling debug mode

Debug mode mentioned here is not compiler setting in Visual Studio. This is an element in web.config file.

<system.web>
    <compilation debug="false" targetFramework="4.5" />

Answer 2

The easiest solution I've found to get bundling to work with linked files is adding an MSBuild target which automatically copies any linked content files to the correct location before every build.

Simply add the following to the [project].csproj file:

<!-- Copy linked content files to their location on build. -->
<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
  <Copy SourceFiles="%(Content.Identity)" DestinationFiles="%(Content.Link)" SkipUnchangedFiles="true" OverwriteReadOnlyFiles="true" Condition="'%(Content.Link)' != ''" />
</Target>

This allows me to link Angular JavaScript files, Bootstrap CSS files etc. from their NuGet packages without having to commit them to source control or breaking bundling.