Combining a linked JavaScript file

Question

I work with Visual Studio 2012 and MVC4. I added the linked file (from another project) to my MVC4 application. Here are the file properties:

• Build Action: Content
• Copy to output directory: do not copy

Here is an example of my package:

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

For testing, I also added an empty JavaScript file (temp.js) to this folder. This is not an associated file. When checking the page source, this file appears, but there is no linked file. I also cannot go directly to this file. Other files in the bundle look just fine.

Can I link related files?

Answer 1

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

File binding is a Visual Studio concept used to include files stored elsewhere in compiling code and resources. Obviously, linking the file will work if you need to compile it (this is the source file), if you need to paste it as a resource or you need to copy it to the destination directory (if Copy to Output Directory is set to Copy).

---

Why it does not work in debug mode

In debug mode, linking is disabled, and scripts are connected to each other. Since the files are not copied to the root of your web application, they will not be accessible to the user through IIS. If you try to allow the copying of the script file each time you create the application, the file will be copied to the bin directory of the web application. This directory is not accessible through IIS, and again this will not work.

---

Why does it work in release mode

In release mode, script binding is performed. script files are not connected to each other from web pages, so the user does not need to have access to them directly. Only access to picking code should be available. But you have to be sneaky to set this up. You need:

• Set Copy to Output Directory related scripts to Copy always . If you store related scripts in ~ / Scripts, after compiling the application, they will be copied to the ~ / bin / Scripts folder.
• Configure the binding path to include the bin directory.

Note ~/bin/Scripts/ in the following line:

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

---

Turn off debug mode

The debugging mode mentioned here is not a compiler option in Visual Studio. This is an element in the web.config .

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

Answer 2

The easiest solution I have found for linking to work with related files is to add an MSBuild target, which automatically copies all related content files to the correct location before each build.

Just add the following to the [project].csproj :

 <!-- 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 associating them with source control or packet splitting.