使用这些说明手动将ASP.NET MVC项目升级到MVC4后,如何在MVC4中设置ASP.NET Web优化框架的新CSS和JavaScript资产捆绑和最小化功能？默认模板已全部设置,但您如何手动完成？

我正在尝试使用MVC4的新"捆绑和缩小".

对于IE条件注释,我仍然采用旧方法:<!--[if lt IE 9]><link href=.../><![endif]-->或者<!--[if lt IE 9]>@Styles.Render("~/foo")<![endif]-->我似乎没有得到自动调试/释放处理.

有没有内置的方法来做到这一点？其他人如何做到这一点？

编辑:
能够<noscript>在渲染输出中包含标签(用于回退)也很棒.

使用最新版本的MVC4,当它包含保留字作为键名时,我无法缩小javascript!

请参阅下面的错误,其中包含应该缩小的有效javascript.

有谁知道如何修复这个短的重写javascript使用[""]表示法？

PS有问题的代码是几千行,所以它不是一个选项!

/* Minification failed. Returning unminified contents.
(3,9-15): run-time warning JS1010: Expected identifier: delete
(4,9-13): run-time warning JS1010: Expected identifier: case
(5,9-11): run-time warning JS1010: Expected identifier: if
(3,9-15): run-time error JS1137: 'delete' is a new reserved word and should not be used as an identifier: delete
(4,9-13): run-time error JS1137: 'case' is a new reserved word and should not be used as an identifier: case
(5,9-11): run-time error JS1137: 'if' is a new reserved word and …

我正在尝试使用此博客中描述的技术将嵌入式DLL资源添加到我的捆绑包中.

我在VirtualPathProvider下面创建了自定义.

public class EmbeddedVirtualPathProvider : VirtualPathProvider {

    private Type _rootType;

    public EmbeddedVirtualPathProvider(Type rootType) {
        _rootType = rootType;
    }

    public override bool FileExists(string virtualPath) {
        if (IsEmbeddedPath(virtualPath))
            return true;
        else
            return Previous.FileExists(virtualPath);
    }

    public override CacheDependency GetCacheDependency(string virtualPath, IEnumerable virtualPathDependencies, DateTime utcStart) {
        if (IsEmbeddedPath(virtualPath)) {
            return null;
        }
        else {
            return Previous.GetCacheDependency(virtualPath, virtualPathDependencies, utcStart);
        }
    }

    public override VirtualDirectory GetDirectory(string virtualDir) {
        return Previous.GetDirectory(virtualDir);
    }

    public override bool DirectoryExists(string virtualDir) {
        return Previous.DirectoryExists(virtualDir);
    }

    public …

我想要一些关于ASP.NET MVC Bundling和Minification的专家建议.我的项目脚本文件中包含未经编译的(.js)和缩小版本(.min.js).我已将它们包含在我的脚本包中,如下所示:

bundles.Add(new ScriptBundle("~/bundles/layout").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/lib/errorhandling.js",
                    "~/Scripts/lib/errorhandling.min.js",
                    "~/Scripts/vendor/modernizr.custom.js",
                    "~/Scripts/vendor/modernizr.custom.min.js",
                    "~/Scripts/toastr.js",
                    "~/Scripts/toastr.min.js"));

似乎捆绑包确实只包含一次每个脚本文件,而不是两次.我已经确认了这一点,无论是开发还是生产.(作为旁注,在开发中,也就是说,当debug = true时,不会渲染包,但是文件作为单独的脚本标记包含在内.这也是我想要的行为.)

我的问题是:

(1)这是最好的和推荐的方法,包括用于生产设置的已缩小文件和用于开发的未分类文件？

(2)ASP.NET是否试图在生产中缩小整个捆绑包(即使它已经缩小)？如果是,阻止ASP.NET尝试缩小捆绑包的最佳方法是什么？

提前致谢!

在捆绑和缩小中,我已经知道捆绑器将移动某些已知的文件类型 - 因此像jQuery这样的东西将被移到前面.

默认情况下,当ASP.NET捆绑文件时,它们首先按字母顺序排序,就像它们在解决方案资源管理器中显示一样.然后它们会自动移动,以便在其他任何内容之前加载已知的库及其自定义扩展(如jQuery,MooTools和Dojo). -资源

但在阅读了最近的这个问题之后:ASP.NET MVC - Bundle Config命令,它显示了即使用户指定了加载顺序,文件如何被捆绑器移动,我意识到我不知道这些已知文件类型是什么,或者他们将被列入的订单.

我从来没有见过一个解释这个的清单,在搜索中,我什么也没想到.

是否有一个列表显示已知文件类型是什么以及它们将被呈现的顺序？我认为这是ASP.NET团队应该为开发人员提供资源的东西.

背景:我在迁移的ASP.NET MVC 5应用程序(在开发Windows 8.1, VS2013社区.NET 4.5.1,MySql自定义成员资格和角色提供)项目Monodevelop(在Ubuntu 14.4,Monodevelop,Mono).

在我的~/App_Start/BundleConfig班上

public static void RegisterBundles(BundleCollection bundles)
    {
        BundleTable.EnableOptimizations = true;

     bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));
    }

在我~/Views/Shared/_Layout.cshtml看来

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

在我的 Web.Config

<add namespace="System.Web.Optimization" />

也

<compilation defaultLanguage="C#" debug="false"> </compilation>

也Microsoft.Web.Infrastructure.dll从bin目录中删除.

问题:当我在浏览器中查看源代码时,我没有看到正在渲染包:

链接指向目录,它应该显示目录中的文件

<link href="/Content/css" rel="stylesheet"/>
<script src="/bundles/modernizr"></script>

这个捆绑在Windows上运行得非常好,但在Ubuntu上,我只看到目录

我在这做错了什么？

最近我一直在玩react.js,我喜欢我可以开发工作UI组件的速度.我现在已经创建了很多组件,我想在不同的.jsx文件中分发一些组件.

我读过的每件事都说我每次搬到生产时都应该使用像browserify或webpacker这样的捆绑器.但是我反对这个想法.我喜欢在javascript中开发的部分原因是因为它是一种脚本语言而且没有编译器可以解决这个问题.如果我想搞乱构建链等,我可能只是在c中进行开发工作.

我主要制作工程工具.这涉及制作工具,然后让其他工程师和操作员使用.我可能不会在一两年后再看一个工具.我希望当我确实需要再次查看它或者跟在我后面的人需要查看它时,他们可以直接进入源代码并开始进行更改.我不想记得我的构建环境是如何在2016年建立的.

对于我的特定应用程序,我也不关心加载速度或客户端资源.没有人使用手机中的工具,很少重新加载工具.

因此,除非你能说服我确实想要捆绑,否则将单个页面Web应用程序与react.js组件分成多个.jsx文件放在一起的最简洁方法是什么？

更新/改进的问题/部分答案:

我从没有NPM的快速入门示例开始.这是我想要实现的一个简单示例:

index.html的:

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel" src="hello1.jsx"></script>
        <script type="text/babel" src="hello2.jsx"></script>
        <script type="text/babel">
            ReactDOM.render(
                <div>
                    <Hello name='Bruce'/>
                    <Hello2 name='Bruce'/>
                </div>,
                document.getElementById('example')
            );
        </script>
    </body>
</html>

hello1.jsx:

var Hello1 = React.createClass({
    render: function() {
        var name = this.props.name;
        var message = 'Hello ' + name;
        return <h1>{message}</h1>;
    }
});

window.Hello1 = Hello1;

hello2.jsx:

var Hello2 = React.createClass({ …

我觉得现在有点卡住了.首先我用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, …

我正在尝试按照微软的建议使用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 文件夹中的正确位置