JS / CSS包括部分替换,Debug vs Release

时间:2009-05-21 23:25:05

标签: asp.net javascript msbuild compression

我很想知道人们如何处理条件标记,特别是在发布和调试版本之间的主页中。

这适用的特定场景是处理串联的js和css文件。我目前正在使用YUI压缩的.Net端口从大量单独的文件中生成单个site.css和site.js。

我想到的一个想法是将js和css include部分放在用户控件或面板集合中,并根据Debug或Release状态有条件地显示<link><script>标记。集会。有点像:

#if DEBUG
    pnlDebugIncludes.visible = true
#else
    pnlReleaseIncludes.visible = true       
#endif

面板在语义上真的不太好 - 在<script>中包装<div>标签有点粗糙;必须有一个更好的方法。我还认为像<div>中的<head>这样的块级元素将是无效的html。

另一个想法是,这可能是使用web.config部分替换来处理的,但我不确定我会怎么做。

3 个答案:

答案 0 :(得分:9)

我刚刚在我的ASP.NET MVC项目的主页面中尝试了这个并且它有效。如果在DEBUG模式下我使用jQuery的开发版本,如果不是在DEBUG模式下,我使用jQuery的缩小版本:

<head runat="server">
<% #if DEBUG %>
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.js") %>"></script>
<% #else %>
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.min.js") %>"></script>
<% #endif %>
</head>

答案 1 :(得分:5)

这里有关于web.config设置更改的讨论:

Using different Web.config in development and production environment

注意:你问了一个不同的问题,但我建议你看一下,因为它是如何在实时和调试设置之间切换以及所有答案(IMO)都有一些价值的一个很棒的建议集合 - 不仅仅是最高投票/接受的答案。

个人,我使用这里解释的方法并认为它是最灵活的,并且适用于所有类型的配置更改,因为它是基于文件的,但允许它们基于解决方案自动交换配置:

http://www.hanselman.com/blog/ManagingMultipleConfigurationFileEnvironmentsWithPreBuildEvents.aspx

实质上,您运行预构建事件以将另一个Web配置交换到光盘上,并将解决方案配置名称附加到文件名。例如,我有web.config.release,web.config.debug甚至是web.config.neilathome。

然后,我通过创建部分类并将我的解决方案配置之间发生变化的东西放在他们自己的文件中,然后对条件位代码使用完全相同的方法。例如,我有sync_timersettings.cs这是一个包含一些常量的部分类,这些常量定义了我的更新代码调用Web服务的频率。或者您可以将所有设置放在app.settings文件中并按照这种方式执行。

我发现它是一个非常灵活的解决方案,它让我可以换掉javascript和css的块,只要你花时间把配置之间的东西放在自己的文件中,你就可以去你所在的州可以在调试解决方案配置中进行调试,然后只需单击一下即可切换到发布和部署。

进一步说明:

#if DEBUG
    pnlDebugIncludes.visible = true
#else
    pnlReleaseIncludes.visible = true       
#endif

对评论的回复:

这仅在您具有调试解决方案配置而另一个是您的实时部署时才有用。当您(像我一样)具有分段,发布和neilonhislaptop解决方案配置时,它将无法工作,因为只有在启用调试时才设置DEBUG符号。解决方法是转到Web应用程序的属性页面,在构建选项卡中,为每个构建配置添加条件符号。 IE,设置构建配置以释放并在该选项卡的条件符号框中放置'release'。然后对不同的构建配置执行相同操作,其中的条件符号框将根据您的构建配置自动更改。 #if条件编译指令将按预期工作。

Bayard询问了有关如何使用它来更改配置之间标记的更多信息。那么你可以用来交换整个.aspx页面 - 有home.aspx.release和home.aspx.debug但这意味着你必须在每个文件中重复大量标记。我的解决方案是为我的应用程序添加一个部分类。例如,我的“ViewImage”页面中包含以下类定义:

public partial class ViewImage : System.Web.UI.Page

..所以我创建了一些具有相同签名的类文件,并将它们命名为'ViewImage_titleset.cs.debug'和'ViewImage_titleset.cs.staging':

namespace Website
{
    public partial class ViewImage : System.Web.UI.Page
    {
        public void SetTitle()
        {
            Page.Title = "Running in debug mode";
        }
    }
}

namespace Website
{
    public partial class ViewImage : System.Web.UI.Page
    {
        public void SetTitle()
        {
            Page.Title = "Running in staging mode";
        }
    }
}

..在ViewImage的页面加载事件中调用SetTitle会根据所使用的构建配置更改标题。这仅在您以编程方式更改页面时才有效。

最好使用上面的条件编译方法来更改这样的代码,并保留文件交换方法来更换非代码文件,如images或web.configs。只需确保您没有设置要在发布时部署的备用文件。

答案 2 :(得分:1)

关于JS文件,我所做的是使用Web Deployment Projects预编译Web应用程序。如果配置是Release,则构建完成后,我将缩小JS文件并替换输出目录中的文件。这一切都是使用MSBuild完成的,因为Web部署项目是MSBuild文件。