标签: bundling-and-minification

嗨,我目前正在使用asp.net MVC 4 rc与System.Web.Optimization.由于我的网站需要根据用户偏好进行本地化,因此我正在使用jquery.globalize插件.

我非常希望继承ScriptBundle类,并根据需要确定要捆绑的文件System.Threading.Thread.CurrentThread.CurrentUICulture.这看起来像这样:

bundles.Add(new LocalizedScriptBundle("~/bundles/jqueryglobal")
                             .Include("~/Scripts/jquery.globalize/globalize.js")
                             .Include("~/Scripts/jquery.globalize/cultures/globalize.culture.{0}.js", 
                                       () => new object[] { Thread.CurrentThread.CurrentUICulture })
                    ));

例如,如果ui文化是"en-GB",我希望拾取以下文件(当然缩小,如果可能的话,也会缓存,直到脚本文件或currentui文化发生变化).

• "〜/脚本/ jquery.globalize/globalize.js"
• "〜/ Scripts/jquery.globalize/globalize-en-GB.js"< - 如果此文件在服务器文件系统上不存在,则回退到globalize-en.js.

我尝试使用类似下面的内容重载Include方法,但这不会起作用,因为它不是根据请求进行评估,而是在应用程序启动时进行评估.

public class LocalizedScriptBundle : ScriptBundle
{
    public LocalizedScriptBundle(string virtualPath)
        : base(virtualPath) { 
    }

    public Bundle Include(string virtualPathMask, Func<object[]> getargs) {
        string virtualPath = string.Format(virtualPathMask, getargs());
        this.Include(virtualPath);
        return this;
    }

}

谢谢

康斯坦丁

我正在使用新的System.Web.Optimization并创建了一个这样的包:

bundles.Add(New ScriptBundle("~/bundles/BaseJS").Include(
                "~/Resources/Core/Javascripts/jquery-1.7.1.js",
                "~/Resources/Core/Javascripts/jquery-ui-1.8.16.js",
                "~/Resources/Core/Javascripts/jquery.validate.js",
                "~/Resources/Core/Javascripts/jquery.validate.unobtrusive.js",
                "~/Resources/Core/Javascripts/jquery.unobtrusive-ajax.js"))

在我看来,我添加了这个

@System.Web.Optimization.Scripts.Render("~/bundles/BaseJS")

在fiddler中,URL会遇到未来1年的过期标头和文本/ javascript的内容类型

在web.config中,我有一些gzip的代码正在处理静态JS文件,但它似乎没有在缩小的bundle上.

<staticContent>
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
  <remove fileExtension=".js"/>
  <mimeMap fileExtension=".js" mimeType="text/javascript"/>
</staticContent>
<urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true"/>
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
  <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll"/>
  <dynamicTypes>
    <add mimeType="text/*" enabled="true"/>
    <add mimeType="text/javascript" enabled="true"/>
  </dynamicTypes>
  <staticTypes>
    <add mimeType="text/*" enabled="true"/>
    <add mimeType="text/javascript" enabled="true"/>
  </staticTypes>
</httpCompression>

有没有办法让渲染包gzip的内容？

到目前为止,我无法找到问题或解决此问题.我确信这很简单,我很想念.

我有一个带有一堆缩小的CSS的样式包,我正在使用里面的类来装饰HTML元素.一切都很好.

然而,Intellisense和ReSharper都会让我不知道那些未知类的CSS.我猜这是因为他们不能偷看捆绑内部.

问题:有没有办法解决这个问题？

<!-- Style Bundles in HEAD tag-->
@Styles.Render("~/bundle/style/css")
@RenderSection("styles", false);

<!-- HTML elements in BODY tag: "row" is an unknown css class -->
<div class="row">
    <p>Lorem ipsum</p>
</div>

更新: Visual Studio 2012.LESS转换和intellisense适用于单个直接引用的文件.我的情况是,当引用LESS包时,intellisense会中断.

更新2:这是代码显示,BundleConfig.cs因为它不清楚

var customStyles = new Bundle("~/bundle/style/css")
                      .Include("~/Content/normalize.css","~/Content/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(customStyles);

请注意我们使用的Bundle不是StyleBundle必需的,因为我们要指定LessTransform()类并跳过内置的CSS转换器.LessTransform对象是一个自定义对象,它只读取所有LESS内容并在StringBuilder上连接它,然后调用dotless的转换器......出来一个巨大的CSS字符串,它被缩小并返回.问题是为什么无法通过VS或ReSharper查看返回的CSS并帮助检查类样式？

我正在研究ASP.NET MVC4 System.Web.Optimization捆绑,并想知道如何从CDN和其他本地服务器提供一些CSS文件？

那可能吗？

它看起来像bundles.UseCdn = true在集合级别而不是单个包的设置.

任何指导将不胜感激.

我觉得现在有点卡住了.首先我用nuget来

install-package Bootstrap.less

以及

安装包无点

然后,正如Rick Andersons Blogpost关于 asp.net mvc中的捆绑和缩小所示,我创建了一个LessTransform-Class.我设置了2个几乎空的.less文件并创建了一个新的包装包装......

    var lessBundle = new Bundle("~/MyLess").IncludeDirectory("~/Content/MyLess", "*.less", true);
    lessBundle.Transforms.Add(new LessTransformer());
    lessBundle.Transforms.Add(new CssMinify());
    bundles.Add(lessBundle);

这很好用.然后我在主bootstrap.less文件中添加了一个新的StyleBundle(基本上使用@import包含bootstrap.less发送的所有其他.less文件)...

    bundles.Add(new StyleBundle("~/Bootstrap").Include("~/Content/Bootstrap/less/bootstrap.less"));

和一个ScriptBundle到引导程序JavaScripts ...

    bundles.Add(new ScriptBundle("~/bundles/Bootstrap").Include("~/Scripts/bootstrap/js/bootstrap-*"));

包括所有发运的bootstrap - *.js文件和TADAA一切正常.编译CSS,包括正确加载的所有导入的JavaScript文件.

但是......所有这些只适用于开发模式

    <compilation debug="true" targetFramework="4.5"/>

一旦我禁用调试以查看捆绑到一个文件和缩小是否正常工作我遇到问题.

捆绑过程似乎无法导入导入bootstrap.less的所有无.文件

/* Minification failed. Returning unminified contents.
(11,1): run-time error CSS1019: Unexpected token, found '/'
(11,2): run-time error CSS1019: Unexpected token, found '/'
(12,1): run-time error CSS1031: Expected selector, found '@import'
(12,1): run-time error CSS1025: Expected comma or open brace, …

我在包含@imports的文件上使用cssmin.cssmin以递归方式正确导入本地文件,但对于指向URL的导入,导入将保留为内联.这会使得缩小的CSS无效,因为@ rules必须位于文件的开头.有谁知道这个问题的一个好的解决方案或解决方法？

我正在开发一个示例应用程序,它使用bower进行依赖关系管理,并为它的构建系统吞咽.

我已经使用main-bower-files插件将目录中的所有相关文件复制bower_components到一个build/dist/bower_components目录中.

这一切都很完美,我可以打开我的应用程序index.html,它正确指向每个文件,并正确指向资产.

我的下一步是连接,bower_components以便我有一个CSS和一个JS文件以及所有资产(字体,图像等).我已经使用gulp-useref来捆绑所有组件,它似乎很好用.

但是,组合的一些CSS和JS文件使用相对路径来引用现在不正确的资产,因为所有内容都在一个文件中:

• FontAwesome
• 引导
• 以及我们正在创建的自定义凉亭组件

是否有固定资产的标准解决方案？

我是否需要使用gulp来更新资产引用或者使用不同的插件？

在我的网络应用程序中,我使用RequireJS按需异步加载我的javascript文件.这对dev很有用 - 在调试我的应用程序时,我可以看到哪个脚本依赖于它们的加载顺序.这简化了调试.

后来我切换到Webpack,因为它更容易配置,更容易维护.所以Webpack现在为我生成包含我的javascript代码的很好的包.这非常有效,但我想要的是模仿我之前的DevJS配置.

当我开发我的应用程序时,我希望Webpack生成一些简单的入口点(就像在RequireJS中一样),它将通过"require"引用逐个加载我的javascript文件.同时,当我将应用程序部署到服务器时,我仍然希望Webpack执行正常的捆绑.

这有可能实现吗？

我在ASP.NET Core 2.0 MVC中执行Bundling和Minification,但是当它不应该发生缩小时我遇到了一个问题.在我的页面中,我有以下脚本标记:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous"
        asp-fallback-test="window.jQuery"
        asp-fallback-src="~/js/jquery.min.js">
</script>

在我的bundleconfig.json中,我有以下部分:

{
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
        "node_modules/jquery/dist/jquery.min.js"
    ],
    "minify": {
        "enabled": false
    }
}

问题是〜/ js/jquery.min.js文件在通过此捆绑/缩小过程转换时丢失其尾随换行符,这使得文件的预期散列不再匹配.作为一种解决方法,我可以为完整性值指定2个哈希,以支持包含或不包含换行符的文件,如下所示:

integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT sha384-I7/UTpkJas2maMjJpGmrvEgQecqO8Dta/9Wwh+cQrH6Jj984WRRFhWg4MV/oTkIW"

但这不仅仅是确保缩小不会触及此文件.如何阻止这条新线被修剪？

我正在尝试按照微软的建议使用https://github.com/ligershark/WebOptimizer来捆绑和最小化我的 js 文件，因此按照说明进行操作，我的startup.cs 中有以下内容：

app.UseWebOptimizer();
app.UseStaticFiles();

在我的服务配置（startup.cs）中：

services.AddWebOptimizer(pipeline =>
{
    pipeline.AddJavaScriptBundle("/js/site.js",     // I have tried using MinifyJsFiles (without the use content root) instead of AddJavaScriptBundle
        "/lib/jquery-ui-1.13.1.custom/jquery-ui.js",
        "/js/auto-complete.js")
      .UseContentRoot();

    pipeline.MinifyJsFiles(); // I have tried with and without this line
});

在我的 _layout 中：

<script src="~/js/site.js"></script>

但每当我浏览该页面时，当它尝试加载 site.js 时，我都会在网络选项卡中收到 404 错误

我是否错过了什么？所有文件都位于网站 wwwroot 文件夹中的正确位置