一、核心实现思路

先拆解需求，再分步实现：

1. 指定文件打包：通过 Gulp 的 src() 方法精准匹配文件路径 / 文件名，结合通配符、排除规则实现；
2. 加载真实环境配置：通过环境变量（process.env）区分环境，加载对应配置文件（如 .env.dev/.env.prod），并在打包时替换代码中的环境变量。

二、完整实现代码（开箱即用）

1. 前置准备

先初始化项目并安装依赖（这是最规范的方式，建议保留）：

bash

运行

# 初始化 package.json
npm init -y
# 安装核心依赖
npm install gulp gulp-clean-css gulp-uglify gulp-replace dotenv --save-dev

2. 目录结构（建议）

plaintext

your-project/
├── .env.dev        # 开发环境配置
├── .env.prod       # 生产环境配置
├── src/            # 源码目录
│   ├── js/
│   │   ├── app.js  # 需要打包的指定JS文件
│   │   ├── test.js # 不需要打包的JS文件
│   └── css/
│       ├── main.css# 需要打包的指定CSS文件
│       └── temp.css# 不需要打包的CSS文件
├── dist/           # 打包输出目录
└── gulpfile.js     # Gulp配置文件

3. 环境配置文件示例

• .env.dev（开发环境）：

  ini

  API_BASE_URL=http://dev-api.example.com
  DEBUG=true
  

• .env.prod（生产环境）：

  ini

  API_BASE_URL=https://prod-api.example.com
  DEBUG=false
  

4. Gulp 核心配置文件（gulpfile.js）

javascript

运行

// 引入依赖
const gulp = require('gulp');
const cleanCss = require('gulp-clean-css'); // 压缩CSS
const uglify = require('gulp-uglify');     // 压缩JS
const replace = require('gulp-replace');   // 替换环境变量
const dotenv = require('dotenv');          // 加载.env文件
const path = require('path');

// 第一步：加载环境变量（根据命令行参数区分环境）
function loadEnv() {
  // 获取命令行传入的环境参数，默认dev
  const env = process.argv.includes('--prod') ? 'prod' : 'dev';
  // 加载对应环境的配置文件
  const envConfig = dotenv.config({
    path: path.resolve(__dirname, `.env.${env}`)
  }).parsed;
  
  // 将环境变量挂载到process.env，方便全局使用
  if (envConfig) {
    Object.keys(envConfig).forEach(key => {
      process.env[key] = envConfig[key];
    });
  }
  console.log(`✅ 已加载【${env}】环境配置：`, envConfig);
  return envConfig;
}

// 第二步：打包指定的CSS文件（示例：只打包main.css）
function buildCss() {
  const envConfig = loadEnv();
  return gulp
    // 精准指定要打包的文件（可写多个路径，用数组）
    .src(['src/css/main.css']) 
    // 排除不需要打包的文件（如果需要）
    // .src(['src/css/**/*.css', '!src/css/temp.css'])
    .pipe(replace('{{API_BASE_URL}}', process.env.API_BASE_URL)) // 替换代码中的占位符
    .pipe(cleanCss()) // 压缩CSS
    .pipe(gulp.dest('dist/css')); // 输出到目标目录
}

// 第三步：打包指定的JS文件（示例：只打包app.js）
function buildJs() {
  const envConfig = loadEnv();
  return gulp
    .src(['src/js/app.js']) // 只打包app.js
    .pipe(replace('{{API_BASE_URL}}', process.env.API_BASE_URL)) // 替换JS中的环境变量占位符
    .pipe(replace('{{DEBUG}}', process.env.DEBUG))
    .pipe(uglify()) // 压缩JS（生产环境建议开启）
    .pipe(gulp.dest('dist/js'));
}

// 第四步：定义打包任务（合并CSS和JS打包）
// 开发环境打包：gulp build
// 生产环境打包：gulp build --prod
exports.build = gulp.series(loadEnv, gulp.parallel(buildCss, buildJs));
// 默认任务：执行gulp即可触发build
exports.default = exports.build;

5. 源码文件示例（含环境变量占位符）

• src/js/app.js：

  javascript

  运行

  // 代码中用占位符{{XXX}}表示环境变量
  const apiConfig = {
    baseUrl: '{{API_BASE_URL}}',
    debug: {{DEBUG}}
  };
  console.log('API地址：', apiConfig.baseUrl);
  console.log('调试模式：', apiConfig.debug);
  

• src/css/main.css：

  css

  /* CSS中也可替换环境相关的变量（比如CDN地址） */
  .bg {
    background: url('{{API_BASE_URL}}/images/bg.png');
  }
  

三、关键功能解释

1. 如何指定文件打包？

• 精准匹配单个文件：gulp.src(['src/js/app.js']) 只打包 app.js；
• 匹配多个指定文件：gulp.src(['src/js/app.js', 'src/js/utils.js'])；
• 匹配目录 + 排除文件：gulp.src(['src/css/**/*.css', '!src/css/temp.css'])（打包所有 CSS，排除 temp.css）；
• 通配符规则：
  • *：匹配当前目录下所有文件（如 src/js/*.js 匹配 js 目录下所有 JS）；
  • **：匹配所有子目录（如 src/**/*.js 匹配 src 下所有 JS）；
  • !：排除指定文件（必须写在匹配规则后）。

2. 如何加载真实环境配置？

• 步骤 1：通过 dotenv 加载 .env.xxx 文件，解析配置；
• 步骤 2：将配置挂载到 process.env 全局变量；
• 步骤 3：通过 gulp-replace 替换代码中的 {{占位符}} 为真实环境值；
• 步骤 4：通过命令行参数 --prod 切换环境（开发环境无需加，生产环境加 --prod）。

3. 运行命令

bash

运行

# 开发环境打包（加载.env.dev）
gulp build
# 生产环境打包（加载.env.prod）
gulp build --prod
# 简写（执行默认任务）
gulp # 开发环境
gulp --prod # 生产环境

四、扩展优化（可选）

1. 增加文件清理：打包前清空 dist 目录，避免旧文件残留：

   bash

   运行

   npm install del --save-dev
   

   在 gulpfile.js 中添加：

   javascript

   运行

   const del = require('del');
   // 清理dist目录
   function clean() {
     return del(['dist/**/*']);
   }
   // 修改build任务，先清理再打包
   exports.build = gulp.series(clean, loadEnv, gulp.parallel(buildCss, buildJs));
   

2. 区分压缩逻辑：仅生产环境压缩 JS/CSS，开发环境保留源码：

   javascript

   运行

   function buildJs() {
     const env = process.argv.includes('--prod') ? 'prod' : 'dev';
     let stream = gulp.src(['src/js/app.js'])
       .pipe(replace('{{API_BASE_URL}}', process.env.API_BASE_URL));
     // 仅生产环境压缩
     if (env === 'prod') {
       stream = stream.pipe(uglify());
     }
     return stream.pipe(gulp.dest('dist/js'));
   }
   

阿雪技术观

在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者。无论是分享代码、撰写技术博客，还是参与开源项目维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基生命，为科技进步添砖加瓦。

Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets, hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up