如何通过Gulp与package.json搭建多阶段开发环境？

你遇到的核心问题是：直接用node builds/staging.js运行复制后的Gulp脚本不会自动执行任务——因为Gulp任务需要通过Gulp CLI触发，而不是单纯用Node.js加载文件。下面分两种方式帮你解决，还有更优的实践建议：

方法1：修改npm scripts直接调用Gulp CLI（推荐） #

不用改变你已有的staging.js/development.js文件，只需要修改package.json的scripts字段，用Gulp的--gulpfile参数指定对应的配置文件：

{
  "name": "Name",
  "version": "1.0.0",
  "description": "Description",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "development": "gulp --gulpfile builds/development.js",
    "staging": "gulp --gulpfile builds/staging.js",
    "build": "gulp --gulpfile builds/build.js"
  },
  "author": "Author name here",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  },
  "dependencies": {}
}

为什么这样可行？ #

原来你输入gulp命令时，Gulp CLI会自动寻找当前目录下的gulpfile.js并执行其中的default任务。通过--gulpfile参数，你可以告诉Gulp加载指定的脚本文件，行为和原来的gulp命令完全一致，这样npm run staging就能像直接输入gulp一样启动环境了。

方法2：修改脚本文件让Node.js能直接触发任务 #

如果你坚持要用node命令运行脚本，需要在每个脚本文件的末尾手动调用默认任务。比如在staging.js的最后添加：

// 在文件末尾添加，手动执行默认任务
const defaultTask = task('default');
defaultTask();

或者如果你用的是Gulp 4的导出语法，可以改成：

// 替换原有的task('default', ...)为导出语法
exports.default = series(compile, parallel(server, watcher));
// 手动执行默认任务
exports.default();

不过这种方式不推荐，因为会丢失Gulp CLI提供的任务日志、错误处理和并行/串行执行的优化。

更优实践：单Gulp文件 + 环境变量 #

复制多个Gulp文件会导致代码重复，难以维护。更好的方式是用环境变量区分不同阶段的配置，只维护一个gulpfile.js：

1. 修改package.json的scripts，传递环境变量：

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "development": "NODE_ENV=development gulp",
    "staging": "NODE_ENV=staging gulp",
    "build": "NODE_ENV=production gulp build"
  }
}

2. 在gulpfile.js中根据环境变量调整任务行为：

// 获取环境变量，默认development
const env = process.env.NODE_ENV || 'development';
const isProduction = env === 'production';
const isStaging = env === 'staging';

// 示例：CSS任务根据环境决定是否压缩、生成sourcemap
function css() {
  return src(paths.styles.src)
    .pipe(isProduction ? sourcemaps.init() : noop()) // 生产环境才启用sourcemap
    .pipe(sass({ 
      outputStyle: isProduction || isStaging ? 'compressed' : 'expanded' 
    }))
    .pipe(plumber())
    .pipe(autoprefixer()) // 所有环境都加前缀
    .pipe(isProduction ? cleanCSS() : noop()) // 生产环境才压缩CSS
    .pipe(isProduction ? sourcemaps.write('.') : noop()) // 生产环境输出sourcemap
    .pipe(dest(paths.styles.dest))
}

// 不同环境的默认任务
if (env === 'development') {
  exports.default = series(compile, parallel(server, watcher));
} else if (env === 'staging') {
  exports.default = series(compile, parallel(server, watcher)); // 可以调整预发布的行为，比如禁用sourcemap
} else if (env === 'production') {
  exports.build = series(clean, html, css, js); // 生产构建不需要启动服务器
}

这样你只需要维护一个Gulp文件，所有环境的差异逻辑集中处理，后续修改会更高效。

内容的提问来源于stack exchange，提问作者Juan-man