問題タブ [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.
javascript - 変数のデバッグが gulp ソースマップ + uglify で機能しない
JavaScriptをバンドルするための次のgulpタスクがあります。
Chrome 開発ツールでこれを実行すると、ソースマップが見つかり、ブレークポイントが機能しますが、変数をデバッグできません。
次のAngularコードのチャンクの例を見てください:
の値を確認するためにブレークポイントを追加すると$animateProvider
、次のようになります。
しかし、Uglify で変数マングリングをオフにすると、次のようになります。
それは動作します:
そのため、Uglify が名前をマングルした後、gulp-sourcemaps プラグインは変数を追跡できないようです。
他の誰かが同じ問題を抱えたり、解決策を知ったりできますか?
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"
! しかし、なぜ?
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 には同じ問題があります。
gulp - gulp sourcemapsが期待されるsourcemapを書き込んでいない
タスクは次のとおりです。
問題は、ソース マップが次のようになっていることです。
これは私が期待したものではありません。クロム開発者でスタイルが元の少ないソースにマップされるブートストラップに似たものが欲しいです。私のソースマップは、sass パイプの結果であると想定している stdin にマッピングされているだけです。gulp-sourcemaps は最後の操作のマップのみを作成していると思います...
javascript - Chrome に読み込まれているソース マップをデバッグする
縮小中に JavaScript ファイルのソース マップを生成します。マップ ファイルは、マップ ファイルの隣にある縮小された JS ファイルからの相対 URL を使用して参照されます。の最後にあるコメントの例を次に示しapp-e47a6637.js
ます。
ソース マップの解像度は、Firefox で期待どおりに機能します。ただし、Chrome はマップ ファイルをロードしません。
追加情報:
- もちろん、JS ソースマップは設定で有効になっています。
- Chromeとサーバーの間にプロキシを入れてみました。Chrome はマップ ファイルを要求しません。
gulp-sourcemaps
マップファイルを生成するために使用します。- Chrome のワークスペース機能を使いたくありません。元のソースファイルを表示したいだけです。
Chrome でソース マップを有効にするにはどうすればよいですか?
gulp - Gulp、Typescript、および Uglify: エラー: ファイルがソース マップにありません
私が現在開発中のアプリケーションでは、Gulp を学習し、ソース マップを使用しています。アプリケーションは Typescript と Javascript のハイブリッドです。ファイルは連結され、縮小されます。ファイルを渡すときgulp-uglify
にエラーが発生します。
これは、 を使用した場合にのみ発生しgulp-sourcemaps
ます。パイプラインでソース マップ生成呼び出しを削除すると、問題は発生しませんが、ソース マップもありません。
知っておくと便利かもしれませんが、typescript は に./js/ts/
、javascript は にあり./js/App
ます。
javascript - JS ストリームをマージするときにソースマップを保持する (lib 依存関係を browserify バンドルと連結するため)
私の現在のワークフローでは、browserify バンドルを作成する必要がありますが、非 commonjs js ライブラリをファイルの先頭に連結してグローバル変数を公開すると同時に、http リクエストの数と js ファイルのサイズを削減したいと考えています。(これらのライブラリの一部は、他のバンドルでも必要になる場合があります)
私は現在、browserify バンドルを作成し、必要なライブラリを出力ファイルの先頭に連結する gulp タスクを持っていますが、ストリームをマージする時点で、ソースマップが壊れていて、Web インスペクタであることがわかりました。結果のマップには、個別の js モジュールではなく、事前にブラッシュアップされた browserify バンドルのみが表示されます。
(複数のバンドルが存在する場合、私のタスクは設定 json 配列も読み取って複数のバンドルを構築することに注意してください)
マージ前のストリームからソースマップを保存する方法はありますか? true に設定されている loadmaps が機能していないようです。
また、健全性チェックとして、私のアプローチは賢明と見なされますか? 目的の結果を達成するための非常に簡単な方法がありませんか?