0

問題

gulp-sourcemapsコンパイル済みの sass のソースマップを生成するために使用しています。

これは、Linux/Mac コンピューターでは機能するようですが、Windows では機能しません。実際のソース sass の代わりに、ソースマップの内容は生成された css と同じです。

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/"
}

結論

上記のすべてからわかるようにsourcesContent、ソースマップ ファイル内の は、生成された CSS とまったく同じです。これにより、ソースマップはかなり役に立たなくなります。

ここで何が間違っていますか?どうすれば修正できますか?

これらのファイルのダウンロードは次のとおりです: gulp-sass-autoprefixer-sourcemaps.zip。

テストするには: 抽出してから実行しnpm install && gulp cssます。

4

0 に答える 0