How to use Bundle&Minifier and bundleconfig.json in ASP.NET Core

2017 年9月27日更新

在.csproj 文件中的配置

<Project Sdk="Microsoft.NET.Sdk.Web">
//...
<ItemGroup>
<PackageReference Include="BundlerMinifier.Core" Version="2.4.401" />
</ItemGroup>

<ItemGroup>
<DotNetCliToolReference Include="BundlerMinifier.Core" Version="2.4.337" />
</ItemGroup>

<Target Name="PrepublishScript" BeforeTargets="PrepareForPublish">
<Exec Command="dotnet bundle" />
</Target>
//...
</Project>

引言

我们在ASP.NET MVC 中经常会用到 bundleConfig.cs 文件来进行我们 css 和 js 的绑定， 那么在ASP.NET Core 中我们应该如何使用呢？

步骤一

在 Visual Studio 2015 工具－>扩展和更新 中下载插件


然后重启 Visual Studio 2015

步骤二

在你的ASP.NET Core 项目的 Web 层中 的 project.json 文件中添加如下配置：

"tools": {
"BundlerMinifier.Core": "2.0.238"
},
"scripts": {
"precompile": [ "dotnet bundle" ]
}

在上面的

"scripts":{
"precompile":["dotnet bundle"]
}

则会在编译时就自动再重新生成一遍，如果不想这样的话，可以去除。

步骤三

在 程序包管理器控制台 上输入 dotnet bundle 程序就会自动找到 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/
]
}
]

参考文献

http://dotnetthoughts.net/bundling-and-minification-in-aspnet-core/

https://github.com/madskristensen/BundlerMinifier/wiki