标签: bundling-and-minification

我有一个asp.net MVC4 Web应用程序,它使用样式捆绑主题.我有一个像这样的物理主题文件夹结构......

 Themes\
     _Base\
     Theme1\
     Theme2\
     ...\

每个主题文件夹中都包含任意数量的LESS文件.在我的BundleConfig.RegisterBundles方法中,我有一些逻辑循环每个主题文件夹并为每个创建一个包.System.Web.Optimization的捆绑机制将监视现有捆绑包中的文件和文件夹中的更改并刷新捆绑缓存,这样可以正常工作.

但是,我需要的是将新主题文件夹(即Theme3\)复制到我的Themes根文件夹中的方法,以及应用程序在不必先重新启动它的情况下识别它们.我试过创建一个引用每个文件夹中所有文件的"虚拟"包...

var changeTracking = new StyleBundle(BUNDLE_ROOT);
changeTracking.Transforms.Clear();
changeTracking.IncludeDirectory(THEME_ROOT, "*.less", true);
changeTracking.Transforms.Add(new LessTransform());
changeTracking.Transforms.Add(new CssMinify());
bundles.Add(changeTracking);

......但这似乎没有帮助.当我做的时候Theme3\,它不会触发另一次调用BundleConfig.RegisterBundles.我仍然需要执行IISRESET,回收应用程序池等,以便识别新主题.

有没有什么办法可以在Application_Start发生后动态添加包？

是否可以捆绑一组脚本而不缩小它们？我只想结合几个第三方脚本文件,我从不需要非缩小版本.其中一些人警告不要再进一步缩小.

我将MVC 4项目升级到MVC 5,作为升级到VS2013的一部分,我在Bundles和Minification中遇到了一个奇怪的行为.然后我尝试了一个新的MVC 5项目,也有同样的问题.这就是我正在做的事情:

从新的MVC 5项目开始,添加以下文件

app\0.js
app\a
app\a\b
app\a\c
app\a\b\1.js
app\a\c\6.js
app\a\c\d
app\a\c\e
app\a\c\d\2.js
app\a\c\d\3.js
app\a\c\d\4.js
app\a\c\e\5.js

然后在我的BundleConfig中添加

bundles.Add(new ScriptBundle("~/bundles/app")
    .IncludeDirectory("~/app", "*.js", true));

在我看来:

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

现在,当我浏览到Bundling和Minification Off的页面时,这就是渲染的内容:

<script src="/app/0.js"></script>
<script src="/app/1.js"></script>
<script src="/app/6.js"></script>
<script src="/app/2.js"></script>
<script src="/app/3.js"></script>
<script src="/app/4.js"></script>
<script src="/app/5.js"></script>

请注意,所有文件都在/app,并且子目录在此过程中丢失.

我已经在MVC 4项目中使用了很长时间没有任何问题.

Microsoft.AspNet.Web.Optimization包是1.1.1.

有没有人经历过这个？

在使用此媒体查询后,我正在使用ASP.NET MVC 4版本和Microsoft.AspNet.Web.Optimization'1.1.2':

@media (min-width: 1025px) and (max-width: 1599px) {
    #circles_inner {
        width: 1080px;
        margin: auto;
    }
}

我得到这个CSS:

@media(min-width:1025px)and (max-width:1599px){#circles_inner{width:1080px;margin:auto}}

之前省略了空间

和

标记,mac上的新chrome版本不理解它.

这实际上是Google Chrome的可行更新.它只是对媒体查询的语法更加严格.MVC项目的解决方案可以在这里找到:http://i-skool.co.uk/net/mvc/mvc-bundling-and-minifcation-issues-with-google-chrome/

我在项目中有AngularJS和Bootstrap的Angular指令,这两个指令都是通过Nuget添加的.

当编译debug ="true"时,一切正常,但是一旦我将编译调试更改为false,Angular就会停止工作,我在Chrome的控制台中收到以下错误:

Error: [$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=nProvider%20%3C-%20n
at Error (native)
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:448
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14726
at Object.i [as get] (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:13802)
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14801
at i (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:13802)
at r (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14014)
at Object.instantiate (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14185)
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:30669
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:23558 angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1
(anonymous function) angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1

我所有的其他Javascript/CSS都按预期工作.什么可能导致Angular一旦缩小就停止工作？这是一个已知的问题？

谢谢

我最近在一个网站上遇到了一个问题,网页上的样式确实搞砸了,但只在IE中.我的老板告诉我这可能是因为正在渲染的CSS Bundle包含来自不同目录的CSS文件,所以我检查了它.它类似于以下内容:

    bundles.Add(new StyleBundle("~/path/subpath/all").Include(
                 "~/path/subpath/filename.css",
                 "~/path/subpath/filename1.css",
                 "~/path/subpath/filename2.css",
                 "~/path/subpath/filename3.css",
                 "~/path/subpath/anotherSubPath/filename.css",
                 "~/path/subpath/anotherSubPath/filename1.css",
                 "~/path/aDifferentSubPath/filename.css"));

他说Bundling无法像这样工作,你必须只有Bundle中相同目录的文件,所以我把它们拆分成如下所示:

bundles.Add(new StyleBundle("~/path/subpath/all").Include(
             "~/path/subpath/filename.css",
             "~/path/subpath/filename1.css",
             "~/path/subpath/filename2.css",
             "~/path/subpath/filename3.css"));

bundles.Add(new StyleBundle("~/path/subpath/anotherSubPath/all").Include(
             "~/path/subpath/anotherSubPath/filename.css",
             "~/path/subpath/anotherSubPath/filename1.css"));

bundles.Add(new StyleBundle("~/path/aDifferentSubPath/all").Include(
             "~/path/aDifferentSubPath/filename.css"));

这在IE中解决了我们的问题.好的,现在我的问题:

• 我的老板是对的吗？你能不捆绑不同文件夹中的文件？
• 如果他是正确的,为什么这只会在IE中打破？为什么你必须只从同一目录捆绑文件？
• 如果他不正确可能是什么问题？为什么拆分捆绑已修好了？

对于应用程序，我们需要使类名保持最小，因为我们使用

var className = myObject.constructor.name;
export class myObject{ ... }

当我们跑步

ng build-专业

类名会以随机名称最小化。

我需要将我的 Angular 应用程序构建为具有内联脚本和样式的单个 HTML 文件。默认情况下，Angular 会构建几个 js 文件和一个 css 文件，并通过 src 属性将它们添加到我的 index.html 中。

我发现了一个名为的插件html-webpack-inline-source-plugin，但它没有做任何事情。（可能是因为角度？）

有谁知道使用 webpack 将角度应用程序构建到单个文件中的另一种方法，或者是否有另一个包可以这样做？我已经做了一些研究，但没有找到解决方案。

先感谢您！

编辑：

我尝试使用以下自定义 webpack 配置，但它不会更改输出。

自定义-webpack.config.js

var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            inlineSource: '.(js|css)$'
        }),
        new HtmlWebpackInlineSourcePlugin()
    ]
}

我添加bundleconfig.json到 ASP.NET Core 应用程序。它具有以下结构：

[
  {
    "outputFileName": "wwwroot/js/main.min.js",
    "inputFiles": [
      "wwwroot/js/scripts/first.js",
      "wwwroot/js/scripts/second.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

两个脚本都已缩小并合并到main.min.js. 但是在缩小之后，所有的async修饰符都从结果脚本中删除了。

功能如

async function foo() {
  await /* some promise */;
}

已经变成：

function foo() {await /*some promise*/;}

如何避免删除async修饰符？

我正在尝试构建微前端生态系统。有许多团队开发不同的组件，使应用程序在单页中作为单页应用程序一起工作。所有组件都应该独立构建和部署，并且应该在单个 HTML 页面中引用，以便通过在运行时解析来开始协同工作。例如，在生产中，我们应该在 html 页面中有以下脚本文件：

<script src="http://deploy-server/external/vendor1.js" />
<script src="http://deploy-server/external/vendor2.js" />
<script src="http://deploy-server/external/vendor3.js" />
<script src="http://deploy-server/internal/comp1.js" />
<script src="http://deploy-server/internal/comp2.js" />
<script src="http://deploy-server/internal/comp3.js" />

现在，下面将是包的详细信息：

vendor1 -> Reactjs, react-dom, react-router (most used lib for making react eco-system, Used by all internal component scripts)
vendor2.js -> react-datepicker, lodash, (libraires used by comp2.js)
vendor3.js -> Used by comp3.js

comp1.js,comp2.js,comp3.js -> 使用 vendor1.js 并且将来可能正在使用或可能开始使用 vendor2 和 vendor3 js 模块。

如何分别捆绑外部供应商文件和内部库，同时希望使用它们在不同团队之间共享以进行开发。假设我已经捆绑了 vendor1.js，它应该如何用于开发和构建 comp3、comp4、....？

我尝试使用“共享”构建 vendor1.js，但是当使用 comp2.js 引用它时，出现运行时错误。

编辑：添加代码我尝试共享供应商文件不同的团队，我在 app1 中创建了供应商文件，具有以下 webpack.config.js

   entry: {
      home: { …