.net 项目静态文件自动压缩打包

旅行中的西瓜

打包工具选型

在 ASP.NET MVC 时代，我们常使用 BundleCollection 设置需要打包压缩的 js 和 css 文件，运行时框架会自动处理打包压缩过程并将最终结果传入响应。
ASP.NET Core 开始，不再提供内置的打包压缩组件，官方推荐 WebOptimizer 替代使用。
上述两者都是在运行时实时处理，应该至少在系统初始化时会占用一定的资源。
时间来到 .NET 大一统时代，截止目前（.NET7），我们仍然只能寻求外部组件的帮助。有一个编译期生成预期文件的组件 BuildBundlerMinifier，nuget 安装后进行简单的 JSON 配置即可使用，但遗憾的是，它不支持压缩包含 ES6 语法的 js，会报未将对象引用设置到对象的实例错误。
于是我们开始考虑独立于 .NET 平台的，较为成熟的方案，比如 grunt 和 gulp。

• grunt: 使用 JSON 描述构建步骤
  
• gulp：基于流传递(管道机制)
  

这两者都拥有丰富的插件，以应对各种需求。下面以更年轻更简单的 gulp 为例，说明如何使之与 Visual Studio 配合使用。
示例

假设有如下 .NET 项目，其中按约定静态文件存放在 wwwroot 目录下

安装 gulp

1. # 全局安装 gulp 或 gulp-cli，提供可在命令行执行的 gulp 指令
2. npm install -g gulp-cli

复制代码

需要注意的是，我们还需要在待处理的目录下安装 gulp，否则后续运行命令时会提示 Local gulp not found. 错误。其实这是Gulp故意设计的，原因是为了版本和依赖的控制，也就是当别人 fork 你的代码，或者你过段时间拷贝到别的电脑上再 gulp 的时候，能控制该项目中 gulp 的版本和其他插件的版本始终保持不变。（这里的 gulp 其实也可看作插件，只是它是官方提供的。博主不怀疑 gulp 团队前向兼容的能力，推测是考虑第三方插件前向兼容的能力参差不齐的缘故。）

1. # 进入待处理的目录，此是 .net 项目下的一个子目录
2. cd wwwroot/
3. # 将此子目录初始化为 npm 项目
4. npm init -y
5. # 安装 gulp 插件，提供各种 gulp.xxx()
6. npm install gulp -D

复制代码

此时在该目录下查看 gulp 版本

1. gulp --version
2. # 输出：
3. CLI version: 2.3.0<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
4.   <Exec Command="call package-statics.bat" />
5. </Target># 全局 cli 版本
6. Local version: 4.0.2<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
7.   <Exec Command="call package-statics.bat" />
8. </Target># 当前项目下 gulp 插件版本

复制代码

安装需要的第三方插件

1. # 以下各插件功能请查阅相关资料
2. npm i -D gulp-cssmin gulp-autoprefixer gulp-uglify
3. # es6 语法转 es5，窃以为目前浏览器对 es6 的支持程度，大可不必
4. npm i -D gulp-babel @babel/core @babel/preset-env
5. # 提供合并若干文件为单一文件的功能
6. npm i -D gulp-concat

复制代码

编写 gulpfile.js

在项目根目录下(wwwroot/)新建 gulpfile.js，编写任务脚本

1. // 加载 项目gulp 依赖包
2. const gulp = require('gulp');
4. // 加载 css相关依赖包
5. const autoprefixer = require('gulp-autoprefixer');
6. const cssmin = require('gulp-cssmin');
8. // 加载 js相关依赖包
9. const uglify = require('gulp-uglify');
10. const babel = require('gulp-babel');
12. // 加载文件合并处理包
13. const concat = require('gulp-concat');
15. // 打包 css
16. const cssHandler = function () {
17. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
18.   <Exec Command="call package-statics.bat" />
19. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
20.   <Exec Command="call package-statics.bat" />
21. </Target>return gulp.src('./css/main.css')
22. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
23.   <Exec Command="call package-statics.bat" />
24. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
25.   <Exec Command="call package-statics.bat" />
26. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
27.   <Exec Command="call package-statics.bat" />
28. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
29.   <Exec Command="call package-statics.bat" />
30. </Target>.pipe(autoprefixer())
31. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
32.   <Exec Command="call package-statics.bat" />
33. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
34.   <Exec Command="call package-statics.bat" />
35. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
36.   <Exec Command="call package-statics.bat" />
37. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
38.   <Exec Command="call package-statics.bat" />
39. </Target>.pipe(cssmin())
40. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
41.   <Exec Command="call package-statics.bat" />
42. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
43.   <Exec Command="call package-statics.bat" />
44. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
45.   <Exec Command="call package-statics.bat" />
46. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
47.   <Exec Command="call package-statics.bat" />
48. </Target>.pipe(concat('main.min.css'))
49. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
50.   <Exec Command="call package-statics.bat" />
51. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
52.   <Exec Command="call package-statics.bat" />
53. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
54.   <Exec Command="call package-statics.bat" />
55. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
56.   <Exec Command="call package-statics.bat" />
57. </Target>.pipe(gulp.dest('./css'))
58. }
60. // 打包 js
61. const jsHandler = function () {
62. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
63.   <Exec Command="call package-statics.bat" />
64. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
65.   <Exec Command="call package-statics.bat" />
66. </Target>return gulp.src(['./js/instruction/*.js', './js/repos/*.js', './js/app/*.js'])
67. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
68.   <Exec Command="call package-statics.bat" />
69. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
70.   <Exec Command="call package-statics.bat" />
71. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
72.   <Exec Command="call package-statics.bat" />
73. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
74.   <Exec Command="call package-statics.bat" />
75. </Target>.pipe(babel({ presets: ['@babel/env'] }))
76. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
77.   <Exec Command="call package-statics.bat" />
78. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
79.   <Exec Command="call package-statics.bat" />
80. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
81.   <Exec Command="call package-statics.bat" />
82. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
83.   <Exec Command="call package-statics.bat" />
84. </Target>.pipe(uglify())
85. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
86.   <Exec Command="call package-statics.bat" />
87. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
88.   <Exec Command="call package-statics.bat" />
89. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
90.   <Exec Command="call package-statics.bat" />
91. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
92.   <Exec Command="call package-statics.bat" />
93. </Target>.pipe(concat('main.min.js'))
94. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
95.   <Exec Command="call package-statics.bat" />
96. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
97.   <Exec Command="call package-statics.bat" />
98. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
99.   <Exec Command="call package-statics.bat" />
100. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
101.   <Exec Command="call package-statics.bat" />
102. </Target>.pipe(gulp.dest('./js'))
103. }
105. // 3-3,定义默认执行程序
106. module.exports.default = gulp.parallel(cssHandler, jsHandler)

复制代码

注意，gulp.dest() 参数表示的是目标目录而非目标文件名（输出文件名默认同源文件名），如果要自定义输出文件名可使用 gulp-rename 插件；或如上使用 gulp-concat，它的目的是合并若干文件为单一文件，自然能指定生成的文件名咯。
完成上述步骤后，我们就可以在命令行执行 gulp 检查输出结果。
编译 .net 项目时自动打包

在 .net 项目根目录下（注意非 wwwroot/）新建一个批处理文件 package-statics.bat：

1. cd wwwroot
2. gulp

复制代码

然后编辑项目文件(.csproj)，在<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
  <Exec Command="call package-statics.bat" />
</Target>节点下加入如下配置：

1. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
2.   <Exec Command="call package-statics.bat" />
3. </Target>

复制代码

意思很简单：在编译前先执行批处理文件，也就是先执行之前我们设置好的 gulp 流程。
如果你的项目采用了 CI/CD 自动构建，可能服务器上并没有安装 gulp，那么可以在本地先执行打包，将生成后的文件提交，然后在服务器上编译时跳过打包步骤，直接使用提交的文件。实现这个场景也很简单，只要在上述<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
  <Exec Command="call package-statics.bat" />
</Target>节点内配置执行条件即可：。参看演练：使用 MSBuild
ps：在页面中，我们希望开发时依然引用的是原文件，上线后才引用打包后文件，那么可以使用<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
  <Exec Command="call package-statics.bat" />
</Target>标记，通过判断环境变量达到这一目的：

1. <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
2.   <Exec Command="call package-statics.bat" />
3. </Target><Target Name="PreBuild" BeforeTargets="PreBuildEvent">
4.   <Exec Command="call package-statics.bat" />
5. </Target>

复制代码

参考资料

gulp打包详解

来源:https://www.cnblogs.com/newton/archive/2023/06/15/17451112.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！