Gulp无法生成sourcemap求助：官方配置无效如何解决？

问题背景 #

学习Gulp时，尝试为app.js生成sourcemap，按照官方文档说明，在src和dest中通过{ sourcemaps: true }启用sourcemap，但sourcemap始终未生成。已知旧方案使用gulp-sourcemaps插件，但希望采用官方原生方式解决。

现有代码 #

gulpfile.js #

const { src, dest } = require("gulp");
const uglify = require("gulp-uglify");

var paths = {
  scripts: {
    src: "src/assets/js/app.js",
    dest: "./dist/assets",
  }
};
exports.default = function copyAssets(cb) {
  
    src(paths.scripts.src , {sourcemaps: true})
      .pipe(uglify())
      .pipe(dest("dist/assets/"), { sourcemaps: '.'})   
 cb()
}

目录结构 #

├─ src/
│  ├─ index.html
│  ├─ assets/
│  │  ├─ css/
│  │  │  ├─ stylesheet.css
│  │  ├─ js/
│  │  │  ├─ app.js
├─ dest/
│  ├─ assets/
│  │  ├─ stylesheet.css
│  │  ├─ app.js
│  ├─ index.html

app.js测试代码 #

let message = document.querySelector(".gulp-welcome-message");
let title = document.querySelector("title");

message.addEventListener("click", () => {
  message.innerText =
    message.innerText === "Hello Gulp 🥤" ? "Hello Gulp 🥛" : "Hello Gulp 🥤";
  title.innerText =
    title.innerText === "Hello Gulp 🥛" ? "Hello Gulp 🥤" : "Hello Gulp 🥛";

    console.log(title.innerText);
});

环境信息 #

Gulp Version: CLI version: 2.3.0, Local version: 4.0.2
Node.js Version: v20.4.0
Operating System: Windows 10

问题原因及解决方法 #

核心问题 #

1. dest参数传递错误：dest的配置对象应该作为第二个参数直接传入dest()，而不是作为独立的第二个参数传递给pipe()。原代码中.pipe(dest("dist/assets/"), { sourcemaps: '.'})的写法错误，导致sourcemap配置未被识别。
2. 异步任务处理不当：原任务中直接调用cb()，会导致Gulp在流处理完成前就结束任务，可能造成文件未完全生成。

修正后的代码 #

推荐采用Gulp 4的返回流方式（无需回调函数，更简洁规范）：

const { src, dest } = require("gulp");
const uglify = require("gulp-uglify");

var paths = {
  scripts: {
    src: "src/assets/js/app.js",
    dest: "./dist/assets",
  }
};

exports.default = function copyAssets() {
  // 返回流，Gulp会自动处理任务完成信号
  return src(paths.scripts.src, { sourcemaps: true })
    .pipe(uglify())
    .pipe(dest(paths.scripts.dest, { sourcemaps: '.' }));
};

关键修改点 #

• 将sourcemaps配置正确作为dest()的第二个参数传入
• 移除cb回调，改为返回流，让Gulp自动管理任务生命周期

修改后运行Gulp，dist/assets目录下会生成app.js.map文件，同时app.js底部会自动添加sourcemap引用注释，sourcemap生效。

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