打包工具选型
在 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
# 全局安装 gulp 或 gulp-cli,提供可在命令行执行的 gulp 指令
npm install -g gulp-cli
需要注意的是,我们还需要在待处理的目录下安装 gulp,否则后续运行命令时会提示 Local gulp not found.
错误。其实这是Gulp故意设计的,原因是为了版本和依赖的控制,也就是当别人 fork 你的代码,或者你过段时间拷贝到别的电脑上再 gulp 的时候,能控制该项目中 gulp 的版本和其他插件的版本始终保持不变。(这里的 gulp 其实也可看作插件,只是它是官方提供的。博主不怀疑 gulp 团队前向兼容的能力,推测是考虑第三方插件前向兼容的能力参差不齐的缘故。)
# 进入待处理的目录,此是 .net 项目下的一个子目录
cd wwwroot/
# 将此子目录初始化为 npm 项目
npm init -y
# 安装 gulp 插件,提供各种 gulp.xxx()
npm install gulp -D
此时在该目录下查看 gulp 版本
gulp --version
# 输出:
CLI version: 2.3.0 # 全局 cli 版本
Local version: 4.0.2 # 当前项目下 gulp 插件版本
安装需要的第三方插件
# 以下各插件功能请查阅相关资料
npm i -D gulp-cssmin gulp-autoprefixer gulp-uglify
# es6 语法转 es5,窃以为目前浏览器对 es6 的支持程度,大可不必
npm i -D gulp-babel @babel/core @babel/preset-env
# 提供合并若干文件为单一文件的功能
npm i -D gulp-concat
编写 gulpfile.js
在项目根目录下(wwwroot/)新建 gulpfile.js,编写任务脚本
// 加载 项目gulp 依赖包
const gulp = require('gulp');
// 加载 css相关依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
// 加载 js相关依赖包
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
// 加载文件合并处理包
const concat = require('gulp-concat');
// 打包 css
const cssHandler = function () {
return gulp.src('./css/main.css')
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(concat('main.min.css'))
.pipe(gulp.dest('./css'))
}
// 打包 js
const jsHandler = function () {
return gulp.src(['./js/instruction/*.js', './js/repos/*.js', './js/app/*.js'])
.pipe(babel({ presets: ['@babel/env'] }))
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest('./js'))
}
// 3-3,定义默认执行程序
module.exports.default = gulp.parallel(cssHandler, jsHandler)
注意,gulp.dest() 参数表示的是目标目录而非目标文件名(输出文件名默认同源文件名),如果要自定义输出文件名可使用 gulp-rename 插件;或如上使用 gulp-concat,它的目的是合并若干文件为单一文件,自然能指定生成的文件名咯。
完成上述步骤后,我们就可以在命令行执行 gulp
检查输出结果。
编译 .net 项目时自动打包
在 .net 项目根目录下(注意非 wwwroot/)新建一个批处理文件 package-statics.bat:
cd wwwroot
gulp
然后编辑项目文件(.csproj),在
节点下加入如下配置:
<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
<Exec Command="call package-statics.bat" />
</Target>
意思很简单:在编译前先执行批处理文件,也就是先执行之前我们设置好的 gulp 流程。
如果你的项目采用了 CI/CD 自动构建,可能服务器上并没有安装 gulp,那么可以在本地先执行打包,将生成后的文件提交,然后在服务器上编译时跳过打包步骤,直接使用提交的文件。实现这个场景也很简单,只要在上述 <Target ... Condition="'$(Configuration)'=='DEBUG'">
。参看演练:使用 MSBuild
ps:在页面中,我们希望开发时依然引用的是原文件,上线后才引用打包后文件,那么可以使用 <environment>
标记,通过判断环境变量达到这一目的:文章来源:https://www.toymoban.com/news/detail-483568.html
<environment include="Development">
<link ... href="~/css/main.css" />
</environment>
<environment include="Production">
<link ... href="~/css/main.min.css" />
</environment>
参考资料
gulp打包详解文章来源地址https://www.toymoban.com/news/detail-483568.html
到了这里,关于.net 项目静态文件自动压缩打包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!