1

私は gulp sass と gulp sourcemaps を取得して、自分がやりたいことを正確に実行しようとしてきましたが、難しいと感じています。sass エントリ ファイル (src/sass/index.scss) を取得し、出力ファイル (dist/css/index.css) とそのインデックス ファイル (dist/css/index.css.map) の別のソースマップを生成したいこれには、プロジェクト ベース (絶対パス: /home/damon/projects/test) に設定された sourceRoot と、そのパスに関連する sourcemap エントリがあります。

これが私が試したことです：

試行 1: gulp-sass からの直接的なコード例:

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 ファイルにインライン化されるため、それが正しいかどうかわかりません。

試行 2: 別のファイルに書き込む

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

結果: 別のソースマップを書き込みますが、sourceRoot には '/sources/' と表示され (WTF は?!、それは存在せず、構成したこともありません)、パスはすべて、プロジェクト ベースではなく、sass エントリ ファイルからの相対パスです。これは、ブラウザがソース ファイルを見つけようとするときにも意味がありません。

試行 3: sourceroot の修正を試みます (また、includeContent: false が見つかりました)

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 は私の作業フォルダーになりました。コンテンツは含まれていませんが、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 に設定するとソースマップが修正されます - sourceRoot は依然として正しく、ソース ファイルのパスは sourceRoot に相対的ですが、dist/css/src/sass/index.css に出力されるようになりましたが、これは間違っています。なんてこった！

試行 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 の同じ深い構造に出力されます。

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

4

2 に答える 2

2

Svenの答えは完全に良いですが、gulpの仕組みをより深く理解することで（私が避けようとしていた）、自分の質問に対する答えも見つけました.gulpは一致した各ファイルをパスで保存しているようです。

{ ベース: __dirname }

gulp.src では、一致した各ファイルにベースからのフルパスが含まれるようになり、ベースを設定した場所からのフル相対パスで出力されます。最終的な解決策は、パイプライン内のファイルからこれらの相対パスを削除する gulp-flatten を使用することだったので、最終的な関数は次のようになりました。

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'));

それが何をしようとしているのかについてもっと理解すれば、簡単だと思います。

于 2016-08-28T03:16:04.573 に答える