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设定