問題タブ [gulp-sourcemaps]

Debian Wheezy を実行しています。ここ数日、gulp で遊んでいます。私の問題は、ブラウザーをファイルに直接向けると (file:///...) ソース マップが次のように正しくリンクされることです。

しかし、localhost/... を指定すると、次のようになります。

Iceweasel では、すべてが完璧に機能します。すべての設定をトリプルチェックしたので、その部分は問題ありません。セキュリティ上の問題かもしれないと思ったので、ルートを再帰的に chmod しましたが、それは問題ではありません。

これは私のフォルダ構造です：

これは私の gulpfile.js です:

次のようなscssファイルを取得しました。

index.scss

_test.scss

ルート フォルダーで gulp コマンドを実行すると、次のようになります。

index.css

Chromiumの問題でしょうか？考えられることはほぼすべてやってみた。Iceweasel に取り組んでいるという事実は、それが特定の Chromium の問題だと思わせますが、あきらめるのはとても難しいです。:D

ライブラリ用に、次のCSS Source Mapファイルを生成しようとしています。gulp.jsBootstrapCSS

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

bower = 'main-bower-files' が必要 sourcemaps = 'gulp-sourcemaps' が必要 cssmin = 'gulp-minify-css' が必要 gulpFilter = 'gulp-filter' が必要

そしてindex.html私は持っています：

ただし、Chromeで「元の」bootstrap.cssファイルを取得できません（ソースマップがアクティブになっています）

カスタム.lessファイルに対して次のように実行すると、元の「styles.less」ファイルが取得されます。

私のgulpfile.jsでは、リリース タスクでソースマップを縮小して有効にしようとしています。

構成変数に基づいて、さらにアクションをストリームにパイプしようとしています。コンディションのチェックは を使用していgulp-if-elseます。私の依存関係のセット（関連するもののみ）は以下のとおりです

これが私が問題を抱えているコードです。3 つの呼び出しを個別に保持するifelse pipeと (現在はコメントアウトされています)、ソースが醜くなり、ソースマップが期待どおりに作成されます。

条件を繰り返すときれいに感じられないので、縮小機能に置き換えてみましたが、動作が奇妙です。

1. 相対パスを指定しない場合sourcemaps.write、js ファイルにはインライン ソースマップがあります。
2. 相対パスを使用すると、ソースが醜くなり、js には sourcemap コメントが指定されてapp.js.mapいますが、app.js.mapそれ自体は生成されません。

私は gulp (そして実際にはノード) を拾い上げたところ、私が推論できないように見えるこの奇妙な動作に遭遇しました。誰かが私のためにそれを分かりやすく説明できれば、大きな助けになるでしょう。

更新: 完了gulpfile.js

UPDATE2: を追加しましgulp-filelogた。pipe(filelog("minify"))およびpipe(filelog("outer"))ストリームに追加されました。filelogfn の内部では 2 つのファイルを出力しますが、外部では 1 つのファイルのみを出力します。2 番目のファイルがドロップ/無視されるのはなぜですか? 私は何が欠けていますか？

私は次のようなGulpタスクを持っています:

.css ファイルとソース マップ ファイルが作成されます。ただし、ソース マップにはコンテンツ ("sourcesContent": [null,null,...,null]) がありません。これは、sourcemaps プラグインがデフォルトでコンテンツを含めると言う場合に当てはまります (私も明示的に試しましたincludeContent を true に設定します)。

minify ステップを削除すると、うまく機能し、元の less ファイルの内容を確認できるので、minify-css がソースマップをサポートしているかどうかを確認し、プラグイン リストに従ってサポートする必要があります。

私は何か間違ったことをしていますか？ソースマップを生成するときに、less と minify-css の間に既知の非互換性はありますか?

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

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

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

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

しかし、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

gulp-sassSCSS をコンパイルするために使用しgulp-sourcemaps、開発環境でソースマップを生成するために使用しています。

ソースマップが生成されますが、問題はありません。Chrome DevTools で要素を検査すると、ソースの SASS 定義が表示されますが、属性値または選択を変更するとすぐにソースマップが失われ、コンパイルされた CSS の行が表示されます。スクリーンショットを見る:

非常に煩わしく、私たちが試したものはこれを修正しませんでした. 助言がありますか？Firefox では、同じ問題は見られないことに注意してください。

以下を提供する Gulp で使用するプラグイン チェーンを探しています。

• ソースマップのサポート
• 以下
• 縮小化
• 連結
• 再配置/連結に対処するための URL 置換 (リベース)

現在、最初の 4 つを持っていますが、最後の (URL リベース) も提供する既存のプラグインの組み合わせが見つかりません。ソースマップを発行する URL リベース プラグインは見つかりませんでした。

明確にするために、私の問題は、プロジェクト開発フォルダーから複数の小さな CSS ファイルをコンパイルし、それらを共通のフォルダーに出力すると、連結による移動により、背景画像などの相対 URL が壊れることです。

編集:

私が現在使用しているツール チェーンは、すでにこの問題を解決することを意図しているようです。だから、それが表向きの答えです。しかし、それは別の問題を提起します。それは、必要な構文がどのように機能するはずなのかということです。

その質問には、理論的には多くの重複があります。

• clean-css #152: 機能のリベースが非常にイライラする
• clean-css #195: rootWindows のオプション
• clean-css #263: relativeTo オプションを異なるパスの CSS ファイルで動作させる方法
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• cssmin が相対 URI をリベースしていますか?

残念ながら、実際に構文を説明する答えはありません。ブードゥーを示しているだけです。そのため、以下が機能しない理由がわかりません。解決できる場合は、ここに戻って、このツール チェーンが実際に必要なことを行っていることを示すために、承認済みのフラグを立てます。

ソース ファイル:

一気飲みタスク:

壊れた URL を含む出力。複数の欠陥に注意してください。CSS は、必要なアセットに関連するディレクトリ レベルを上げていますが、追加の親ディレクトリが追加されています (!)。また、URL の 1 つで、ハード アセット フォルダー名が変更されています (!)。非常に奇妙な：

ブードゥー教を続けて申し訳ありませんが、これが私の作業用のgulpパイプです：

そして正しい出力：