- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
在 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-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
在项目根目录下(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 项目根目录下(注意非 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> 标记,通过判断环境变量达到这一目的:
<environment include="Development">
<link ... href="~/css/main.css" />
</environment>
<environment include="Production">
<link ... href="~/css/main.min.css" />
</environment>
gulp打包详解 。
最后此篇关于.net项目静态文件自动压缩打包的文章就讲到这里了,如果你想了解更多关于.net项目静态文件自动压缩打包的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我正在使用 NetBeans 开发 Java 中的 WebService,并使用 gradle 作为依赖管理。 我找到了this article关于使用 gradle 开发 Web 项目。它使用 Gr
我正在将旧项目从 ant 迁移到 gradle(以使用其依赖项管理和构建功能),并且在生成 时遇到问题>eclipse 项目。今天的大问题是因为该项目有一些子项目被拆分成 war 和 jar 包部署到
我已经为这个错误苦苦挣扎了很长时间。如果有帮助的话,我会提供一些问题的快照。请指导我该怎么办????在我看来,它看起来一团糟。 *** glibc detected *** /home/shivam/
我在 Ubuntu 12.10 上运行 NetBeans 7.3。我正在学习 Java Web 开发类(class),因此我有一个名为 jsage8 的项目,其中包含我为该类(class)所做的工作。
我想知道 Codeplex、GitHub 等中是否有任何突出的项目是 C# 和 ASP.NET,甚至只是 C# API 与功能测试 (NUnit) 和模拟(RhinoMocks、NMock 等)。 重
我创建了一个 Maven 项目,包装类型为“jar”,名为“Y”我已经完成了“Maven 安装”,并且可以在我的本地存储库中找到它.. 然后,我创建了另一个项目,包装类型为“war”,称为“X”。在这
我一直在关注the instructions用于将 facebook SDK 集成到我的应用程序中。除了“helloFacebookSample”之外,我已经成功地编译并运行了所有给定的示例应用程序。
我想知道,为什么我们(Java 社区)需要 Apache Harmony 项目,而已经有了 OpenJDK 项目。两者不是都是在开源许可下发布的吗? 最佳答案 事实恰恰相反。 Harmony 的成立是
我正在尝试使用 Jsoup HTML Parser 从网站获取缩略图 URL我需要提取所有以 60x60.jpg(或 png)结尾的 URL(所有缩略图 URL 都以此 URL 结尾) 问题是我让它在
我无法构建 gradle 项目,即使我编辑 gradle 属性,我也会收到以下错误: Error:(22, 1) A problem occurred evaluating root project
我有这个代码: var NToDel:NSArray = [] var addInNToDelArray = "Test1 \ Test2" 如何在 NToDel:NSArray 中添加 addInN
如何在单击显示更多(按钮)后将主题列表限制为 5 个(项目)。 还有 3(项目),依此类推到列表末尾,然后它会显示显示更少(按钮)。 例如:在 Udemy 过滤器选项中,当您点击查看更多按钮时,它仅显
如何将现有的 Flutter 项目导入为 gradle 项目? “导入项目”向导要求 Gradle 主路径。 我有 gradle,安装在我的系统中。但是这里需要设置什么(哪条路径)。 这是我正在尝试的
我有一个关于 Bitbucket 的项目。只有源被提交。为了将项目检索到新机器上,我在 IntelliJ 中使用了 Version Control > Checkout from Ve
所以,我想更改我公司的一个项目,以使用一些与 IDE 无关的设置。我在使用 Tomcat 设置 Java 应用程序方面有非常少的经验(我几乎不记得它是如何工作的)。 因此,为了帮助制作独立于 IDE
我有 2 个独立的项目,一个在 Cocos2dx v3.6 中,一个在 Swift 中。我想从 Swift 项目开始游戏。我该怎么做? 我已经将整个 cocos2dx 项目复制到我的 Swift 项目
Cordova 绝对是新手。这些是我完成的步骤: checkout 现有项目 运行cordova build ios 以上生成此构建错误: (node:10242) UnhandledPromiseR
我正在使用 JQuery 隐藏/显示 li。我的要求是,当我点击任何 li 时,它应该显示但隐藏所有其他 li 项目。当我将鼠标悬停在文本上时 'show all list item but don
我想将我所有的java 项目(223 个项目)迁移到gradle 项目。我正在使用由 SpringSource STS 团队开发的 Gradle Eclipse 插件。 目前,我所有的 java 项目
我下载this Eclipse Luna ,对于 Java EE 开发人员,如描述中所见,它支持 Web 应用程序。我找不到 file -> new -> other -> web projects
我是一名优秀的程序员,十分优秀!