Gulp don't create sourcemaps

Question

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?

salsan · Accepted Answer · 2023-10-05 20:05:21Z

1

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

answered Oct 5, 2023 at 20:05

salsan

5691 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Gulp don't create sourcemaps

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related