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 includeDevelopment script src/js/paint/paint-showindex.js/script /environment !-- 生产环境引用混淆后的文件 -- environment excludeDevelopment script src/dist/paint/paint-showindex.min.js/script /environment六、执行打包一第一种方式单独打包# 根目录命令行 npx gulp成功执行如图二第二种方式自动化构建打开项目.csprojProject SdkMicrosoft.NET.Sdk.Web PropertyGroup ... /PropertyGroup ItemGroup ... /ItemGroup !-- 构建时运行 Gulp -- Target NameGulpBuild AfterTargetsNpmInstall BeforeTargetsBuild Exec Commandnpx gulp / /Target !-- 发布时运行 Gulp -- Target NameGulpPublish BeforeTargetsPrepareForPublish Exec Commandnpx gulp / /Target /Project七、注意自己遇到一个问题若打开部署IIS后的网站页面后执行登录时报错500 (Internal Server Error)An error occurred while processing your request.原因分析及解决首先报错500那大概率是后端出现问题涉及到对后端的请求其次若开发环境正常运行但发布部署IIS后的运行时登录就报错则检查appsettings.Production.json文件里设定的数据库IP链接是否属于生产环境的IP设定