Kevin Powell - Community•4mo ago

gulp add source maps from compiled scss file

Hi, i have this gulpfile.mjs in my project. I want to add source map from my SCSS file. How can i fix this? It does not generate map, i need it for better debugging

gulpfile.mjs

package.json

48 Replies

Tok124 (CSS Nerd)OP•4mo ago

Btw, i should probably also mention this mjs file was generated by chatgpt. i dont understand much about that honestly ^^

ἔρως•4mo ago

you should investigate a bit about vite, instead of trying to use gulp-ish in the worst possible way

Tok124 (CSS Nerd)OP•4mo ago

Well. Gulp seems pretty awesome to me. I don't know how to use vite. never used it and i know pretty much only the very basics of JavaScript. My main focus is CSS/SCSS. so it is a little difficult for me to move on to vite. but gulp seems to have all i need except from this source map thing that doesnt really want to work. But everything else is working perfectly 🙂

ἔρως•4mo ago

i will check that better in a bit

Tok124 (CSS Nerd)OP•4mo ago

Thank you 🙂

ἔρως•4mo ago

https://stackoverflow.com/questions/38437860/gulp-sass-source-map <-- have you tried one of these?

Stack Overflow

gulp sass source map

I need help adding source map to SASS compiler in the same CSS output folder. Till now, I got to install gulp-sourcemaps module within gulpfile.js but couldn't know success to bind sourcemaps.write...

Tok124 (CSS Nerd)OP•4mo ago

i tried to install this gulp-sourcemaps with node and i got some errors from this package... So i uninstalled it

ἔρως•4mo ago

which errors?

Tok124 (CSS Nerd)OP•4mo ago

i used this command npm install gulp-sourcemaps --save-dev and got this error

C:\xampp\htdocs\pugproject>npm install gulp-sourcemaps --save-dev
npm warn deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 44 packages, and audited 403 packages in 4s

37 packages are looking for funding
  run npm fund for details

3 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run npm audit for details.

C:\xampp\htdocs\pugproject>npm install gulp-sourcemaps --save-dev
npm warn deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 44 packages, and audited 403 packages in 4s

37 packages are looking for funding
  run npm fund for details

3 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run npm audit for details.

I tried npm audit fix that did not work so i had to do npm audit fix --force but i was afraid that it would mess something up with my project. So i uninstalled gulp-sourcemaps instead So yeah, it was a warning, not an error

ἔρως•4mo ago

that's a warning

Tok124 (CSS Nerd)OP•4mo ago

Yeah

ἔρως•4mo ago

warnings arent errors

Tok124 (CSS Nerd)OP•4mo ago

But something seems to be deprecated

ἔρως•4mo ago

so?

Tok124 (CSS Nerd)OP•4mo ago

So i guess it wont work if its deprecated?

ἔρως•4mo ago

you're using a tool that's mostly unused

Tok124 (CSS Nerd)OP•4mo ago

Oh hmm...

ἔρως•4mo ago

im surprised that gulp isn't deprecated at this point

Tok124 (CSS Nerd)OP•4mo ago

Haha well. Everything except generating source maps seems to work just fine ^^

ἔρως•4mo ago

are you using gulp 5?

Tok124 (CSS Nerd)OP•4mo ago

CLI version: 3.0.0 Local version: 5.0.0 So not sure if that means 3 or 5 ^^

ἔρως•4mo ago

me neither

Kevin Powell•4mo ago

vite is easier to use than gulp 😅 but you shouldn't worry about gulp making the source maps, it should be doing that as part of the process when compiling Sass,

Tok124 (CSS Nerd)OP•4mo ago

Well. It doesnt do that unfortunately 😂 All it does is creating a compiled CSS file ^^

Kevin Powell•4mo ago

hmm, I haven't used gulp in so long, I need to refresh my memory

Tok124 (CSS Nerd)OP•4mo ago

Yeah haha

Kevin Powell•4mo ago

In your file, where you have the stream, I see you have sourcmap set to true... hmm I wonder, in your return stream, try updating it to this: That should output the sourcemap in your root folder I think.

return stream
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('C:/xampp/htdocs/pugproject/css')) // Destination folder for CSS files
    .pipe(server.stream()) // Inject CSS changes without full page reload
    .on('end', () => console.log('SCSS compiled and CSS updated.'));

return stream
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('C:/xampp/htdocs/pugproject/css')) // Destination folder for CSS files
    .pipe(server.stream()) // Inject CSS changes without full page reload
    .on('end', () => console.log('SCSS compiled and CSS updated.'));

I do see you've hard coded all the locations, is there a reason it's all with the C:/... ?

Tok124 (CSS Nerd)OP•4mo ago

It was ChatGPT who wrote the whole thing. I have no idea how to write this myself haha. But yeah i also through it was kinda strange that it starts from C:/ ^^ But yeah i try this didnt really work

C:\xampp\htdocs\pugproject>gulp
[20:59:12] Using gulpfile C:\xampp\htdocs\pugproject\gulpfile.mjs
[20:59:12] Starting 'default'...
[20:59:12] Starting 'pug'...
[20:59:12] Finished 'pug' after 280 ms
[20:59:12] Starting 'sass'...
Compiling SCSS...
CSS is minified.
[20:59:12] 'sass' errored after 4.05 ms
[20:59:12] ReferenceError: sourcemaps is not defined
    at file:///C:/xampp/htdocs/pugproject/gulpfile.mjs:46:11
    at taskWrapper (C:\xampp\htdocs\pugproject\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (node:domain:432:15)
    at runBound (node:domain:443:12)
    at asyncRunner (C:\xampp\htdocs\pugproject\node_modules\async-done\index.js:52:18)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
[20:59:12] 'default' errored after 296 ms

C:\xampp\htdocs\pugproject>gulp
[20:59:12] Using gulpfile C:\xampp\htdocs\pugproject\gulpfile.mjs
[20:59:12] Starting 'default'...
[20:59:12] Starting 'pug'...
[20:59:12] Finished 'pug' after 280 ms
[20:59:12] Starting 'sass'...
Compiling SCSS...
CSS is minified.
[20:59:12] 'sass' errored after 4.05 ms
[20:59:12] ReferenceError: sourcemaps is not defined
    at file:///C:/xampp/htdocs/pugproject/gulpfile.mjs:46:11
    at taskWrapper (C:\xampp\htdocs\pugproject\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (node:domain:432:15)
    at runBound (node:domain:443:12)
    at asyncRunner (C:\xampp\htdocs\pugproject\node_modules\async-done\index.js:52:18)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
[20:59:12] 'default' errored after 296 ms

ἔρως•4mo ago

did you install the sourcemaps and then imported in the file?

Tok124 (CSS Nerd)OP•4mo ago

You mean i should run the command npm install gulp-sourcemaps --save-dev again? I will try Thank you guys, It seems to be working now, Now i have a main.css.map file 🙂

ἔρως•4mo ago

do you mind sharing with us what fixed it for you?

Tok124 (CSS Nerd)OP•4mo ago

Sure ! I just installed gulp-sourcemaps again, then i edited gulpfile.mjs to this

gulpfile.mjs

Tok124 (CSS Nerd)OP•4mo ago

Then i just run "gulp" in console and it just worked. something is deprecated in gulp-sourcemaps but works anyway ^^

ἔρως•4mo ago

the documentation is awful

ἔρως•4mo ago

https://gulpjs.com/docs/en/api/src/#sourcemaps <-- but try this instead of gulp-sourcemaps

src() | gulp.js

Creates a stream for reading Vinyl objects from the file system.

ἔρως•4mo ago

it should work without the deprecation warning

Tok124 (CSS Nerd)OP•4mo ago

Oh, alright thank you ! I will try this soon 🙂

ἔρως•4mo ago

good luck

Tok124 (CSS Nerd)OP•4mo ago

Thanks ! 🙂

ἔρως•4mo ago

now im curious about if it works or not

Tok124 (CSS Nerd)OP•4mo ago

Yeah well. To be honest i am not really 100% sure how to add this xD Do i need to install any additional node packages? Should i edit these paths? Where in the code should i add this?

ἔρως•4mo ago

well, you're looking at the unimportant part of it src and dest is where you should add it and supposedly, you don't need to install any new packages

Tok124 (CSS Nerd)OP•4mo ago

so i need to edit src and dest? Because i dont have any input/output folder in my project. So i guess i must edit thos src to my scss folder and the dest to my css folder?

ἔρως•4mo ago

yes you do

Tok124 (CSS Nerd)OP•4mo ago

Alright 🙂

ἔρως•4mo ago

just look into gulp.task('sass' ...

Tok124 (CSS Nerd)OP•4mo ago

alright 🙂 Well, i will let you know when i try this. It is 05:57 here in my country so too early for me to start working on this 😂

ἔρως•4mo ago

yeah, i know what you mean

Gaming

Programming

gulp add source maps from compiled scss file