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

[一、首先确认是否安装 node.js](#一、首先确认是否安装 node.js)

[二、初始化 package.json](#二、初始化 package.json)

三、安装Gulp混淆工具

[四、创建 gulpfile.js文件](#四、创建 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"可勾选上。

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

bash 复制代码

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

二、初始化 package.json

bash 复制代码

# 根目录命令行
npm init -y

三、安装Gulp混淆工具

bash 复制代码

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

成功执行如图：

四、创建 gulpfile.js文件

根目录路径下创建文件

javascript 复制代码

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）

html 复制代码

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

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

html 复制代码

<!-- 开发环境引用原始文件 -->
<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>

六、执行打包

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

bash 复制代码

# 根目录命令行
npx gulp

成功执行如图：

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

打开项目.csproj

javascript 复制代码

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