問題タブ [gulp-sourcemaps]

そのため、Autoprefixer は更新された postcss バージョンを使用するように私を悩ませてきたので、Gulp ファイルを更新しようとしています。

問題は、すべての例が最初のステップとして Sass を統合していないことです。私はgulp-ruby-sassを使っています。

sass ディレクトリで sass タスクを実行すると (そこで処理する必要がある 2 つの scss ファイルがあります)、これは機能し、dest ディレクトリに 2 つの css ファイルを出力します。

しかし、私の質問は、次の部分をどのように統合して、CSS を autoprefixer に渡し、ソースマップを生成するかということです。これを順番に次に実行すると、これは object is not a function エラーで爆発します:

私はそれらをシーケンスとして実行しようとしていましたが、むしろそれらを統合したいと思います:

ruby-sass、autoprefixer、および sourcemap をすべて連携させるためのパイプをまとめることはできません。

アップデート：

OK、タスクを分離したままにしておくことにした場合でも (@patrick-kostjens によって以下に提案されているように)、Autoprefixer タスクを実行すると、次のエラーが発生します。

そして、提案どおり autoprefixer = autoprefixer-core を試しました。

ガルプを使用しています。

1つまたは複数のJSファイル（jQueryなど）を1つにまとめて縮小し、配布フォルダーに書き込みたいと思います。

これは私がそれを行う方法です：

関数：

場所がよくわからないのですがsourcemaps.init()…

複数 (私の場合は 2 つ) のマップ ファイルを作成する必要がありますか (ブラウザーでサポートされている場合は便利です)、または 1 つだけ ( /maps/myModule.map ) を作成する必要がありますか?

Gulp を使用して、元の SASS ファイルを指すソースマップを使用して SASS からトランスパイルされた CSS を生成できます。また、縮小された CSS をデバッグするためのソースマップを生成することもできますが、これまでのところ、その方法を理解できていません (可能な場合もあります) Gulp を使用してソースマップを生成することで、SASS からトランスパイルされて縮小された CSS をデバッグでき、ベンダープレフィックスなどを追加することもできます。トランスパイルとミニフィケーションの両方を実行すると、.scss ファイルが生成されます。

以下のこのコードは、ブラウザーが取得して読み取る出力としてソースマップを生成しますが、前に述べたように、Chrome デバッグ ツールは元の .scss ファイルの間違ったファイル/行を指しています。

これが私の css-compile Gulp タスクです。

私は現在、TypeScript と ES6 (babel を使用) についてさらに学ぶことができるサイド プロジェクトを作成しています。

TypeScript で ES6 を使用したかったので、次のワークフローに落ち着きました。

Typescript (ES6) -> Babel (ES6) -> ES5

現在、Gulp を使用してこれらすべてを自動化していますが、ソースマップを適切に生成するのに苦労しています。このスタイルは /r/typescript のユーザーから提案されたので、それが可能かどうかさえわかりません。

とにかく、ここに私の現在のgulpタスクがあります

私は多くの異なるアプローチを試みましたが、どれもうまくいきません。VSCode でデバッグすると、アプリのエントリポイント:build/server/index.jsソース ファイルsrc/server/index.tsが正しく読み込まれ、検出されます。

ただし、VSCode が別のファイルにステップインしようとすると、*.ts ファイルをbuild/server/utils/logger/index.js探すsrc/server/utils/logger/index.js必要があるため、見つからないファイルを探します。

それで、私は何を間違っていますか？それともこれは可能ですか？私はこれを約5時間見つめています。したがって、どんな洞察も素晴らしいでしょう。

また、VSCode 0.9.x は を表示し'.../.js' file not found、VSCode 1.0 はサイレントに失敗します。

私のtsconfig.json、それはによって渡されます$.typescript.createProject()

.babelrc

関連するnpmパッケージは次のとおりです

編集: gulp-sourcemaps を調査しましたが、babel を使用していない場合、sourcemaps は適切に機能します。(関係のない情報はすべて削除しました)

src/server/up/up2/four.ts - バベルなし

sourceMap.sources適切なソースファイルがどのようにリストされているかに注意してくださいup/up2/four.ts

これは、gulp-babel をタスクに追加した場合の例です。

src/server/up/up2/four.ts - Babel を使用

typescript ファイルsourceMap.sourcesの代わりに が誤って表示されることに注意してください。four.js

不思議なことに、typescript ファイルがルート ディレクトリsrc/serverにある限り、ソース マップは問題なく作成されます。

src/server/two.ts - Babel を使用