問題タブ [gulp-sourcemaps]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
975 参照

javascript - 変数のデバッグが gulp ソースマップ + uglify で機能しない

JavaScriptをバンドルするための次のgulpタスクがあります。

Chrome 開発ツールでこれを実行すると、ソースマップが見つかり、ブレークポイントが機能しますが、変数をデバッグできません

次のAngularコードのチャンクの例を見てください:

の値を確認するためにブレークポイントを追加すると$animateProvider、次のようになります。

ここに画像の説明を入力

しかし、Uglify で変数マングリングをオフにすると、次のようになります。

それは動作します:

ここに画像の説明を入力

そのため、Uglify が名前をマングルした後、gulp-sourcemaps プラグインは変数を追跡できないようです。

他の誰かが同じ問題を抱えたり、解決策を知ったりできますか?

0 投票する
1 に答える
843 参照

node.js - ソースマップの「sources」配列は、実際の SCSS ファイルではなく「../../stdin」にリンクしています

私はnpm update今日走ったが、その後に起こったのは惨事だ。パッケージをインストールするのに苦労しましたが、すべてが適切な場所にあるように見えたのでgulp、SCSS コードを CSS にコンパイルするタスクを開始しました。

このコードは私の問題を再現します:

を介してこのコードを実行するgulp defaultと、次の結果が得られます。

www/sass/example.scss

www/css/example.css

www/css/example.css.map

sources生成されたソース マップの配列には、"../../stdin/"代わりに"example.scss"! しかし、なぜ?

0 投票する
1 に答える
1309 参照

sass - クロムが私のscssソースマップを理解しないのはなぜですか?

次の名前のscssソースファイルがstyle.scssあります/style

そして、次の名前の別のscssソースファイルreset.scssが存在します/style

これらは sass によってコンパイルされ、style.min.css内に存在するソース マップが使用され/styleます。

これは結果のマップ ファイルで、次の場所にstyle.min.css.mapあります/style

私はsassを呼び出すためにgulpを使用しています。関連する構成は次のとおりです。

WebStorm 11.0.1 はこれを完全に理解しているようです。

Chrome DevTools は、マッピングを正しく理解できません。それは明らかに努力しています。ただし、すべてのマッピングreset.scssは、正しいファイルと場所ではなく、さまざまな場所を指しています。@importを の実際のコンテンツに置き換えて両方のファイルを手動で結合するとreset.scss、マッピングは chrome で正しく機能し、 内の正しい場所を指しますstyle.scss

ここで何が起こっているのでしょうか?

編集: Microsoft Edge (Windows 10 の新しい IE) は、ブラウザー内の開発ツール内でマッピングを正しく理解します。

編集 2: Firefox は、まったく同じ方法で Chrome と同じ問題を経験しています。

編集 3:別の scss ソース ファイルを追加しましたtest.scss:

次に、これをファイルにインポートしました。style.scssファイルは次のようになります。

Chrome は複数のソース ファイルがあることを認識しているようですが、マップされた場所が正しくなく、style.scss決してポイントされません。

繰り返しになりますが、Edge と Webstorm は完全に機能します。Chrome と Firefox には同じ問題があります。

0 投票する
1 に答える
344 参照

gulp - gulp sourcemapsが期待されるsourcemapを書き込んでいない

タスクは次のとおりです。

問題は、ソース マップが次のようになっていることです。

これは私が期待したものではありません。クロム開発者でスタイルが元の少ないソースにマップされるブートストラップに似たものが欲しいです。私のソースマップは、sass パイプの結果であると想定している stdin にマッピングされているだけです。gulp-sourcemaps は最後の操作のマップのみを作成していると思います...

0 投票する
0 に答える
2019 参照

javascript - Chrome に読み込まれているソース マップをデバッグする

縮小中に JavaScript ファイルのソース マップを生成します。マップ ファイルは、マップ ファイルの隣にある縮小された JS ファイルからの相対 URL を使用して参照されます。の最後にあるコメントの例を次に示しapp-e47a6637.jsます。

ソース マップの解像度は、Firefox で期待どおりに機能します。ただし、Chrome はマップ ファイルをロードしません。

追加情報:

  • もちろん、JS ソースマップは設定で有効になっています。
  • Chromeとサーバーの間にプロキシを入れてみました。Chrome はマップ ファイルを要求しません。
  • gulp-sourcemapsマップファイルを生成するために使用します。
  • Chrome のワークスペース機能を使いたくありません。元のソースファイルを表示したいだけです。

Chrome でソース マップを有効にするにはどうすればよいですか?

0 投票する
0 に答える
613 参照

gulp - Gulp、Typescript、および Uglify: エラー: ファイルがソース マップにありません

私が現在開発中のアプリケーションでは、Gulp を学習し、ソース マップを使用しています。アプリケーションは Typescript と Javascript のハイブリッドです。ファイルは連結され、縮小されます。ファイルを渡すときgulp-uglifyにエラーが発生します。

これは、 を使用した場合にのみ発生しgulp-sourcemapsます。パイプラインでソース マップ生成呼び出しを削除すると、問題は発生しませんが、ソース マップもありません。

知っておくと便利かもしれませんが、typescript は に./js/ts/、javascript は にあり./js/Appます。

0 投票する
1 に答える
844 参照

javascript - JS ストリームをマージするときにソースマップを保持する (lib 依存関係を browserify バンドルと連結するため)

私の現在のワークフローでは、browserify バンドルを作成する必要がありますが、非 commonjs js ライブラリをファイルの先頭に連結してグローバル変数を公開すると同時に、http リクエストの数と js ファイルのサイズを削減したいと考えています。(これらのライブラリの一部は、他のバンドルでも必要になる場合があります)

私は現在、browserify バンドルを作成し、必要なライブラリを出力ファイルの先頭に連結する gulp タスクを持っていますが、ストリームをマージする時点で、ソースマップが壊れていて、Web インスペクタであることがわかりました。結果のマップには、個別の js モジュールではなく、事前にブラッシュアップされた browserify バンドルのみが表示されます。

(複数のバンドルが存在する場合、私のタスクは設定 json 配列も読み取って複数のバンドルを構築することに注意してください)

マージ前のストリームからソースマップを保存する方法はありますか? true に設定されている loadmaps が機能していないようです。

また、健全性チェックとして、私のアプローチは賢明と見なされますか? 目的の結果を達成するための非常に簡単な方法がありませんか?