asp.net core2.1 bundleconfig.json合并压缩资源文件

在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.cssbootstrap.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 } //只捆绑不压缩
  }
]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值