Gulp don't create sourcemaps

61 Views Asked by At

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?

1

There are 1 best solutions below

0
salsan On BEST ANSWER

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: '.'}));