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