标签: bundling-and-minification

我刚刚将ASP.NET MVC 3项目迁移到MVC 4/.NET 4.0,并安装了NuGet包Microsoft.AspNet.Web.Optimization以支持CSS和JavaScript的捆绑和缩小.我几乎有捆绑/缩小工作,问题是它始终启用.即使应用程序处于调试模式(如在Web.config中配置),所有JavaScript包含都会缩小.从下面的XML代码段中可以看到,在Web.config中启用了调试模式:

<system.web>
  <compilation debug="true" targetFramework="4.0">
    ...
  </compilation>
  ...
</system.web>

我的捆绑配置的摘录:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        ...

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.*",
                    "~/Scripts/jquery.form.js",
                    "~/Scripts/jquery.format.js"));

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

        ...
    }
}

CSS/JavaScript包含在HTML中呈现,例如:

<link href="/content/css" rel="stylesheet" type="text/css">
<script src="/bundles/jquery" type="text/javascript"></script>

有没有人知道为什么在我的情况下启用缩小？我不知道我在这里失踪了什么.要解决我创建了一个测试ASP.NET MVC 4的互联网应用,并可以验证CSS/JavaScript的并没有在调试模式下获得精缩为这个项目.

编辑:

在我的_Layout.cshtml文件中,我像这样渲染样式/脚本:

@Styles.Render("content/css")
@Scripts.Render("bundles/jquery")

感谢Hao,我意识到我忘了用"〜/"作为包名称的前缀.

有没有办法@:Scripts/Styles.Render从代码后面复制助手的行为？

如果我使用该BundleTable.Bundles.ResolveBundleUrl方法引用捆绑包,则即使使用捆绑和缩小也会发生debug=true.我已经阅读了其他问题,通过使用前面提到的帮助程序,解决方案似乎非常明显.但在我的情况下,我在aspx中不知道bundle的名称,它是在运行时在后面的代码中生成的.

所以,我需要在后面的代码中添加引用,我找不到办法.

有办法吗？或者我将被迫在.aspx文件中执行此操作？

在ASP.NET MVC4应用程序中,使用创建样式包

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

并在视图中呈现为

@Styles.Render("~/css/pos.css")

调试模式下生成的输出是

  <link href="/myapp/css/mypos.css" rel="stylesheet"/>

如何将media属性添加到输出中以便将样式用于屏幕

  <link href="/myapp/css/mypos.css" media="screen" rel="stylesheet"/>

或用于打印

<link href="/myapp/css/mypos.css" media="print" rel="stylesheet"/>

或者有更好的方法,可以在css文件或其他解决方案中指定媒体吗？使用jquery和jquery-ui.

在Visual Studio 13的ASP.Net Web表单的默认模板中,有一个标签webopt:

<webopt:bundlereference runat="server" path="~/Content/css" />

搜索后,似乎是捆绑和缩小.标签有官方文档吗？我找不到一个.具体来说我想知道,它是如何工作的？如果Content文件夹中已存在缩小文件,则它将获取该文件.我该如何改变这种行为？路径值如何转换,因为Content文件夹中没有文件夹css？

在 webpack 中，可以通过以下方式生成输出：

• 1 个包含 js 代码的文件
• 1 个带有捆绑 CSS 的文件

这是 webpack 配置的一部分，会产生这样的输出：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

...

plugins: [
  new MiniCssExtractPlugin({
    filename: 'assets/css/styles.css',
    chunkFilename: '[id].css',
  }),
  ...
],

...

{
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
    },
  ],
},

...

如何用vite实现这一点？

vite 模板默认生成配置，其中 js 和 css 捆绑到单个文件中，并在运行时注入 css。

我正在MVC4中实现捆绑和缩小支持并进行设置,以便它可以自动编译我的Bootstrap .less文件.我在BundleConfig.cs文件中有以下代码

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        // base bundles that come with MVC 4

        var bootstrapBundle = new Bundle("~/bundles/bootstrap").Include("~/Content/less/bootstrap.less");
        bootstrapBundle.Transforms.Add(new TwitterBootstrapLessTransform());
        bootstrapBundle.Transforms.Add(new CssMinify());
        bundles.Add(bootstrapBundle);
    }
}

TwitterBootsrapLessTransform如下所示(由于需要将sub .less文件导入dotLess,因此比我想要的更复杂)

public class TwitterBootstrapLessTransform : IBundleTransform
{
    public static string BundlePath { get; private set; }

    public void Process(BundleContext context, BundleResponse response)
    {
        setBasePath(context);

        var config = new DotlessConfiguration(DotlessConfiguration.GetDefault());
        config.LessSource = typeof(TwitterBootstrapLessMinifyBundleFileReader);

        response.Content = Less.Parse(response.Content, config);
        response.ContentType = "text/css";
    }

    private void setBasePath(BundleContext context)
    {
        BundlePath = …

我有一个带有MEF和RavenBD的asp.net MVC 4项目.

当项目加载时,它会抛出此异常:无法加载文件或程序集Antlr3.Runtime.dll

我发现RavenDB和WebGrease(与MVC 4一起安装)都使用Antlr3.但WebGrease附带了自己的Antlr3 dll,由微软签署 - PublicKeyToken 31bf3856ad364e35

Antlr3默认的PublicKeyToken是eb42632606e9261f.

RavenDB和WebGrease使用相同版本的Antlr3 3.3.1.7705

我该如何解决这个问题？

最近,我的一个项目的本地副本完全失去了它的大部分样式.我花了一些时间才弄明白,因为大多数样式都是在一个文件中完成的,其余的都是像Kendo和jQuery UI这样的小东西.

其他的小东西没有添加到页面中.我认为这些样式已经被其他开发人员修改过了(暂时还没有触及过这个项目),他们只测试了Web API的东西而不是UI,所以他可能会破坏它并且从来不知道,但我追查了这个问题:只有site.css文件被包含在包中而没有包含在其他文件中.我甚至尝试重新排列捆绑包中包含的CSS文件的顺序,它只包括site.css.

我重建了项目,清理了缓存等,所以肯定看到了变化.我记得最近更新了一些NuGet包或VS包或者其他东西 - 甚至可能是MVC包？

我的问题是:有什么改变导致这种情况发生吗？是什么导致了这个？

编辑:代码来自BundleConfig.cs:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/site.css",
            "~/Content/themes/kendo/kendo.common.min.css",
            "~/Content/themes/kendo/kendo.default.min.css",
            "~/Content/themes/base/minified/jquery.ui.core.min.css",
            "~/Content/themes/base/minified/jquery.ui.resizable.min.css",
            "~/Content/themes/base/minified/jquery.ui.selectable.min.css",
            "~/Content/themes/base/minified/jquery.ui.accordion.min.css",
            "~/Content/themes/base/minified/jquery.ui.autocomplete.min.css",
            "~/Content/themes/base/minified/jquery.ui.button.min.css",
            "~/Content/themes/base/minified/jquery.ui.dialog.min.css",
            "~/Content/themes/base/minified/jquery.ui.slider.min.css",
            "~/Content/themes/base/minified/jquery.ui.tabs.min.css",
            "~/Content/themes/base/minified/jquery.ui.datepicker.min.css",
            "~/Content/themes/base/minified/jquery.ui.progressbar.min.css",
            "~/Content/themes/base/minified/jquery.ui.theme.min.css"));
}

代码来自_Layout.cshtml:

@Styles.Render("~/Content/themes/base/css", "~/Content/css")

这个问题有很多解决方案,请阅读下面的所有答案,它们也可以帮助您解决问题.如果您找到解决此问题的新方法,请在答案中记录

我试图将System.Web.Optimization添加到我的ASP.NET Web窗体解决方案.我通过NuGet包添加了Microsoft ASP.NET Web Optimization Framework.它将Microsoft.Web.Infrastracture和WebGrease(1.5.2)添加到引用中.

但是,当我跑

<%= System.Web.Optimization.Scripts.Render("~/bundles/js")%>

我得到运行时错误

Could not load file or assembly 'WebGrease, Version=1.5.1.25624, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

我已经尝试将assemblyBinding添加到Web.Config

<runtime>
  <legacyUnhandledExceptionPolicy enabled="1"/>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" culture="neutral"/>
        <bindingRedirect oldVersion="0.0.0.0-1.5.1.25624" newVersion="1.5.2.14234"/>
      </dependentAssembly>
    </assemblyBinding>
</runtime>

但没有任何运气.

我注意到我的WebSite的Web配置包含这一行

 <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">

如果我用它替换它

 <configuration>

然后一切正常,我没有得到运行时错误.不幸的是,我需要xmlns.我项目的其他组件依赖于它.

为什么当架构指向v2.0时,Optimization会尝试加载旧版本？有没有办法强制它加载最新或唯一可用的WebGrease.dll？

如果不改变,我还能尝试什么

 <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> ?

感谢您提供任何帮助!

编辑:1)附加FusionLog结果.也许它会有所帮助

=== Pre-bind state information ===
LOG: User = …

我在一个多页面项目中使用RequireJS,其Javascript文件夹结构看起来有点像这样(你如何在Markdown中再次制作这些花哨的目录树？):

common.js
lib/
-- jquery-1.9.1.min.js
-- modernizr-2.6.2.min.js
-- underscore-amd.min.js
page/
-- index.js
-- start.js
-- checkout.js

无论如何,common.js是我的主脚本文件,我在那里设置配置参数.这是看起来像:

common.js文件

// Configure RequireJS
requirejs.config({
    baseUrl: "assets/js/lib",
    paths: {
        page: '../page',
        jquery: [
            '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
            //If the CDN location fails, load from this location
            'jquery-1.9.1.min'
        ],
        modernizr: [
            '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min',
            //If the CDN location fails, load from this location
            'modernizr-2.6.2.min'
        ],
        underscore: [
            'underscore-amd.min'
        ]
    }
});

所有页面调用都按预期工作(加载了CDN位置),但我无法理解缩小部分.该r.js优化干脆拒绝合作,抛出Error: paths fallback not supported in optimizer. Please provide a build config path …