MVC 03 - Nuget & Npm.mp4 (51.71MB) ASP.NET Core MVC 分前后端:

  • 后端一般用 NuGet
  • 前端一般用 NPM

注:NuGet 的使用大家基本都会,所以本节基本都在讲解前端工具的使用。

前端工具

  • NPM:pacakage.json
  • Bundle 和 minify:bundleconfig.json
  • BuildBundlerMinifer
  • Task Runners:Webpack,Gulp,Grunt

    NPM

    想使用 NPM 需安装 NodeJS

在 VS2017 中使用 NPM,需先在前端项目中创建 NPM 配置文件(pacakage.json)。
image.png
在手动编辑配置文件并保存后 NPM 会自动添加依赖包,并在输出中打印消息。

注:BootStrap4 依赖于 jquery 和 popper.js。

  1. {
  2. "version": "1.0.0",
  3. "name": "asp.net",
  4. "private": true,
  5. "devDependencies": {
  6. "bootstrap": "4.3.1",
  7. "jquery-slim": "3.0.0",
  8. "popper.js": "1.14.7"
  9. }
  10. }

Bundle&minify

在前端项目中创建 bundleconfig.json 文件。
image.png
参考 Doc 的文档进行 bundle 和 minify。

  1. [
  2. // bootstrap.css site.css 打包并压缩为 all.min.css
  3. {
  4. "outputFileName": "wwwroot/css/all.min.css",
  5. "inputFiles": [
  6. "node_modules/bootstrap/dist/css/bootstrap.css",
  7. "wwwroot/css/site.css"
  8. ]
  9. },
  10. // 未压缩,相当于做了个复制操作
  11. {
  12. "outputFileName": "wwwroot/css/bootstrap.css",
  13. "inputFiles": [
  14. "node_modules/bootstrap/dist/css/bootstrap.css"
  15. ],
  16. "minify": {
  17. "enabled": false
  18. }
  19. }
  20. ]

配置完后,再参考 Doc,从 NuGet 安装 BuildBundlerMinifier 插件。

The BuildBundlerMinifier NuGet package enables the execution of bundling and minification at build time. The package injects MSBuild Targets which run at build and clean time. The bundleconfig.json file is analyzed by the build process to produce the output files based on the defined configuration.

安装好插件后,build 项目时会自动 bundle&minify。
image.png

源码

CoreDemo.zip