Bundler和Minifier Visual Studio扩展

原文地址：https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

特征

  • 将CSS，JavaScript或HTML文件捆绑到单个输出文件中
  • 保存源文件会自动触发重新捆绑
  • 支持globbing模式
  • MSBuild支持支持CI方案
  • 缩小单个或捆绑的CSS，JavaScript和HTML文件
  • 每种语言的缩小选项都是可自定义的
  • 打开生成的文件时显示水印
  • Task Runner Explorer集成
  • 命令行支持
  • 更新解决方案中所有捆绑包的快捷方式
  • 抑制输出文件生成
  • 转换为Gulp

关于编码的说明

没有BOM（字节顺序标记）的所有文件都被视为UTF-8。如果在输出包文件中看到奇怪的字符，则可能需要考虑将输入文件保存为UTF-8或允许您指定BOM的编码。

捆绑

在解决方案资源管理器中选择2个或更多相同类型的文件以创建捆绑包。

创建包

对源文件进行的任何编辑都将立即生成更新的捆绑文件输出。

捆绑包配置存储在一个名为的文件中，该文件bundleconfig.json将添加到项目的根目录中。

缩小

在解决方案资源管理器中右键单击任何JS，CSS或HTML文件。这将创建一个[filename] .min。[ext]并将其嵌套在原始文件下。

缩小文件

修改原始文件后，会立即生成新的min文件。

捆绑构建/ CI支持

在ASP.NET MVC和WebForms项目中，您可以在构建步骤中启用捆绑和缩小。只需右键单击该bundleconfig.json文件即可启用它。

捆绑构建

单击该菜单项将提示您有关单击“确定”按钮时将发生的情况的信息。

在构建提示上捆绑

NuGet包将安装到该packages文件夹中，而不会向项目本身添加任何文件。该NuGet包中包含一个MSBuild任务，该任务将bundleconfig.json在项目根目录中的文件上运行完全相同的编译器。

对于ASP.NET Core项目，请参阅wiki

更新所有捆绑包

您可以bundleconfig.json使用键盘快捷键Shift+Alt+i或使用顶级“生成”菜单上的按钮在解决方案中的所有文件上运行bundler 。

更新所有捆绑包

来源地图

目前仅支持JavaScript缩小源映射。

一个.map文件的下一次成功的.min.js文件自动，但如果你手动删除.map文件，新的人会不会在随后的minifications创建。

要启用源映射，请将此属性添加到bundleconfig.json文件中：

“ sourceMap ”：是的

任务运行资源管理器

快速浏览您指定的文件或直接在Task Runner Explorer中执行捆绑包。

任务运行资源管理器

您甚至可以设置绑定，以便在某些Visual Studio事件（例如BeforeBuild和Project Open）期间自动发生捆绑/缩小。

任务运行器绑定

抑制输出文件生成

有些情况下，您不希望扩展程序监听文件更改并生成捆绑和缩小的输出。如果您想使用Gulp bundleconfig.json或使用服务器端代码，那可能就是这样。在这些情况下，让bundleconfig.json文件包含所有Visual Studio工具仍然有用，但让其他工具处理捆绑和缩小过程。

要取消输出，请删除右键菜单中的复选框bundleconfig.json。

抑制输出

转换为Gulp

此功能使您可以根据已配置的内容轻松开始使用Gulp bundleconfig.json。它将创建gulpfile.js， package.js如果它们尚不存在，则使用npm安装所需的节点模块。

该gulpfile.js会消耗bundleconfig.json来获取输入和输出文件的路径，但会使用普通一饮而尽插件来完成所有的捆绑和缩小。您可以修改它以使用其他插件而不会失去其阅读能力bundleconfig.json。

阅读更多相关信息，并在维基上查看代码示例。

bundleconfig.json

扩展bundleconfig.json在项目的根目录添加一个文件，用于配置所有捆绑。

以下是该文件的示例：

[   {     "outputFileName": "output/bundle.css",     "inputFiles": [       "css/lib/**/*.css", // globbing patterns are supported       "css/input/site.css"     ],     "minify": {         "enabled": true,         "commentMode": "all"     }   },   {     "outputFileName": "output/all.js",     "inputFiles": [       "js/*.js",       "!js/ignore.js" // start with a ! to exclude files     ]   },   {     "outputFileName": "output/app.js",     "inputFiles": [       "input/main.js",       "input/core/*.js" // all .js files in input/core/     ]   } ]

 

 

有助于

如果您想为此项目做出贡献，请查看贡献指南。

要自己克隆和构建此项目，请确保为Visual Studio 安装Extensibility Tools 2015扩展，该扩展启用了此项目使用的某些功能。

posted @ 2018-09-29 10:38  tinys  阅读(1739)  评论(0)  编辑  收藏  举报