gulpsource-mapsgulp-uglifygulp-4

Gulp don't create sourcemaps


I'm studying Gulp and trying to generate sourcemaps for my JavaScript file app.js, but sourcemaps generation isn't working as expected. I came across some old answers suggesting using the gulp-sourcemaps plugin, but the official Gulp documentation now states that you can enable sourcemaps directly through { sourcemaps: true } in src and dest.

I wrote my code 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()
}

Everything is working well except that sourcemaps for the JavaScript file are not being generated.

This is a directory structure.

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

This is a "silly" code in 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);
});

Environment Information:

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

How can I resolve this issue? Any ideas?


Solution

  • I discovered the issue and the error was in the round bracket closure when using dest.

    .pipe(dest("dist/assets/" ) , { sourcemaps: '.'})

    In according with official documentation dest the correct syntax is:

    dest(directory, [options])

    The solution is to pass the options as the second argument like this:

     .pipe(dest("dist/assets/", { sourcemaps: '.'}));