我使用gulp-sourcemaps
为我编译的sass生成源图。
这似乎适用于linux / mac计算机,但不适用于Windows。 源图中的内容与生成的css 相同,而不是实际的源代码。
P.S。我不想要发布并链接到实际的源文件。我希望它们嵌入到地图中。
这是我正在使用的完整gulp任务:
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'));
});
以下是文件夹结构:
├── gulpfile.js
|
├── resources
| ├── assets
| ├── sass
| ├── app.scss
|
├── public
| ├── css
| ├── app.css
| ├── app.css.map
我使用Node v0.12.4运行Windows 7。全局gulp
版本为3.9.0。
这是我的package.json
文件:
{
"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"
}
}
以下是app.scss
中的原始来源内容:
.div {
color: red;
.div {
color: blue;
}
}
这是生成的CSS文件:
.div{color:red}.div .div{color:blue}
/*# sourceMappingURL=../css/app.css.map */
最后,这里是源图文件(美化):
{
"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/"
}
从上面的所有内容可以看出,sourcemap文件中的sourcesContent
与生成的CSS完全相同。这使得源图很无用。
我在这里做错了什么,我该如何解决?
下载这些文件:gulp-sass-autoprefixer-sourcemaps.zip。
要测试:提取它,然后运行npm install && gulp css
。