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

这篇具有很好参考价值的文章主要介绍了.net 项目静态文件自动压缩打包。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

打包工具选型

在 ASP.NET MVC 时代,我们常使用 BundleCollection 设置需要打包压缩的 js 和 css 文件,运行时框架会自动处理打包压缩过程并将最终结果传入响应。

ASP.NET Core 开始,不再提供内置的打包压缩组件,官方推荐 WebOptimizer 替代使用。

上述两者都是在运行时实时处理,应该至少在系统初始化时会占用一定的资源。

时间来到 .NET 大一统时代,截止目前(.NET7),我们仍然只能寻求外部组件的帮助。有一个编译期生成预期文件的组件 BuildBundlerMinifier,nuget 安装后进行简单的 JSON 配置即可使用,但遗憾的是,它不支持压缩包含 ES6 语法的 js,会报未将对象引用设置到对象的实例错误。

于是我们开始考虑独立于 .NET 平台的,较为成熟的方案,比如 gruntgulp

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

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

示例

假设有如下 .NET 项目,其中按约定静态文件存放在 wwwroot 目录下
.net 项目静态文件自动压缩打包

安装 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> 标记,通过判断环境变量达到这一目的:

<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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端构建工具 代码优化压缩 模块管理 依赖管理 资源处理转换 自动化任务 流程优化 高级特性 Webpack Parcel Rollup Gulp 静态资源

    前端构建在前端开发中具有重要的意义,主要有以下几个方面: 代码优化和压缩:前端构建工具可以对前端代码进行优化和压缩,例如去除注释、空格,合并和缩小文件大小等。这可以减少文件的加载时间和传输大小,提高网页加载速度,优化用户体验 模块管理和依赖管理

    2024年02月09日
    浏览(39)
  • 银河麒麟服务器v10 sp1 部署.Net6.0项目后无法访问静态文件

    上一篇:银河麒麟服务器v10 sp1 部署.Net6.0 http https_csdn_aspnet的博客-CSDN博客 由于本人项目直接从.NetCore3.1升级到.Net6.0的,请参考文章:NetCore3.1项目升级到Net6.0_vs2022 没有startup_csdn_aspnet的博客-CSDN博客 虽然部署项目后,swagger与接口可以正常访问,但是静态文件,如html、css、j

    2024年02月12日
    浏览(41)
  • 使用VisualStudio2022插件(Visual Studio Installer Projects 2022)打包 .Net 6 框架下的 WPF项目 为安装文件

    目录 更新说明(2024/01/22) 序言 一、还是安装Visual Studio Installer Projects 2022插件 二、创建Setup Project项目 2.1 在现有解决方案中添加Setup Project项目 2.2 (更新)添加需要打包的文件  2.2.1 准备添加输出项。 2.2.2 【核心】添加 WpfMain 项目输出。 2.2.3 添加 WpfPluginManager 项目输出。

    2024年02月03日
    浏览(107)
  • vue2项目打包压缩处理

    平常项目打包后,js等文件会体积大,这样用户访问会慢 webpack优化 – compression-webpack-plugin 开启gzip 1、安装compression-webpack-plugin 这里我项目webpack版本是3.6.0,所以得安装低版本得compression-webpack-plugin,webpack版本高于这个得安装其他版本,不然会报错 2、修改配置 1、在config/i

    2024年01月18日
    浏览(44)
  • tar命令文件打包压缩

    1. 概念 打包是指将多个文件或目录打包成一个文件,压缩是指将一个大的文件通过算法压缩成一个小的文件。由于Linux中的很多压缩程序只能对一个文件进行,所以通常要先将全部文件打包成一个文件,然后再对那一个打包文件进行压缩。 2. tar命令介绍 使用tar命令可以进行

    2024年02月08日
    浏览(41)
  • Linux之文件打包和解压缩

    任务描述 有时,我们会在 Linux 系统中将多个文件打包成一个单独的文件,通过本关的学习,我们将学会如何在 Linux 系统中将多个文件/目录打包生成一个文件。 本关任务:使用 tar 命令完成文件和目录的打包操作。 相关知识 tar ( tape archive 的简写)工具可完成许多功能,其

    2024年02月09日
    浏览(40)
  • linuxOps基础_linux文件打包压缩与解压缩

    默认情况下,Linux的压缩概念一次只能压缩一个文件。针对多文件或文件夹无法进行直接压缩。所以需要提前对多个文件或文件夹进行打包,这样才可以进行压缩操作。 打包 打包只是把多个文件或文件夹打包放在一个文件中,但是并没有进行压缩,所以其大小还是原来所有文

    2024年02月07日
    浏览(37)
  • Linux中的打包和文件压缩

    文件打包和文件压缩是linux中常用的数据传递方式,可以保证数据的整体性;本文主要介绍工作中常用的几种打包和压缩方式 有时我们会将linux中的数据拷贝到windows上进行查看,常用的文件压缩格式有zip和rar zip文件压缩格式 压缩命令 说明 zip a.zip ./* 将当前目录下的文件压缩

    2024年02月07日
    浏览(35)
  • 【前端】-vue-对打包的静态文件进行压缩

    通过 npm run build 打包时候,会发现静态文件很大,放在nginx服务中访问页面会很慢,所以可在打包过程中对静态文件再压缩。 对js、css、html等文件进行压缩: 安装插件 “compression-webpack-plugin” 。(我本地版本: cnpm install compression-webpack-plugin@5.0.1) 配置 vue.config.js 文件: 此时运

    2024年01月22日
    浏览(40)
  • Linux基础命令-tar打包压缩文件

    Linux基础命令-echo输出信息_Linux学习中的博客-CSDN博客 Linux三剑客-grep命令_Linux学习中的博客-CSDN博客 Linux文件管理命令(3)-mv改动文件_Linux学习中的博客-CSDN博客 文章目录 前言 一、tar命令介绍 二、命令语法及常用参数 三、 参考案例 总结 在工作上,有同事需要用到程序或一

    2024年02月13日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包