为什么MVC4 @ Styles.Render()在调试模式下的行为不正常

时间:2012-06-25 13:31:44

标签: asp.net-mvc-4 bundling-and-minification asp.net-optimization

我正在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 = context.HttpContext.Server.MapPath("~/Content/less" + "/imports" + "/");
    }
}

public class TwitterBootstrapLessMinifyBundleFileReader : IFileReader
{
    public IPathResolver PathResolver { get; set; }
    private string basePath;

    public TwitterBootstrapLessMinifyBundleFileReader(): this(new RelativePathResolver())
    {
    }

    public TwitterBootstrapLessMinifyBundleFileReader(IPathResolver pathResolver)
    {
        PathResolver = pathResolver;
        basePath = TwitterBootstrapLessTransform.BundlePath;
    }

    public bool DoesFileExist(string fileName)
    {
        fileName = PathResolver.GetFullPath(basePath + fileName);

        return File.Exists(fileName);
    }

    public byte[] GetBinaryFileContents(string fileName)
    {
        throw new System.NotImplementedException();
    }

    public string GetFileContents(string fileName)
    {
        fileName = PathResolver.GetFullPath(basePath + fileName);

        return File.ReadAllText(fileName);
    }
}

在我的基础_Layout.cshtml页面上,我尝试通过执行此操作来呈现css文件

@Styles.Render("~/bundles/bootstrap");

mvc tutorial建议,但客户端浏览器最终请求的文件是

http://localhost:53729/Content/less/bootstrap.less

会导致错误。如果我将以下链接放入基本布局页面,它将按预期工作。

<link href="~/bundles/bootstrap" rel="stylesheet" type="text/css" />

为什么@ Styles.Render()在调试模式下的行为方式不一样?它在发布模式下工作。我可以理解你不希望它在调试中捆绑和缩小,但是我怎样才能强制这个捆绑包以同样的方式工作呢?

3 个答案:

答案 0 :(得分:31)

所以基本上当debug="true"时,脚本/样式渲染方法假定优化已关闭,这意味着没有捆绑和没有缩小,这意味着它不会调用您的变换;相反,它只会渲染出束的原始内容的链接(在你的情况下是boostrap.less)。

您可以覆盖此行为,并始终通过设置BundleTable.EnableOptimizations = true来运行优化。这将强制渲染方法始终进行捆绑/缩小。

答案 1 :(得分:10)

我最终做的是在我的_Layout.cshtml中放置一个调试if语句,这样无论如何都会渲染bundle。作为一种解决方案,我并不为此感到疯狂,但它现在正在发挥作用。

@if (Context.IsDebuggingEnabled)
{
    <link href="~/bundles/bootstrap" rel="stylesheet" type="text/css" />
}
else
{
    @Styles.Render("~/bundles/bootstrap")
}

答案 2 :(得分:4)

我通过让dotless服务.less文件来解决这个问题

web.config中的

   <handlers>
    <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
    </handlers>