简体   繁体   English

使用Asp.net 4.0 C#捆绑和缩小不应用css和js

[英]Bundling & minification not applying css & js using Asp.net 4.0 C#

I am new to this concept, this is my first project implementing the optimization concept with (Bundling & minification) 我是这个概念的新手,这是我的第一个实现优化概念的项目(捆绑和缩小)

Just i am trying to test with simple js & css 我正试图用简单的js和css进行测试

Test.aspx Test.aspx文件

<html>
<%@ import namespace="System.Web.Optimization" %>
<html>
<head runat="server">
    <%: Scripts.Render("~/bundles/js") %>
    <%: Styles.Render("~/bundles/css") %>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <button id="tests">
            testing</button>
    </div>
    </form>
</body>
</html>

Global.Asax look like this Global.Asax看起来像这样

protected void Application_Start(object sender, EventArgs e)
{
    RegisterBundles(BundleTable.Bundles);
}

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/js").Include(
     "~/script/jquery-1.8.2.min.js",
     "~/script/s.js"));

    bundles.Add(new StyleBundle("~/bundles/css").Include(
     "~/css/master.css"));

    BundleTable.EnableOptimizations = true;
}


Project Structure Look like this 项目结构看起来像这样

在此输入图像描述


browser View 浏览器视图 在此输入图像描述

the file are Bundling, but in Css i have some style to render in the webpage, it nothing appearing on this, 该文件是Bundling,但在Css中我有一些样式要在网页上呈现,它没有出现在这个,

Sample like jquery files also 像jquery文件一样的示例

for more info abt this post, please check this.. Click here 有关此帖子的更多信息,请查看此.. 点击此处

can you guide me to achieve this... 你可以指导我实现这个目标吗?

Your bundling is working, problem is you css are not working when bundled. 您的捆绑正在运行,问题是您捆绑时css不工作。

Change your style sheet bundle name to this: 将样式表包名称更改为:

bundles.Add(new StyleBundle("~/css/allcss").Include("~/css/master.css"));

This should solve your problem. 这应该可以解决您的问题。

PS if you keep your css files in multiple folders, then create a bundle for each folder. PS如果您将css文件保存在多个文件夹中,则为每个文件夹创建一个包。 You can use the IncludeFolder method to make your job easier. 您可以使用IncludeFolder方法使您的工作更轻松。

Prasad Raja, Prasad Raja,

When debugging or when your web.config has the setting 调试时或web.config有设置时

<compilation debug="true" ..>

the script bundling and minification is disabled. 脚本捆绑和缩小功能已禁用。 Also if you set EnableOptimizations = false will also disable budling and minification regardless of the debug=true setting. 此外,如果设置EnableOptimizations = false则无论debug=true设置如何,也将禁用budling和minification。

Try changing your web.config and try again. 尝试更改您的web.config并重试。

OK so after I reviewed the code and dug deeper into the problem the reason why this is happening is the paths ~/bundles/js and ~/bundles/css exist. 好的,所以在我查看代码并深入研究问题后,发生这种情况的原因是路径~/bundles/js~/bundles/css存在。 Therefore your IIS (Express) is trying to load the contents of the directory. 因此,您的IIS(Express)正在尝试加载目录的内容。 To get this to work ensure you set your compilation debug = false (it was set to true on the project download). 要使其工作,请确保设置编译debug = false(在项目下载时将其设置为true)。 Such as

<compilation debug="false" targetFramework="4.0"/>

Next locate the ~/bundle folder and DELETE IT... Finally rebuild your application and run the project. 接下来找到~/bundle文件夹并删除它...最后重建你的应用程序并运行项目。 However dont run it in debug or it will try and set your debug flag above back to true. 但是,不要在调试中运行它,否则它会尝试将上面的调试标志设置为true。

This is working on my machine now for both JS and CSS. 这对我的机器现在都适用于JS和CSS。

Try this in your web.config 在web.config中试试这个

<configuration>
    ...
    <system.web>
        <compilation
            debug="true"
            ...
        >
        ...
        </compilation>
    </system.web>
</configuration>

see MSDN MSDN

在您的Web配置文件中设置:

<compilation debug="false" targetFramework="4.0">

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM