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
bluetooth
openstack
cplex
alfresco
gis
adb
rsync
ojdbc
onelogin
u-sql
flask-wtforms
quickfix
decomposition
try-catch
clojurescript
undefined
oracle-coherence
flux
kryo
one-hot-encoding
riot.js
ehcache
tibco-mdm
shopware
buildbot
underflow
semantic-analysis
file-rename
functor
wallpaper
io-redirection
twitch
trim
dism
broadcastreceiver
dynamic-reports
arena-simulation
s
scrollable
network-flow
termination
multipeer-connectivity
typescript1.8
mu
lift-json
crypt
dtexec
mcafee
iso8601
orthogonal
vtigercrm
instant
libpng
savon
mikroc
skobbler-maps
gridview-sorting
suffix-tree
ipconfig
php-parse-error
cloudbees
rtbkit
maven-tomcat-plugin
python-3.2
mutation-observers
computer-algebra-systems
rgeo
deis
microbenchmark
twirl
sankey-diagram
apache-commons-fileupload
census
system.reflection
python-green
block-device
dd
qcodo
document-classification
php-5.4
xojo
project-planning
sgen
wp-query
htmlcleaner
undefined-reference
cloud-connect
prettify
dexterity
dotnetnuke-5
batterylevel
gridcontrol
pushbackinputstream
itmstransporter
mt
rdoc
labwindows
buildr
whoosh
window-management
cinema-4d
calling-convention
krl
gallio
sproutcore-2
routedevent
grid-system
signal-handling
misv

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App