如何使用Gulp将JS与JSON文件合并编译为单个压缩JS文件

第一步：安装所需依赖 #

执行以下命令安装gulp及相关插件：
npm install gulp gulp-concat gulp-uglify gulp-json-transform --save-dev

第二步：编写gulpfile.js #

完整配置示例如下：

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const jsonTransform = require('gulp-json-transform');

// 将config.json转换为全局JS变量
gulp.task('process-config', function () {
  // 替换为你项目中config.json的实际路径
  return gulp.src('./config.json')
    .pipe(jsonTransform(function (configData) {
      // 把JSON内容转为挂载到全局的配置变量，main.js可直接读取
      return `window.PROJECT_CONFIG = ${JSON.stringify(configData)};`;
    }))
    // 临时输出到temp目录
    .pipe(gulp.dest('./temp'));
});

// 合并压缩所有JS资源
gulp.task('build', gulp.series('process-config', function () {
  return gulp.src([
    // 注意顺序：配置变量要放在main.js前面，保证main.js读取时已经存在
    './temp/config.js',
    // 替换为你项目中main.js的实际路径，其他需要合并的JS也可以加在这个数组里
    './main.js'
  ])
  // 合并为单个文件，可自定义文件名
  .pipe(concat('app.min.js'))
  // 压缩JS代码
  .pipe(uglify())
  // 最终输出到dist目录，可自定义输出路径
  .pipe(gulp.dest('./dist'));
}));

// 执行gulp默认命令时自动触发build任务
gulp.task('default', gulp.series('build'));

第三步：修改原有代码+执行构建 #

• 把main.js中原来引用config.json的代码替换为直接读取全局变量，比如原来的import config from './config.json'或者const config = require('./config.json')，直接改为const config = window.PROJECT_CONFIG即可
• 项目根目录执行npx gulp即可在dist目录生成合并完成的压缩JS文件，直接引入这个文件就能正常运行，不需要再单独加载config.json
• 如果需要监听文件变化自动构建，可以额外加watch任务，监听config.json和main.js的修改自动触发build流程

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