WPGulp: Sourcemaps not working
Bug Report
Expected Behavior
Displaying the correct sources in Chrome Inspector.
Actual Behavior
Displaying just partly main scss file (which is wrong) and partly the compiled css file as sources.
Steps to Reproduce
npm start
> your-project@1.0.0 start /Users/dave/Documents/MAMP/htdocs/vor-druck.test/wp-content/themes/vordruck
> gulp
[17:44:32] Requiring external module @babel/register
[17:44:34] Using gulpfile ~/Documents/MAMP/htdocs/vor-druck.test/wp-content/themes/vordruck/gulpfile.babel.js
[17:44:34] Starting 'default'...
[17:44:34] Starting 'styles'...
[17:44:34] Starting 'vendorsJS'...
[17:44:34] Starting 'customJS'...
[17:44:34] Starting 'images'...
[17:44:34] Starting 'browsersync'...
[17:44:34] Starting '<anonymous>'...
[17:44:34] Finished 'browsersync' after 319 ms
[17:44:34] Finished 'styles' after 374 ms
[Browsersync] Proxying: http://vor-druck.test
[Browsersync] Access URLs:
---------------------------------------
Local: http://localhost:3000
External: http://192.168.178.20:3000
---------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
---------------------------------------
[17:44:36] gulp-notify: [Gulp notification]
✅ ===> CUSTOM JS — completed!
[17:44:36] Finished 'customJS' after 2.46 s
[17:44:38] gulp-notify: [Gulp notification]
✅ ===> VENDOR JS — completed!
[17:44:38] Finished 'vendorsJS' after 4.41 s
[17:44:41] gulp-imagemin: Minified 0 images
[17:44:42] gulp-notify: [Gulp notification]
✅ ===> IMAGES — completed!
[17:44:42] Finished 'images' after 7.98 s
node -v: v10.12.0npm -v: 6.4.1- WPGulp V. 2.8.0
Then, specify:
- Operating system: OSX 10.11.6
- Browser and version (if relevant): Google Chrome (Mac) Version 69.0.3497.100
Any suggestions what’s going wrong?
Besides this little flaw I’m really glad working with WPGulp!
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 4
- Comments: 25 (2 by maintainers)
I simply commented line 128 & 129 and things just worked 😃 //.pipe( sourcemaps.write({ includeContent: false }) ) //.pipe( sourcemaps.init({ loadMaps: true }) )
Anything I should know with this quick fix?
I did some further testing. I guess the reason is a problem with gulp-autoprefixer (as described here). Removing the piping to autoprefixer solves the problem (except having a new one without autoprefixer).
As AntonKeller wrote
By passing false to includeContent, you’re telling the sourcemaps to use the original files.
According to the gulp-sourcemaps documentation “Including the content is the recommended way, because it “just works”. When setting this to false you have to host the source files and set the correct sourceRoot.”
Since wpgulp isn’t including a sourceRoot value, then of course this isn’t going to work.
commenting out .pipe( sourcemaps.init({ loadMaps: true }) ) is also the right thing to do because we don’t want to load existing source maps. We want to load the sourcemaps that we just created.
More clues: At the bottom of the generated css files, there are 2 sourceMappingURL. After removing the 2nd one manually, it works fine.
/# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjoz … /# sourceMappingURL=style.css.map */
The style.css.map will be changed if I comment .pipe( autoprefixer( config.BROWSERS_LIST ) ). So it seems to be something wrong of sources when enabling autoprefixer. Before comment: {“version”:3,“sources”:[“style.scss”,“style.css”,“_normalize.scss”],… After comment: {“version”:3,“file”:“style.css”,“sources”:[“style.scss”,“variables-site/_variables-site.scss”,“variables-site/_colors.scss”,“variables-site/_typography.scss”,“variables-site/_structure.scss”,“variables-site/_columns.scss”,“mixins/_mixins-master.scss”,“_normalize.scss”,“typography/_typography.scss”,“typography/_headings.scss”,“typography/_copy.scss”,“elements/_elements.scss”,“elements/_lists.scss”,“elements/_tables.scss”,“forms/_forms.scss”,“forms/_buttons.scss”,“forms/_fields.scss”,“navigation/_navigation.scss”,“navigation/_links.scss”,“navigation/_menus.scss”,“modules/_accessibility.scss”,“modules/_alignments.scss”,“modules/_clearings.scss”,“site/secondary/_widgets.scss”,“site/_site.scss”,“site/primary/_posts-and-pages.scss”,“site/primary/_comments.scss”,“modules/_infinite-scroll.scss”,“media/_media.scss”,“media/_captions.scss”,“media/_galleries.scss”],
Happy to accept a fix via PR. I am on vacations.
Strange. Something must have broken in an update or so. Would love to receive a PR for this.
@antonkeller fix worked for me on at least one test project. Thx
I noticed that I have exactly the same problem. SourceMap only recognizes the main style file. It does not recognize the structure of individual .scss files. My specs. node -v: v10.12.0 npm -v: 6.4.1 WPGulp V. 2.8.0 Operating system: OSX 10.13.6