.NET Framework下ASP.NET Web Forms构建时脚本合并压缩方案咨询

方案一：Gulp（推荐，生态成熟且稳定） #

Gulp虽是老牌构建工具，但至今仍在维护，完全适配你的需求——不需要重构现有全局式JS代码，支持文件监听、JS合并压缩、SCSS编译，本地和CI/CD都能无缝运行。

步骤： #

1. 项目根目录初始化npm：

   npm init -y
   

2. 安装依赖：

   npm install --save-dev gulp gulp-concat gulp-uglify gulp-rename gulp-sass browser-sync
   

   （browser-sync可选，用于本地开发时自动刷新页面）
3. 新建gulpfile.js，配置任务：

   const gulp = require('gulp');
   const concat = require('gulp-concat');
   const uglify = require('gulp-uglify');
   const rename = require('gulp-rename');
   const sass = require('gulp-sass')(require('sass'));
   
   // JS合并+压缩任务
   function processJS() {
     // 按依赖顺序排列文件，比如先jQuery，再自定义脚本
     return gulp.src(['src/js/jquery.min.js', 'src/js/**/*.js'])
       .pipe(concat('app.js')) // 输出未压缩合并版
       .pipe(gulp.dest('dist/js'))
       .pipe(uglify()) // 压缩
       .pipe(rename({ suffix: '.min' }))
       .pipe(gulp.dest('dist/js'));
   }
   
   // SCSS编译任务
   function processSCSS() {
     return gulp.src('src/scss/**/*.scss')
       .pipe(sass().on('error', sass.logError))
       .pipe(gulp.dest('dist/css')) // 未压缩CSS
       .pipe(sass({ outputStyle: 'compressed' }))
       .pipe(rename({ suffix: '.min' }))
       .pipe(gulp.dest('dist/css'));
   }
   
   // 监听文件变化，自动执行对应任务
   function watchFiles() {
     gulp.watch('src/js/**/*.js', processJS);
     gulp.watch('src/scss/**/*.scss', processSCSS);
     // 可选：监听HTML变化自动刷新页面
     // browserSync.init({ server: './' });
     // gulp.watch('**/*.html').on('change', browserSync.reload);
   }
   
   // 构建命令（供CI/CD使用）
   exports.build = gulp.parallel(processJS, processSCSS);
   // 本地开发监听命令
   exports.watch = watchFiles;
   

4. 使用方式：
   • 先在package.json的scripts中添加："build": "gulp build", "watch": "gulp watch"
   • 本地开发：执行npm run watch，保存JS/SCSS文件时自动编译
   • CI/CD构建：执行npm run build

方案二：Rollup（轻量简洁，适合非模块化代码） #

Rollup默认面向模块化设计，但可通过配置输出IIFE/UMD格式保留全局变量，无需重构现有代码，配置比Webpack简单很多。

步骤： #

1. 初始化npm后安装依赖：

   npm install --save-dev rollup rollup-plugin-terser @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-scss
   

2. 新建rollup.config.js：

   import { terser } from 'rollup-plugin-terser';
   import resolve from '@rollup/plugin-node-resolve';
   import commonjs from '@rollup/plugin-commonjs';
   import scss from 'rollup-plugin-scss';
   
   export default [
     // JS配置：输出未压缩和压缩版
     {
       input: ['src/js/jquery.min.js', 'src/js/**/*.js'], // 按依赖顺序排列
       output: [
         { file: 'dist/js/app.js', format: 'iife', name: 'MyApp' }, // 未压缩，iife格式保留全局变量
         { file: 'dist/js/app.min.js', format: 'iife', name: 'MyApp', plugins: [terser()] } // 压缩版
       ],
       plugins: [resolve(), commonjs()]
     },
     // SCSS配置
     {
       input: 'src/scss/main.scss', // 入口SCSS文件（可导入其他SCSS）
       output: { file: 'dist/css/app.css' },
       plugins: [
         scss({ output: 'dist/css/app.css' }), // 未压缩CSS
         scss({ output: 'dist/css/app.min.css', outputStyle: 'compressed' }) // 压缩CSS
       ]
     }
   ];
   

3. 在package.json的scripts中添加：

   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w"
   }
   

4. 使用方式和Gulp一致：本地npm run watch，CI/CDnpm run build

方案三：纯npm脚本（无构建工具，极简） #

如果不想用Gulp/Rollup，也可以直接用npm脚本组合CLI工具，适合需求极简单的场景：

1. 安装依赖：

   npm install --save-dev concat-cli uglify-js node-sass onchange
   

2. 在package.json的scripts中添加：

   "scripts": {
     "build:js": "concat-cli -f src/js/jquery.min.js src/js/**/*.js -o dist/js/app.js && uglifyjs dist/js/app.js -o dist/js/app.min.js",
     "build:scss": "node-sass src/scss/ dist/css/ --output-style expanded && node-sass src/scss/ dist/css/ --output-style compressed --suffix .min",
     "build": "npm run build:js && npm run build:scss",
     "watch:js": "onchange 'src/js/**/*.js' -- npm run build:js",
     "watch:scss": "onchange 'src/scss/**/*.scss' -- npm run build:scss",
     "watch": "npm run watch:js & npm run watch:scss"
   }
   

通用注意事项： #

• 所有方案都无需提交dist文件夹到Git，在.gitignore里添加dist/即可解决冲突问题
• JS文件必须按依赖关系排列（比如先引入jQuery，再引入依赖它的自定义脚本），否则会出现全局变量未定义的问题
• 若需要兼容更多场景，可在Gulp/Rollup中添加Babel插件转译ES2015+特性，不过你已放弃IE11，现代浏览器原生支持大部分ES2015语法，无需转译也可正常运行

内容的提问来源于stack exchange，提问作者Alan Waiss