6

ソースマップを生成するための gulp-sourcemaps とともに、gulp を使用してプロジェクトをビルドしています。

私はこのようないくつかのコンポーネントを持っています:

public
 |-- src
      |-- comp1
      |     |-- c1-a.js
      |     |-- c1-b.js
      |
      |-- comp2
            |-- c2-a.js
            |-- c2-b.js

それらを次の構造に組み込みたいと思います。

public
 |-- dist
 |    |-- comp1
 |    |     |-- c1-a.min.js
 |    |     |-- c1-a.min.js.map
 |    |     |-- c1-b.min.js
 |    |     |-- c1-b.min.js.map
 |    |
 |    |-- comp2
 |          |-- c2-a.min.js
 |          |-- c2-a.min.js.map
 |          |-- c2-b.min.js
 |          |-- c2-a.min.js.map
 |
 |-- src/

現在、私のgulpタスクはファイルを正しいパスに生成できます：

gulp.task('component', function() {
  gulp.src('./public/src/**/*.js', {base: './public/src'})
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('.', {
      includeContent: false,
      sourceRoot: '/src/' // here's the problem
    }))
    .pipe(gulp.dest('./public/dist'))
})

しかし、2 つの問題があります。

  1. sourceRootマップファイルが正しくありません: 期待していますが"sourceRoot":"/src/comp1/"、結果は"sourceRoot":"/src/"

  2. どちらもsourceMappingURL圧縮ファイルでは行いません: 期待していますsourceMappingURL=c1-a.min.js.mapが、結果はsourceMappingURL=../../comp1/c1-a.min.js.map

sourceMappingURLに**パーツを追加して修正するにはどうすればよいですか?sourceRoot

4

1 に答える 1

1

あなたがここで言ったことだから、あなたは次のsourceRootように設定されています：/src/

gulp.src('./public/src/**/*.js', {base: './public/src'})

あなたは設定{base: './public/src'}したので、行の下のすべてが に対する相対パスを扱うsrcので、それは正しいsourceRootです。ただし、マッピングの上部には、"sources":[...]パーツ内のパスに関連するパスが必要です (例: "sources":["comp1/c1-a.min.js.map"])。

それにもかかわらず、本当に sourceRoot を変更したい場合は、 gulp sourceRoot-sourcemaps のオプションを使用して変更できますが、それsourcesは間違っています。ただし、gulp-sourcemaps バージョン 2.0.0-alpha (package.jsonプレリリースであるため、明示的に要求する必要があります) には、mapSourcesそれらを変更できるオプションもあります。

同様に、sourceMappingURLPrefixまたはsourceMappingURLを使用して sourceMappingURL を変更できます。後者の場合、完全なオブジェクトを取得するので、、 などfileを調べることができます。または、 npm/gulp タスクをデバッグするときにVisual Studio Code が大きな助けになります。その記事では、ブレークポイントの設定方法、変数の検査方法などを説明しています。これは非常に便利だと思います。cwdbaseconsole.debug

于 2016-10-06T23:18:05.910 に答える