gulp-sourcemaps


gulp sourcemaps not pointing to sass but css


I have this gulp setup
require('es6-promise').polyfill();
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var mmq = require('gulp-merge-media-queries');
var prefix = require('gulp-autoprefixer');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
var autoPrefixerOptions = {
browsers: ['last 2 version', '> 1%', 'ie 9']
};
gulp.task('sass', function() {
gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(mmq())
.pipe(prefix(autoPrefixerOptions))
.pipe(sourcemaps.write('../maps', {includeContent: false, sourceRoot: '../../ui-dev/scss'}))
.pipe(gulp.dest('../Content/v2.0'));
});
gulp.task('watch', function() {
gulp.watch('./scss/**/*.scss', ['sass']);
});
gulp.task('default', ['sass', 'watch']);
my structure is as follows
|-Content
|-maps
|-v2.0
|-- compiled css files here
|-dev
|-gulpfile.js
|-scss
|-.scss files
everything builds as expected except that all my .map files reference the .css in Content/v2.0 directory and not the .scss files in the dev folder.
What I understand source mapping to be is that it should point to a line number in the original file (being scss) for easier debugging.
How do I fix this or am I missing something?
UPDATE
So I realized I was missing the sourceRoute but because my sass is broken up in hundreds of files in directories a couple levels deep, browsers still don't pick up the maps because the path reads "../../ui-dev/scss" in all the maps.
How can I get the correct path for each source file?
I just ended up compiling each folder separately and defining the path the source like that until I find a better way.

Related Links

When to use {loadMaps: true} setting in gulp sourcemaps initialization?
gulp sourcemaps not pointing to sass but css

Categories

HOME
asp.net-core
single-sign-on
pycharm
tinymce
grep
routes
rubygems
ojdbc
ezpublish
pivotal-cloud-foundry
cross-validation
ssl-client-authentication
adobe-analytics
user-input
qt-creator
zend-framework3
timeout
alignment
gz
designer
libtiff
footer
jqwidget
tokenize
opennlp
cas
internet-explorer-9
brunch
strncpy
wtx
atlassian-crucible
socialengine
nameservers
data-manipulation
titanium-mobile
hybridauth
mozilla
amazon-kinesis-kpl
optix
acoustics
prolog-setof
slickedit
gcsfuse
imanage
mcafee
jquery-filter
visual-c++-2008
firmata
deadbolt-2
radtreelist
login-control
freedesktop.org
pervasive-sql
qtableview
jqgrid-formatter
sframe
apache-commons-net
relocation
flask-cors
navigationservice
funcunit
xceed-datagrid
poller
bundles
typo3-neos
stxxl
openlaszlo
page-layout
batterylevel
ember-app-kit
html-editor
factory-method
regsvr32
uiviewanimation-curve
semantic-diff
xdomainrequest
android-sdk-2.1
yslow
dmx512
forums
database-management
firefox4
photoshop-cs4
msdev
3gp

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App