Backend - gulp压缩混淆JS（asp .net core MVC）

目录

一、首先确认是否安装 node.js

二、初始化 package.json

三、安装Gulp混淆工具

四、创建 gulpfile.js文件

五、修改所有JS的引入方式

（一）第一种方式（不分开发和生产环境，统一都用混淆JS）

（二）第二种方式（开发环境保持原始JS，方便测试）

六、执行打包

（一）第一种方式：单独打包

（二）第二种方式：自动化构建

七、注意

为了防止用户恶意篡改JS代码，可采用混淆。混淆的方式有多种，这里我会选择Gulp（配置简单，更好维护），而不是Webpack等复杂方式。
因为我的项目属于 ASP.NET Core MVC 小型项目，且只是为了混淆JS代码，所以使用Gulp即可。

一、首先确认是否安装 node.js

若没安装，则下载Node.js（.msi），安装过程一路next，若有“Automatically install the necessary tools”可勾选上。

验证是否安装成功（根目录命令行）：

# 根目录下 node -v # 根目录下 npm -v

二、初始化 package.json

# 根目录命令行 npm init -y

三、安装Gulp混淆工具

# 根目录命令行 # 一步执行安装Gulp、UglifyJS、重命名文件的所需插件 npm install --save-dev gulp gulp-uglify gulp-rename # 可实现压缩成一行代码 npm install --save-dev gulp-terser

成功执行如图：

四、创建 gulpfile.js文件

根目录路径下创建文件

const gulp = require('gulp'); const terser = require('gulp-terser'); const rename = require('gulp-rename'); function build() { return gulp.src('wwwroot/js/**/*.js') // 所有JS（包括子文件夹的JS） .pipe(terser({ compress: { drop_console: true, // 删除 console.log drop_debugger: true // 删除 debugger }, format: { comments: false, // 删除注释 beautify: false, // 强制压缩成一行 indent_level: 0, // 不缩进 max_line_len: 1 // 强制一行 } })) .pipe(rename({ suffix: '.min' })) // 重命名为 .min.js .pipe(gulp.dest('wwwroot/dist')); // 输出到dist } exports.default = build;

五、修改所有JS的引入方式

因为我将wwwroot/js文件夹的所有JS文件执行混淆，所以整个项目代码所有涉及到该文件夹的JS文件的引入方式都得修改。可代码全局搜索更快。

（一）第一种方式（不分开发和生产环境，统一都用混淆JS）

<!-- 原来 --> <script src="~/js/XX/XX.js"></script> <!-- js路径改成dist，且XX.js补充成XX.min.js --> <script src="~/dist/XX/XX.min.js"></script>

（二）第二种方式（开发环境保持原始JS，方便测试）

<!-- 开发环境引用原始文件 --> <environment include="Development"> <script src="/js/paint/paint-showindex.js"></script> </environment> <!-- 生产环境引用混淆后的文件 --> <environment exclude="Development"> <script src="/dist/paint/paint-showindex.min.js"></script> </environment>

六、执行打包

（一）第一种方式：单独打包

# 根目录命令行 npx gulp

成功执行如图：

（二）第二种方式：自动化构建

打开项目.csproj

<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> ... </PropertyGroup> <ItemGroup> ... </ItemGroup> <!-- 构建时运行 Gulp --> <Target Name="GulpBuild" AfterTargets="NpmInstall" BeforeTargets="Build"> <Exec Command="npx gulp" /> </Target> <!-- 发布时运行 Gulp --> <Target Name="GulpPublish" BeforeTargets="PrepareForPublish"> <Exec Command="npx gulp" /> </Target> </Project>

七、注意

自己遇到一个问题，若打开部署IIS后的网站页面后，执行登录时报错500 (Internal Server Error)：An error occurred while processing your request.

原因分析及解决：首先报错500，那大概率是后端出现问题（涉及到对后端的请求）；其次，若开发环境正常运行，但发布部署IIS后的运行时登录就报错，则检查appsettings.Production.json文件里设定的数据库IP链接是否属于生产环境的IP设定