The problem
I'm using gulp-sourcemaps
to generate sourcemaps for my compiled sass.
This seems to work on linux/mac computers, but not on Windows. Instead of the actual source sass, the content in the sourcemap is the same as the generated css.
P.S. I do not want to publish and link to the actual source files. I want them embedded in the souremap.
Details
Here's the full gulp task I'm using:
var autoprefixer = require('gulp-autoprefixer');
var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function () {
gulp.src('resources/assets/sass/app.scss')
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(autoprefixer())
.pipe(rename('css/app.css'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('public'));
});
And here's the folder structure:
├── gulpfile.js
|
├── resources
| ├── assets
| ├── sass
| ├── app.scss
|
├── public
| ├── css
| ├── app.css
| ├── app.css.map
Even more details
I'm running Windows 7 with Node v0.12.4. The global gulp
version is 3.9.0.
Here's my package.json
file:
{
"private": true,
"devDependencies": {
"gulp-autoprefixer": "^2.3.1",
"gulp": "^3.9.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.0.1",
"gulp-sourcemaps": "^1.5.2"
}
}
Here's the original source content in app.scss
:
.div {
color: red;
.div {
color: blue;
}
}
Here's the generated CSS file:
.div{color:red}.div .div{color:blue}
/*# sourceMappingURL=../css/app.css.map */
And finally, here's the sourcemap file (prettified):
{
"version":3,
"sources":["app.css"],
"names":[],
"mappings":"AAAA,KAAK,SAAS,CAAC,UAAU,UAAU,CAAC",
"file":"css/app.css",
"sourcesContent":[".div{color:red}.div .div{color:blue}\n"],
"sourceRoot":"/source/"
}
Conclusion
As you can see from all the above, the sourcesContent
in the sourcemap file is simply the same as the generated CSS. This makes the sourcemap pretty useless.
What am I doing wrong here, and how can I fix it?
Here's a download of these files: gulp-sass-autoprefixer-sourcemaps.zip.
To test: extract it, then run npm install && gulp css
.