（初識MVC Core）3、包的安裝NPM與打包--css和js

 一：NPM的安裝

1.右鍵項目=》添加新建項=》建立NPM配置文件

 

2.新增引用插件包（會出現自動提示），寫完一個以後，保存一下，就會自動安裝插件包

 

 顯示全部隱藏文件就能夠看到安裝的插件包了

 

 二：js和css打包bundleConfig.json

 1.新建一個名爲bundleConfig.json的json

 

 2.打包

1）在項目wwwroot底下建立文件夾js和css

2）修改bundleConfig.json內容

 

[
  //css
  {
    //打捆生成的css文件路徑和名稱並壓縮
    "outputFileName": "wwwroot/css/all.min.css",
    "inputFiles": [
      //須要打捆的css文件路徑和名稱
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/css/bootstrap.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    "minify": {
      "enabled": false//是否壓縮（開發使用）
    }
  },
  //js
  {
    "outputFileName": "wwwroot/js/all.min.js",
    "inputFiles": [
      "node_modules/jquery-slim/dist/jquery.slim.js",
      "node_modules/popper.js/dist/js/popper.js",
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  },
  {
    "outputFileName": "wwwroot/js/vendor.js",
    "inputFiles": [
      "node_modules/jquery-slim/dist/jquery.slim.js",
      "node_modules/popper.js/dist/js/popper.js",
      "node_modules/bootstrap/dist/js/bootstrap.js"
    ],
    "minify": {
      "enabled": false
    }
  }
]

 

3)使用Nuget安裝BuildBundlerMinifier

 

4）安裝後執行一下，生成

 

 

參閱：https://v.qq.com/x/page/r0745234k98.html

謝謝Dave