有时我们需要在不同的WEB APPLICATION共享一些静态文件,如JAVASCRIPT,CSS或者图片。本文将演示如何利用Visual Studio的链接功能,配合 MSBuild target功能来确保浏览器能正确加载共享的文件!

通过VISUAL STUDIO的链接功能共享静态文件

你可能有好几个文件需要在不同的WEB APPLICATION中使用,例如,JAVASCRIPT库,公司LOGO图片。当这些共享静态文件更改时,就需要避免发生“忘了把这些文件拷贝到所有相关的WEB APPLICATION”这种杯具发生。

最好的解决方法不是一个个去拷贝,而是把这些静态文件全部存到某个集中位置,然后在VISUAL STUDIO中链接到这些文件,这样一来,在VISUAL STUDIO中可以一直看到最新的版本!

创建链接的方法:

  1. 右击想要存放链接的文件夹
  2. 选择“添加现有项”
  3. 找到想要添加的共享文件
  4. 点击添加按钮旁边的三角形打开下拉菜单选添加链接 共享文件就会出现在相应的文件夹中

当你修改共享文件时,你会发现相应的修改会马上在引用WEB APPLICATION中出现。如果你有使用源代码控制系统TFS,TFS会自动CHECK OUT引用的共享文件。

还有,当您发布WEB APPLICATION,这些链接过来的共享文件一样会被打包发布

利用 MSBuild target 复制链接文件

链接的文件有一个不爽的地方。当按F5运行网站时,浏览器无法加载链接文件。因为VS只是在工程文件中声明了一个链接,实际上并不会把文件拷贝到相对应的文件夹。当用我的电脑打开相对应文件夹时你是看不到链接文件的。

现在我们来弄一弄扩展一下编译过程,让每次编译时链接的文件会被复制到相对应的文件夹,这样一来我们即可以达到动态链接的效果,同时又可以在调试时让浏览器正确加载链接文件。

要明白其中原理,我们需要明白VS怎么存储这些链接

  1. 添加链接文件
  2. 用文件编辑器打开对应的csproj文件
  3. 使用查找功能找到链接文件名所在的位置 你可以看到普通文件是这样配置的:
1
<Content Include="Scriptsjsnlog_test.js" />

而链接文件是这样:

1
2
3
<Content Include="....JSNLogScriptsjsnlog.js">
  <Link>Scriptsjsnlogjsnlog.js</Link>
</Content>

换句话说,它们之间的区别就是链接文件多了一个LINK节点,指明链接文件的原始物理位置

言下之意我们可以通过在.csproj__ 节之前添加以下代码,让VS在编译时将这些链接文件拷贝到相对应的文件夹

1
2
3
4
5
6
7
<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
    <Copy SourceFiles="%(Content.Identity)"
        DestinationFiles="%(Content.Link)"
        SkipUnchangedFiles='true'
        OverwriteReadOnlyFiles='true'
        Condition="'%(Content.Link)' != ''" />
</Target>

_BeforeTargets_确保这条指令会在每一次编译时被执行!

此处配置了只拷贝带有LINK节点的Content条目,只会对链接文件进行操作。同时为了提高处理速度,还指定了_SkipUnchangedFiles_ 为TRUE,这样一来如果链接文件没有变动,就不会执行拷贝。