Visual Studio 2015 上的 Javascript 捆绑答案

【问题标题】：Javascript Bundling on visual studio 2015Visual Studio 2015 上的 Javascript 捆绑
【发布时间】：2015-02-24 04:37:39
【问题描述】：

System.Web.Optimization 在 Visual Studio 2013 上为我们提供了对 javascript 文件的捆绑，其中最好的部分是允许我们使用单个文件或根据需要捆绑它们。它使调试成为一种乐趣现在在 Visual Studio 2015 上，我们有了 grunt 和 Task Runner，允许我捆绑和缩小，但在捆绑的 js 和原始文件之间切换只是痛苦

是否有人有在 VS 2015 上使用优化捆绑的解决方案

谢谢

【问题讨论】：

我建议看看早午餐。它更容易。你几乎可以做你以前做过的所有事情。工作流程略有不同，但您仍然可以获得所需的内容。关于 dev/prod 文件，当 taghelpers 被引入时，这将更加容易。

标签： asp.net-core visual-studio-2015

【解决方案1】：

[编辑] BundlerMinifier 扩展可以作为 Visual Studio 扩展进行捆绑和缩小，与 GULP、GRUNT 或我最喜欢的 WebPack 相比，它的功能有限，但如果你想要一个简单的解决方案 https://github.com/madskristensen/BundlerMinifier 就是一个

像 ecm_dev 这样的长话短说，旧式优化捆绑将不可用 这是正确的答案，但它并没有帮助我解决我的捆绑和缩小问题，并且在过去几个月它促使我找到实际存在的替代品微软正在推动我们使用的 Bower、Gulp、Grunt

我选择 Bower 作为包管理器 Bower 是客户端文件（css、js、less 等）上 nuget 的替代品和 Gulp 作为构建任务操作

gulp-bower帮你拉Bower包

main-bower-files 在正确的位置提取 Bower 文件

gulp-concat 捆绑您的 css 或 js 文件（任何文件）

gulp-uglify缩小你的js文件

gulp-less 编译你的less文件

gulp-cssmin 缩小你的 css 文件

gulp-inject 将您的 css 和 javascript 标签注入您的 .html 或 .cshtml

Gulp 实际上比 System.Web.Optimization + Web Essential 组合更强大，但还有很多东西要学这可能不是您正在寻找的答案（当我一个月前第一次问这个问题时，它肯定不是我的）

但是如果您正在寻找这个问题，那么您遇到的问题与我相同对于

在 VS 2015 上启用 gulp： http://tom.cabanski.com/2014/11/23/using-gulp-with-asp-net-vnext-and-visual-studio-2015-preview/

吞咽 101： http://ilikekillnerds.com/2014/07/how-to-basic-tasks-in-gulp-js/

我喜欢看视频：https://www.youtube.com/watch?v=dwSLFai8ovQ

还有另一篇博文：http://mmercan.com/blog/?p=271

【讨论】：

您如何处理开发与发布？也就是说，在 dev 中你不希望东西被捆绑和缩小，在 release 中你想要。
我用 gulp.inject 从单个模板创建了 2 个 HTML 文件，1 个注入所有 is 和 css 文件，没有捆绑用于开发和调试，第二个文件使用 uglified 和捆绑文件进行发布，我也这样做对发布版本进行授权测试，但不要过多调试
我的解决方案与这个非常相似，但我没有使用 gulp-bower 和 main-bower-files，而是使用 bower 和 bower-installer 包的默认安装程序作为 .bowerrc 中的安装后挂钩。

【解决方案2】：

旧样式的优化捆绑在 VS2015 中将无法用于 ASP.NET 5.0 应用程序：https://github.com/aspnet/Home/issues/134

【讨论】：

这个链接也提供了很好的信息aspnetmvc.readthedocs.org/projects/mvc/en/latest/migration/…

【解决方案3】：

在阅读了here 提供的文档和示例后，我立即遇到了同样的问题。在捆绑和缩小步骤之后，文档只是说“现在引用文件”。

我进行了大量研究，试图找到一种最佳实践，用于有条件地引用开发脚本和其他生产脚本。我最喜欢的选项是：

使用WireDep 或gulp-inject 替换占位符值查看具有动态定义的文件引用的模板。您可以根据环境选择要包含在 gulpfile 中的不同文件，并有条件地选择是否捆绑。这对本地文件非常有用，但如果您想使用 CDN，就不是那么好了。
使用环境标签助手有条件地定义文件引用。如果您想从 CDN 引用文件，此选项非常有用，并且您可以选择在本地文件进行开发和 CDN 文件进行生产之间切换。

WireDep 和 gulp-inject 的文档在各自的链接中提供。

要使用环境标签助手，请确保您的 _GlobalImport 视图文件中包含以下行。

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

然后像这样使用它：

<environment names="Development">
    <script src="~/js/script1.js"></script>
    <script src="~/js/script2.js"></script>
    <script src="~/lib/big-script-library.js"></script>
</environment>
<environment names="Staging,Production">
    <script src="~/js/bundle/script.min.js"></script>
    <script src="http://www.some-cdn-resource.com/big-script-library.min.js"></script>
</environment>

环境名称对应于 ASP.NET 5 环境变量 ASPNET_ENV。

【讨论】：

【解决方案4】：

在我向 Visual Studio 2015 抱怨了一整天移动我的奶酪之后，我冷静下来，就在寻找新方法的时候，我现在重新爱上 vs2015 :)

如果您已经配置了所有文件，请不要担心，不要删除您现有的配置，我们将使用它

为 2115 安装 Web Essentials
选择您要捆绑的文件，如果您已经配置了文件并且文件太多，请只选择一对我们可以稍后编辑配置
右键单击并选择“Bundle and Minifier” - “Bundle and Minify Files” (Shift-Alt-F)
将捆绑的文件保存在您喜欢的位置（可能与前一个名称不同，因此您不要覆盖它）
第一个区别是您不会看到 yourfile.js.bundle。相反，您的根文件夹中有一个新的 bundleconfig.json
如果您打开该文件，您现在可以看到您的所有捆绑软件只有一个配置文件
现在您可以从 XML 格式的 yourfile.bundle 复制现有配置，没关系
粘贴到新的 bundleconfig.json 并删除所有 <file> </file> 标签

就是这样...您的新配置现已设置完毕

您可以在此处获取有关新捆绑器的更多信息

https://visualstudiogallery.msdn.microsoft.com/9ec27da7-e24b-4d56-8064-fd7e88ac1c40

【讨论】：

此解决方案不再正确。 Bundler 和 Web Compiler 已从核心 Web Essentials 插件中分离出来，需要单独安装。

【解决方案5】：

在 Web Essentials 2015 之前，Bundler 和 Minifier 都包含在核心插件中。 Web Essentials 2015 不再是这种情况，并已分离到自己的插件中 (Plugin on Visal Studio Marketplace)

还要注意，转换到新插件后，您需要使用项目根目录中的 bundleconfig.json 文件来代替单独的 .bundle 配置文件。

【讨论】：