标签: bundling-and-minification

所以MVC 4引入了脚本和样式捆绑.这允许:

public static void RegisterBundles(BundleCollection bundles)
    {
    bundles.Add(new ScriptBundle("~/bundles/mobile").Include(
                    "~/Scripts/jquery.mobile-*"));

然后在这样的剃刀视图中使用:

@Scripts.Render("~/bundles/mobile")

我的问题是为什么我要输入"~/bundles/mobile"？是否有办法让intellisence有一个强类型对象来接收？否则我必须去查找以确保我称之为同样的事情.

我想做这样的事情:(我知道这不会以这种方式编译,这只是一个例子)

public static void RegisterBundles(BundleCollection bundles)
    {
    Bundle mobile = new Bundle("mobile");
    mobile.AddFile("w/e")
    bundles.Add(mobile);

//in page:
 @Scripts.Render(BundleConfig.mobile)

或那些影响的东西.

编辑:答案很简单.正如@Hao Kung指出的@Styles.Render只是需要一个URL字符串路径.我创建了一个类来保存.

public class bundles
{
    #region Javascript
    public static string scripts = "~/bundles/scripts";
    ...
    #endregion

    #region CSS

    public static string css = "~/Content/css";
    public static string jqueryUi = "~/Content/themes/base/css";
    ...
    #endregion
}

在任何页面,你只需要做

@Styles.Render(bundles.jqueryUi)

你有它.你需要付出额外的努力,但至少它现在是强力打字的.

我使用Visual Studio 2012和内置模板(在Add - > New Project下)创建一个全新的ASP.NET Web Forms Web应用程序项目.在默认情况下提供的Site.Master页面中,我看到了一些针对JQuery的标记,它包含在下面.

考虑到以下标记,ASP.NET如何确定包含JQuery所需的路径？

<asp:ScriptManager runat="server">
    <Scripts>
        <%--Framework Scripts--%>
        <asp:ScriptReference Name="MsAjaxBundle" />
        <asp:ScriptReference Name="jquery" />
        <asp:ScriptReference Name="jquery.ui.combined" />
        <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
        <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
        <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
        <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
        <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
        <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
        <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
        <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
        <asp:ScriptReference Name="WebFormsBundle" />
        <%--Site Scripts--%>
    </Scripts>
</asp:ScriptManager>

我没有看到任何配置文件或代码将jquery解析为"〜/ Scripts/jquery-1.7.1.js".我看到一个packages.config文件,但它没有明确描述必须以某种方式计算的路径.

有谁知道如何在运行时解决JQuery的javascript文件的路径？

我觉得捆绑应该被用来将你一起使用的一堆文件分组到浏览器中.这意味着例如我的root风格,我想做类似以下的事情:

var bundle = new StyleBundle("~/Content/style").Include(
    "~/Content/mystyle.less",
    "~/Content/bootstrap.css",
    "~/Content/bootstrap-responsive.css");
bundle.Transforms.Add(new LessTransform());
bundle.Transforms.Add(new CssMinify());
bundles.Add(bundle);    

但是,对于捆绑较少文件的自定义转换技术来说,这似乎并不能很好地工作,因为它看起来像将所有文件预先捆绑到单个css文件中,然后再将其传递给LessTransform.据我所知,只有将所有较少的文件捆绑在一起时,此方法才有效.

有没有办法让bundle在同一个bundle中允许less和css文件？

是否可以在ASP.NET MVC 4中配置Scripts.Render以在"script"标记中生成"type"属性？

如果是这样,怎么样？

提前致谢,

瑞安

当我在MVC 4中使用下面的Bundling时,我的应用程序会出现几个JavaScript错误,例如'jQuery undefined'

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

但是,当我使用以下方法时,我的应用程序无需JavaScript错误:

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

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

        bundles.Add(new ScriptBundle("~/bundles/jquery3").Include(
                    "~/Scripts/jquery.unobtrusive*"));

        bundles.Add(new ScriptBundle("~/bundles/jquery3").Include(
                    "~/Scripts/jquery.validate*"));

我的问题:问题是什么？

我正在使用ASP.NET Bundling机制:

            BundleTable.Bundles.Add(new ScriptBundle("~/Scripts/Master-js").Include(
                        "~/Scripts/respond.min.js",
                        "~/Scripts/jquery.form.js",
                       "~/Scripts/jquery.MetaData.js",
                        "~/Scripts/jquery.validate.js",
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/jquery.viewport.js",
                        "~/Scripts/jquery.cookie.js"
                     ));

如果构建在发布中,我希望这发生.如果构建是在调试中,我希望加载未缩小的单个文件,以便调试很容易.

我能够做到这一点的唯一方法是在我的视图中写下以下内容:

    <%  if(HttpContext.Current.IsDebuggingEnabled)
        {
            Response.Write("<script type='text/javascript' src='../../Scripts/respond.min.js'></script>");
            Response.Write("<script type='text/javascript' src='../../Scripts/jquery.form.js'></script>");
            Response.Write("<script type='text/javascript' src='../../Scripts/jquery.MetaData.js'></script>");
            Response.Write("<script type='text/javascript' src='../../Scripts/jquery.validate.js'></script>");
            Response.Write("<script type='text/javascript' src='../../Scripts/bootstrap.js'></script>");
            Response.Write("<script type='text/javascript' src='../../Scripts/jquery.viewport.js'></script>");
            Response.Write("<script type='text/javascript' src='../../Scripts/jquery.cookie.js'></script>");
        }
        else
        {
            Scripts.Render("~/Scripts/Master-js");
        }
%> 

如你所见,我在这里重复一遍.有没有更好的办法？

System.Web.Optimization.Bundle与WebEssentials Visual Studio插件中的捆绑操作有什么区别？
我的意思不仅是最终的结果应该是相同的,而且也是内部的,尤其是内部的.调试和发布模式中的差异(如果有).
最后,我获得了什么以及我选择哪一个？

我们使用功能标记(在Web.Config中设置)来切换UI中某些尚未完成的功能的可见性.我还希望我的MVC包不包含相关的JS文件,因为它们只是在没有启用该功能时客户端必须下载的无用文件.

到目前为止,我已经找到了,IgnoreList.Ignore但我似乎无法让它工作.这基本上就是我在做的事情:

public static void RegisterBundles(BundleCollection bundles)
{
    if (!appConfiguration.FeatureXEnabled)
    {
        //Skip these files if the Feature X is not enabled!
        //When this flag is removed, these lines can be deleted and the files will be included like normal
        bundles.IgnoreList.Ignore("~/App/Organization/SomeCtrl.js", OptimizationMode.Always);
        bundles.IgnoreList.Ignore("~/App/Filters/SomeFilter.js", OptimizationMode.Always);
    }

    var globalBundle = new ScriptBundle("~/bundles/app-global").Include(
        "~/App/RootCtrl.js",
        "~/App/Directives/*.js",
        "~/App/Services/*.js",
        "~/App/Application.js"
    );
    bundles.Add(globalBundle);

    var appOrgBundle = new ScriptBundle("~/bundles/app-org");
    appOrgBundle.Include(
        "~/App/Filters/*.js",
        "~/App/Organization/*.js"
    );

    bundles.Add(appOrgBundle);
}

使用上面的代码,仍然包含忽略列表中的文件!我在这做错了什么？

BundleTransformer中是否有支持EcmaScript 6的JS minifiers？我试过安装:

• BundleTransformer.Closure
• BundleTransformer.YUI
• BundleTransformer.UglifyJs

但似乎都没有处理ES6的字符串模板语法,例如:

`Hello ${world}`

我错过了什么,或者是时候升级到Node + X了吗？

我正在尝试创建一个组件库，例如Wie Rollup和Vue，当其他人将其导入时，它们可以被树摇晃。我的设置如下：

相关摘录 package.json

{
  "name": "red-components-with-rollup",
  "version": "1.0.0",
  "sideEffects": false,
  "main": "dist/lib.cjs.js",
  "module": "dist/lib.esm.js",
  "browser": "dist/lib.umd.js",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w"
  },
  "devDependencies": {
    /* ... */
}

这是我的全部 rollup.config.js

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import vue from "rollup-plugin-vue";
import pkg from "./package.json";

export default {
  input: "lib/index.js",
  output: [
    {
      file: pkg.browser,
      format: "umd",
      name: "red-components"
    },
    { file: pkg.main, format: "cjs" },
    { file: pkg.module, format: "es" }
  ],
  plugins: …