ソースマップの位置が間違っているか、パスが正しくない

Question

私はgulp sassとgulpのソースマップを取得しています。私は、出力ファイル（dist/css/index.css）とそのインデックスファイル（dist/css/index.css.map）のための別々のソースマップを生成するために、サスペンドファイル（src/sass/index.scss） sourceRootはプロジェクトベース（絶対パス：/ home/damon/projects/test）に設定され、sourcemapエントリはそのパスとの相対パスになります。ここで

は、私が試したものです：

試み1：ゴクゴク-サスからストレートのコード例：

var sassEntry = 'src/sass/index.scss'; 
gulp.src(sassEntry) 
.pipe(sourcemaps.init()) 
.pipe(sass().on('error', sass.logError)) 
.pipe(sourcemaps.write()) 
.pipe(gulp.dest('dist/css')); 

結果：それは右だ場合、私は言うことができないので、これはCSSファイルにsourcemapをインライン化か否か。

試み2：

別のファイルに

gulp.src(sassEntry) 
.pipe(sourcemaps.init()) 
.pipe(sass().on('error', sass.logError)) 
.pipe(sourcemaps.write('.')) 
.pipe(gulp.dest('dist/css')); 

をそれを書くアウトカムは：別のsourcemapを書き込みますが、sourceRootは '/ソース/' と言う（WTFはつまり、それは決して存在しないと私はありません？！それを構成した） とパスはすべて、プロジェクトベースではなく、私のブラウザがソースファイルの場所を見つけようとすると無意味になる予定の、Sassエントリファイルに関連しています。

試み3：

gulp.src(sassEntry) 
.pipe(sourcemaps.init()) 
.pipe(sass().on('error', sass.logError)) 
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname})) 
.pipe(gulp.dest('dist/css')); 

アウトカム

：sourcerootがいいです、今の私の作業フォルダで、コンテンツが含まれていないいいです、：sourcerootを修正しよう（偽も私はincludeContentを見つけました）私のマップはまだ役に立たないので、しかしsourcemap内のファイルは、まだありませんsourceRootにSASSエントリファイルに関連している

試み4：セットgulp.srcベース

gulp.src(sassEntry, { base: __dirname }) 
.pipe(sourcemaps.init()) 
.pipe(sass().on('error', sass.logError)) 
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname})) 
.pipe(gulp.dest('dist/css')); 

結果：怒り狂って、gulp.srcのベースを設定すると、sourcemapが修正されます - sourceRootはまだ正しいですし、ソースファイルのパスはsourceRootと相対的ですが、dist/css/src/sass/index.cssに出力します。 WTF！

試み5：絶対パスを使用

gulp.src(sassEntry, { base: __dirname }) 
.pipe(sourcemaps.init()) 
.pipe(sass().on('error', sass.logError)) 
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname})) 
.pipe(gulp.dest(__dirname + '/dist/css')); 

結果：変化なし、それはまだDISTに同じ深い構造に出力します。

誰かがこれを行う方法について私に啓発できるなら、私は永遠に感謝します。

Answer 1

あなたの試み4は、間違った場所に場所を除いて、あなたが望むすべて結果のファイルを行いますのでsourcemapsが生成された後、最も簡単な修正はちょうどgulp-renameでその場所を変更するには、次のようになります。

gulp.src(sassEntry, { base: __dirname }) 
.pipe(sourcemaps.init()) 
.pipe(sass().on('error', sass.logError)) 
.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: __dirname})) 
.pipe(rename({dirname:''})) 
.pipe(gulp.dest('dist/css')); 

Answer 2

スヴェンですが答えは完全に良いです、私は自分自身の質問に対する答えを見つけました。これは、私が避けようとしていた塊の仕組みをより深く理解することで見つけ出しました。 {ベース：__dirname}

はgulp.srcにあり、一致した各ファイルにはベースからの完全なパスがあり、ベースを設定した場所からの完全な相対パスで出力されます。あなたはそれをやろうとしているものについての詳細を理解すれば

gulp.src(sassEntry, { base: __dirname }) 
.pipe(sourcemaps.init()) 
.pipe(sass().on('error', sass.logError)) 
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname})) 
.pipe(flatten()) 
.pipe(gulp.dest(__dirname + '/dist/css')); 

簡単：私は終わったソリューションは、私の最終的な機能は、このように見えたので、ゴクゴク-平らに、パイプライン内のファイルからこれらの相対パスを削除使用していました私は推測する。

Answer 3

実際、このことに関するgulp-sourcemapsには多くの問題があります。 SASSとStylusは同じ動作をします。今では、

https://github.com/floridoo/gulp-sourcemaps/issues