服务器运维(二十九)Gulp精准打包指定文件非全部—东方仙盟

一、核心实现思路

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

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