标签: bundling-and-minification

我开始使用.NET 4.5内置的缩小和捆绑来缩小和捆绑我的CSS和JavaScript.JavaScript缩小效果很好,然而,我在CSS缩小时遇到了麻烦.我使用下面的代码创建一个样式包 -

var myCss = new string[]
                                        {
                                            "~/Content/jquery.css",
                                            "~/Content/app.css",
                                        };
bundles.Add(new StyleBundle("~/bundles/MySiteCss/").Include(myCss ));

然后我在.cshtml(razor文件)中引用它们,如下所示 -

@Styles.Render("~/bundles/MySiteCss/")

它缩小了CSS文件.但是,如果CSS文件包含具有背景图像引用的样式,例如background-image:url('img/icon.png'),它会尝试从新位置加载此图标文件(从包名称派生) = /bundles/MySiteCss/img/icon.png

由于该位置中不存在该图标,因此不会加载并显示在页面上.

当提供一个呈现捆绑脚本的简单页面时,我的asp.net MVC4 Web项目运行速度非常慢.但是,当我在页面上使用带有虚拟包路径的source属性的"硬编码"脚本标记时,性能要好得多:

@Scripts.Render("~/bundles/scripts")                            ~ 4 seconds

VS

<script src='@Scripts.Url("~/bundles/scripts")'></script>       < 1 second

我BundleConfig.cs没有特殊配置,这与它看起来完全一样:

bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
    "~/Scripts/jquery-1.7.2.min.js",
    "~/Scripts/jquery.validate.min.js",
    "~/Scripts/jquery.validate.unobtrusive.js",
    "~/Scripts/jquery-ui-1.9.0.custom.min.js",
    "~/Scripts/bootstrap.min.js",
    "~/Scripts/bootstrap-modal.js",
    "~/Scripts/bootstrap-dropdown.js",
    "~/Scripts/bootstrap-tooltip.js",
    "~/Scripts/bootstrap-typeahead.js",
    "~/Scripts/bootstrap-transition.js",
    "~/Scripts/bootstrap-popover.js"));

我web.config甚至配置为在Debug中进行优化,但我尝试在Release模式下运行并仍然得到相同的结果:

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

任何想法为什么Scripts.Render这么慢？

我有一个使用jquery datepicker的网站(在常规的VS2012 MVC4模板中实现).它在localhost上运行时看起来很好.但是当我发布(到Azure)时,一些css丢失了.Chrome开发工具在两个css文件中显示404错误:

http://cyclelog.azurewebsites.net/Content/jquery.ui.base.css http://cyclelog.azurewebsites.net/Content/jquery.ui.theme.css

我注意到我的源代码树中没有这样的文件 - 而是两个文件在〜/ Content/themes/base下(不是直接在Content /下).我不知道该怎么做,因为 - 就像我说的 - css在localhost上运行正常.

我没有修改默认模板中创建的捆绑配置.或者,相反,我做了,但只是为了解决问题 - 这不起作用.我在bundle初始化中恢复了原始代码:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/site.css",                
            "~/Content/themes/base/jquery.ui.all.css"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
    "~/Content/themes/base/jquery.ui.core.css",                        
    "~/Content/themes/base/jquery.ui.resizable.css",
    "~/Content/themes/base/jquery.ui.selectable.css",
    "~/Content/themes/base/jquery.ui.accordion.css",
    "~/Content/themes/base/jquery.ui.autocomplete.css",                        
    "~/Content/themes/base/jquery.ui.button.css",
    "~/Content/themes/base/jquery.ui.dialog.css",
    "~/Content/themes/base/jquery.ui.slider.css",
    "~/Content/themes/base/jquery.ui.tabs.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    "~/Content/themes/base/jquery.ui.progressbar.css",
    "~/Content/themes/base/jquery.ui.theme.css"));

有任何想法吗？

我有以下内容

bundles.Add(new ScriptBundle("~/bundles/scripts/common").Include(
                  "~/Scripts/jquery.validationEngine.js",
                  "~/Scripts/common.js"));

哪个生成

<script src="/bundles/scripts/common?v=9O0Yi3fV_GWpGyJQ_QYURiOYy6SEmxUQtkUVN4GXo2U1"></script>

使用时渲染

    <asp:PlaceHolder ID="PlaceHolderJs" runat="server">                
            <%: Scripts.Render("~/bundles/scripts/common") %>
    </asp:PlaceHolder>

哪个不是有效的HTML,因为它缺少类型="text/javascript".如何使BundleCollection在脚本标记中输出此元素？

1. 我是否可以指示Grunt连接index.html中定义的所有JS文件而不专门命名它们？
2. Grunt也可以创建新的index.html文件来加载连接的JS文件而不是之前的多个文件吗？
3. Grunt可以同时uglify JS文件吗？
4. Grunt不仅可以为JS文件执行此操作,还可以在给定的html文件中使用CSS文件吗？

我花了很多时间谷歌搜索,但Grunt生态系统似乎是如此分散,我不熟悉:(.

PS:我已决定使用Grunt,因为在WebStorm 8中有直接集成,但也许其他工具更适合这项任务？

我是我的应用程序的ASP.NET MVC v4,我正在使用Web优化功能(脚本和样式的捆绑和缩小).

现在,我理解的是(如果错误请纠正我),优化框架将在编译时查看包含的文件并进行配置.它将根据内容创建版本号(v = something).每次内容更改时,它都会重新创建版本哈希,客户端将获得更新的文件.

现在,有没有办法完成以下任务

[1]更新我服务器中js文件中的内容,并将更新后的内容提供给客户端,而无需重新构建和重新启动应用程序(我不是在这里更改捆绑配置,只是更新脚本中的文件内容)？

[2]更新脚本配置本身(例如,向捆绑包添加新脚本),并将其提供给客户端,而无需重新编译和重新启动应用程序？或者,至少没有重新编译？(我知道,通常我们在cs文件中定义包,但想知道是否有出路!)

[3]有没有办法使用我自己的版本号(比如来自配置文件,v = myCustomScriptVersion)而不是自动生成的版本哈希？

要将相对图像路径转换为绝对路径,有很多问题需要在stackoverflow中提出并回答,如下所示:

MVC4 StyleBundle无法解析图像

建议添加new CssRewriteUrlTransform()如下:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
       .Include("~/Content/css/jquery-ui/*.css", new CssRewriteUrlTransform()));

这实际上已经救过我了.但是现在我将我的网站部署到应用程序(不是网站的根目录),仍然存在一个问题:

申请是:

http://localhost/sample/

但图片网址如下:

http://localhost/css/imgs/spirit.png

虽然它应该是:

 http://localhost/sample/css/imgs/spirit.png

虽然捆绑的CSS链接本身是正确和有效的.

虽然捆绑是VS的一个简洁功能,但有时我希望脚本或css可用于特定页面.这样,我可以确保避免名称冲突和/或覆盖.

是否可以捆绑文件以便只有全局和页面特定的文件可用？

例如,假设我有一个名为的页面Cabinet.cshtml.我也有Cabinet.js和Cabinet.css文件.另一方面,我有另一个页面调用AdminPanle.cshtml文件admin.js和admin.css.

现在,我希望这两个视图只能访问相应的文件以及jQuery和jQuery ui.所以jQuery必须是全局的.

我可以成功地将我的Typescript项目捆绑在一起，并使用例如将其保存为单个文件

tsc --outFile "build/bundle.js"

但是，此文件仅包含Typescript文件，并且不包含“ node_modules”目录中的任何文件，例如jQuery。如果我尝试执行捆绑软件，我将得到无法找到文件的错误。

如何将Typescript依赖的“ node_modules”文件添加到相同的单个捆绑文件中？Typescript显然知道文件在哪里，因为它具有正确的路径。

我正在使用SystemJS在浏览器中加载我的项目。我承认我很困惑我该如何去加载模块和捆绑（我可以使用SystemJS捆绑器？），却不理解为什么这样做的途径很多。

我正在迁移到 Bootstrap 5.0.2 并清理捆绑以进行优化。由于对各种旧浏览器版本的支持已被弃用，并且 Modernizr.js 自 2017 年以来就没有更新过，这一行是否仍然有必要？

@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", "~/bundles/modernizr")