如何用Gulp实现不同环境下的CSS文件差异化引入？

核心思路就是通过环境变量区分「开发环境」和「生产环境」，配合Gulp任务分别处理CSS的构建逻辑，同时自动替换HTML里的样式引用路径。下面给你一套落地的实现方案：

1. 准备依赖插件 #

先安装需要的Gulp工具包：

npm install gulp gulp-clean-css gulp-concat gulp-replace cross-env --save-dev

• cross-env：帮你在Windows/Mac/Linux等不同系统下统一设置环境变量
• gulp-concat：负责合并多个CSS文件
• gulp-clean-css：对合并后的CSS进行压缩优化
• gulp-replace：替换HTML里的样式引用占位符

2. 编写Gulp任务（Gulpfile.js） #

const gulp = require('gulp');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const replace = require('gulp-replace');
// 通过环境变量判断当前是开发还是生产环境
const isProduction = process.env.NODE_ENV === 'production';

// 处理CSS的任务
gulp.task('css', function() {
  if (isProduction) {
    // 生产环境：合并两个CSS文件 + 压缩
    return gulp.src(['style.css', 'external.css'])
      .pipe(concat('res_style.css'))
      .pipe(cleanCSS())
      .pipe(gulp.dest('build'));
  } else {
    // 开发环境：直接复制源CSS文件（也可以不复制，直接引用本地源路径）
    return gulp.src(['style.css', 'external.css'])
      .pipe(gulp.dest('build'));
  }
});

// 替换HTML中样式引用的任务
gulp.task('html', function() {
  let cssLinks;
  if (isProduction) {
    cssLinks = '<link rel="stylesheet" href="build/res_style.css">';
  } else {
    cssLinks = `
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="external.css">
    `.trim();
  }
  return gulp.src('index.html')
    .pipe(replace('<!-- CSS_INJECT -->', cssLinks))
    .pipe(gulp.dest('dist')); // 输出处理后的HTML到dist目录
});

// 开发环境总任务
gulp.task('dev', gulp.series('css', 'html'));
// 生产环境打包总任务
gulp.task('build', gulp.series('css', 'html'));

3. 配置package.json脚本 #

在package.json里添加快速启动脚本，不用每次手动输入复杂命令：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development gulp dev",
    "build": "cross-env NODE_ENV=production gulp build"
  }
}

4. 修改HTML文件 #

在HTML的head部分留一个占位符，让Gulp自动替换成对应环境的样式引用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>项目页面</title>
  <!-- CSS_INJECT -->
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

日常使用方式 #

• 开发调试时运行：npm run dev，处理后的HTML会引用两个独立的CSS文件，方便你修改调试
• 生产打包时运行：npm run build，处理后的HTML会自动切换为合并压缩后的build/res_style.css，优化页面加载性能

这样就完美实现了你要的需求——开发时保留独立文件便于调试，生产时用合并压缩文件提升性能。

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