0

问题

我gulp-sourcemaps用来为我编译的 sass 生成源映射。

这似乎适用于 linux/mac 计算机，但不适用于 Windows。sourcemap 中的内容与生成的 css 相同，而不是实际的源 sass。

PS 我不想发布和链接到实际的源文件。我希望它们嵌入到源图中。

细节

这是我正在使用的完整 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/"
}

结论

从以上所有内容可以看出，sourcesContentsourcemap 文件中的 与生成的 CSS 完全相同。这使得源映射非常无用。

我在这里做错了什么，我该如何解决？

以下是这些文件的下载：gulp-sass-autoprefixer-sourcemaps.zip。

测试：提取它，然后运行npm install && gulp css​​.

4

0 回答 0