在asp.net core中则可以使用BuildBundlerMinifier
来进行css,js
的压缩合并
1、使用NuGet安装 BuildBundlerMinifier
(也可以在vs中下载安装扩展Bundler
& Minifier
,手动压缩文件)
2、新建:bundleconfig.json
绑定和缩减
[
{
// 要输出的捆绑文件名称。 可以包含中的相对路径bundleconfig.json文件。 必填
"outputFileName": "wwwroot/css/site.min.css",
// 要将捆绑在一起的文件的数组。 这些是配置文件的相对路径。 可选,* 空值会在空的输出文件。 组合支持模式。
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
// "输出类型缩减选项。
// "可选,默认值-minify": { "enabled": true },
"minify": {
"enabled": true,
"renameLocals": true
},
// 指示是否生成捆绑的文件的源映射的标志。 可选,默认-false
"sourceMap": false,
// "指示是否将生成的文件添加到项目文件的标志。" "可选,默认-false",
"includeInProject": true
// 用于存储生成的源代码映射文件的根路径。
//"sourceMapRootPath": ""
}
]
参数说明
-
outputFileName
:要输出的压缩文件的相对路径。- 必填
-
inputFiles
:要输出的压缩文件的相对路径。- 可选,为空则输出空文件
- 空值会在空的输出文件。 支持组合模式
- 组合模式 栗子:
"inputFiles": ["wwwroot/**/*(*.css|!(*.min.css)"]
将获取所有 CSS 文件,不包括缩减的文件模式。
-
minify
:压缩选项的配置- 默认启用压缩,更多配置见
BundlerMinifier-Wiki
- 可选
- 默认启用压缩,更多配置见
-
includeInProject
:将生成的文件添加到项目文件 (默认的文件中也没有这个选项)- 文档写的是 默认
false
,在vs中转到定义查看是true
。囧,默认是没有这个参数的
- 文档写的是 默认
-
sourceMaps
:生成捆绑的文件的源映射- 默认
false
- 默认
asp.net core 2.0 bundleconfig.json
bundleconfig.json
绑定和缩减
[
{
// 要输出的捆绑文件名称。 可以包含中的相对路径bundleconfig.json文件。 必填
"outputFileName": "wwwroot/build/xxx.xxx.com/min.css",
// 要将捆绑在一起的文件的数组。 这些是配置文件的相对路径。 可选,* 空值会在空的输出文件。 组合支持模式。
"inputFiles": [
"wwwroot/bootstrap/bootstrap.css"
]
},
{
"outputFileName": "wwwroot/build/xxx.xxx.com/min.js",
"inputFiles": [
"wwwroot/jquery/jquery.min.js",
"wwwroot/knockout/knockout-3.4.2.js"
],
// "输出类型缩减选项。
// "可选,默认值-minify": { "enabled": true },
"minify": {
"enabled": true,
"renameLocals": true
},
// 指示是否生成捆绑的文件的源映射的标志。 可选,默认-false
"sourceMap": true,
// "指示是否将生成的文件添加到项目文件的标志。" "可选,默认-false",
"includeInProject": true
// 用于存储生成的源代码映射文件的根路径。
//"sourceMapRootPath": ""
}
]
添加引用:
Install-Package BuildBundlerMinifier
【.NET CORE】静态文件,LIBMAN
,捆绑和压缩,BUILDBUNDLERMINIFIER
静态文件
首先,.NET Core MVC的项目静态文件存在wwwroot
文件夹中,如果不存在,自己新建即可
在之前的ASP.NET MVC项目时,安装一些CSS,JS
等静态文件时,都是用NuGet
包下载的
但在.NET Core MVC项目不同
会直接提示不兼容
根据提示跳转到Bower
,但是下载总是出错
在.NET Core 项目中
NuGet
是一个包管理器,用于下载.NET 后台所依赖的包
Libman
是一个库管理器,用于下载CSS,JS
等静态文件
LIBMAN
使用libman
下载静态文件
在wwwroot
右键–添加–客户端库
使用unpkg
,选择dist
包即可
下载好,就自动添加libman.json
文件,存放所依赖的包
如果一些静态文件不小心被删除,可以通过libman.json
文件还原客户端库重新下载
捆绑和压缩
捆绑:将多个文件绑在一起,就是将多个文件合成一个文件
压缩:去除空格,换行等,减少文件体积,类似bootstrap.css
和bootstrap.min.css
BUILDBUNDLERMINIFIER
在NuGet
下载BuildBundlerMinifier
包
我们先创建两个css
文件
index1.css
body {
font-size:20px;
color:red;
}
index2.css
body {
padding: 10px;
margin: 10px;
}
创建bundleconfig.json
配置文件
[
{
"outputFileName": "wwwroot/css/index.min.css",
"inputFiles": [
"wwwroot/index1.css",
"wwwroot/index2.css"
]
}
]
在项目中重新生成
生成的index.min.css
文件
body{font-size:20px;color:#f00}body{padding:10px;margin:10px}
两个文件压缩并捆绑在一起了
也可以设置只捆绑不压缩
[
{
"outputFileName": "wwwroot/css/index.min.css",
"inputFiles": [
"wwwroot/index1.css",
"wwwroot/index2.css"
],
"minify": { "enabled": false } //只捆绑不压缩
}
]