标签: bundling-and-minification

ASP.Net MVC4 + Bootstrap(LESS)+ dotLess.

目标是将Bootstrap .less文件转换为单个捆绑包.css,并且我遇到了showstopper问题.

Bundle.config

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

只有bootstrap的文件较少,不应该有任何红旗语法问题.

下一步是构建该变换器类LessTransform以生成css.

变换器类实现了Process()内部存在的问题代码......这里是两个场景及其问题:

场景1:静态 Less.Parse()

var parsedLess = Less.Parse(bundle.Content);
bundle.Content = parsedLess;

// Throws a FileNotFoundException
// "You are importing a file ending in .less that cannot be found."
// reset.less and it definitely exists in that folder. 

场景2:LessEngine.TransformToCss()

var content = new StringBuilder();
var engine = new LessEngine();

foreach (var file in bundle.Files)
{ …

我在一个多页面项目中使用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 …

生成的捆绑文件放在哪里？

 bundles.Add(new ScriptBundle("~/bundles/jqueryall")
   .IncludeDirectory("~/scripts/", "*.js", true)

我在服务器场中使用捆绑和缩小,其中存在旧服务器和新服务器的交叉时段.

我遇到的问题是旧服务器正在缓存新的bundle cache buster URL的内容.

例如,使用新的捆绑包URL 缓存新的 HTML :

<script src="/bundle.css?v=RBgbF6A6cUEuJSPaiaHhywGqT7eH1aP8JvAYFgKh"></script>

然后,它向旧服务器发出请求,该服务器尚未使用新的CSS代码进行更新,然后缓存.

然后,对新捆绑URL的任何后续调用都将返回旧代码.

因此有没有办法检查捆绑包的内容是否与散列缓存破坏者匹配？如果它不抛出404例如.

使用上面的示例,当请求返回到旧服务器的捆绑包时,它将检查捆绑包的内容,生成内容哈希并将其与查询字符串进行比较.

在这种情况下,缓存 - 破坏者将不匹配实际内容散列,并且将返回404.

最终,用户将使用捆绑请求命中新服务器,并且将缓存正确的内容.

我想定义一个这样的包:

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

如果捆绑包名称只是"~/style"这样,但是文件扩展名它总是返回404.我怀疑服务器在驱动器上搜索CSS和JS文件并忽略捆绑系统,但是我找不到其他人正在尝试在包名称中包含文件扩展名.这可能没有像URL重写这样的东西吗？

我目前正在使用Visual Studio Web Essentials来捆绑和缩小我的CSS和JavaScript文件.

目前,我手动创建一个版本号的包(如mybundle-1.0.0.css时被推到生产,以避免缓存问题).每次对源进行更改时,我还必须手动更改软件包文件版本号.

Web Essentials捆绑中是否存在我可能忽略的任何类型的自动版本控制功能？

理想的工作流程是:

1. 开发人员更新源文件.
2. Web essentials自动更新包.
3. Web essentials会自动增加文件名中的版本号.

这可能吗？

如果没有,我很乐意听到有关更好的开发人员工作流程的任何建议.

我正在开发一个ASP.Net MVC 4应用程序,并使用Bundling和minifiction来呈现样式和脚本文件.

我有一个脚本文件(文件A),在另一个文件(文件B)中调用函数,当我使用
@Scripts.Render()方法时,它在文件B之前link为文件A呈现标记,因此它触发错误并且脚本无法正常工作.

有没有办法强制@Script.Render()以link某种顺序呈现标签而不为每个文件使用单独的包？

编辑

我正在使用IncludeDirectory方法将所有脚本文件包含在该文件夹中

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(
                    "~/Scripts/js",
                    "*.js"));
    }
}

当我在发布模式下运行我的ASP.NET MVC 4应用程序时,捆绑包仍在输出未分隔和单独的js文件,而不是将其捆绑并缩小为更少的捆绑JavaScript文件.

有任何想法吗？

仅供参考,发布配置:

<?xml version="1.0"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <system.web>
    <compilation xdt:Transform="RemoveAttributes(debug)" />
  </system.web>
</configuration>

我有一个使用angularjs的应用程序,并在BundleConfig.cs文件中将优化设置为false时正常工作.

但是当我将优化设置为true时,我的角度表达式工作意味着角度正在加载,但我的服务和控制器没有wotk,其他jquery/javscript工作正常.

你知道这里发生了什么吗？下面是我的一些代码

BundleConfig.cs

using System.Configuration;
using System.Web;
using System.Web.Optimization;

namespace HRMS
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/angular")
                .Include("~/Scripts/common/angular.js"
            ));
            bundles.Add(new ScriptBundle("~/bundles/app")
                .Include("~/Scripts/angular/app.js"
            ));
            bundles.Add(new ScriptBundle("~/bundles/common")
                .Include("~/Scripts/common/common.js"));

            bundles.Add(new ScriptBundle("~/bundles/services")
                .IncludeDirectory("~/Scripts/angular/services", "*.js"));

            bundles.Add(new ScriptBundle("~/bundles/controller")
                .IncludeDirectory("~/Scripts/angular/controller", "*.js"));


            bundles.Add(new ScriptBundle("~/bundles/jquery")
                .Include("~/Scripts/common/jquery-{version}.js"
                        , "~/Scripts/common/jquery-ui.js"));









            bundles.Add(new ScriptBundle("~/bundles/metis").Include(
                        "~/Scripts/common/plugins/metisMenu/metisMenu.min.js",
                        "~/Scripts/common/sb-admin-2.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use …

看起来Bundling和Minification不再内置到MVC 6中,因为没有更多App_Start和Bundle.Config.

最终发布后会出现这种情况吗？

我猜测应该使用Grunt,因为这似乎已经融入到Visual Studio 2015中.

更新:看起来微软已经转而使用Gulp而不是RC1中的Grunt.