問題タブ [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 投票する
0 に答える
994 参照

gulp - Gulp SASS、autoprefixer、minify、sourcemap で巨大なファイルが生成される

ソースマップを生成する SASS ファイルを縮小するために、この Gulp 構成を使用すると奇妙な動作が発生します。

このスクリプトを初めて実行するとgulp、正しいものが生成さfull.min.cssれ、SASS ディレクトリの変更を待ちます。

SASS ファイル内の何かを変更すると、監視がトリガーされ、stylesタスクが再実行され、full.min.css.

フロントエンドに変更が見られますが、この縮小されたファイルは再構築のたびにどんどん大きくなります。

タスク内のソースマップを省略すると、正常にstyles動作するようです。full.cssファイルは常に問題ありません。

ここで何が欠けていますか?縮小版が次元を上げ続けるのはなぜですか?

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

node.js - コンパイル済み出力と同じソースマップ コンテンツ - Windows の場合

問題

gulp-sourcemapsコンパイル済みの sass のソースマップを生成するために使用しています。

これは、Linux/Mac コンピューターでは機能するようですが、Windows では機能しません。実際のソース sass の代わりに、ソースマップの内容は生成された css と同じです。

PS私は実際のソースファイルを公開してリンクしたくありません。それらをソアマップに埋め込んでほしい。


詳細

私が使用している完全なgulpタスクは次のとおりです。

そして、フォルダ構造は次のとおりです。


さらに詳しく

Node v0.12.4 で Windows 7 を実行しています。グローバルgulpバージョンは 3.9.0 です。

これが私のpackage.jsonファイルです:

の元のソース コンテンツは次のapp.scssとおりです。

生成された CSS ファイルは次のとおりです。

最後に、ソースマップ ファイル (整形済み) を次に示します。


結論

上記のすべてからわかるようにsourcesContent、ソースマップ ファイル内の は、生成された CSS とまったく同じです。これにより、ソースマップはかなり役に立たなくなります。

ここで何が間違っていますか?どうすれば修正できますか?


これらのファイルのダウンロードは次のとおりです: gulp-sass-autoprefixer-sourcemaps.zip

テストするには: 抽出してから実行しnpm install && gulp cssます。

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

gulp - gulp-sourcemaps を一連のプラグインで正しくマッピングする

複数のプラグインを含む git リポジトリがあります (1 つのメイン プラグインと、メイン プラグインでのみ動作することを意図した複数のプラグイン)。bower は git リポジトリごとに複数のプラグインを持つ方法を提供していないため、私は配布にこのアプローチを使用しています。

したがって、各プラグインを縮小し、各プラグインのソースマップを作成し、各プラグインを git サブモジュールに対応する個別の配布フォルダーにドロップする必要があります。慣例により、簡単にするためにプラグインと同じ名前を付けています。これをすべて 1 つのステップで実行する次の Gulp スクリプトを思いつきました。これは主に、ここで見つけた回答に基づいています。

1つのことを除いて、私が望むことを正確に実行します。プラグインごとに生成されるソースマップ ファイルには、パスにサブディレクトリが含まれます。プラグインの最終的な宛先にはこのパスが含まれないため、これは無効です。

jquery.dirtyforms.min.js.mapファイル内:

する必要があります

そしてjquery.dirtyforms.min.jsファイルで:

する必要があります

gulp-sourcemaps のソースを調べて、ファイル名をオーバーライドするオプションを見つけようとしましたが、ないようです。

これに対して私が思いついた2つの可能な解決策は次のとおりです。

  1. 正規表現を使用して各ファイルを置換します
  2. でファイルを生成し、生成distributionFolder後に正しいサブフォルダーに移動します。

しかし、これらは両方ともハックのようです。そもそもストリームがそれらを正しく作成した方がよいでしょう。そうする方法はありますか?

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

twitter-bootstrap - 私の Gulp インライン ソースマップ ファイルのサイズは、それと同じくらい大きくする必要がありますか?

Sass スタイルに Bootstrap を含めています。ソースマップを有効にせずにSassをコンパイルすると、ファイルサイズは約です。150キロバイト。ソースマップをオンにすると、ファイル サイズは最大 800kb になります。これは予想されることですか?最終的には、Bootstrap の必要な部分を厳選する予定ですが、今のところは多すぎるようです。

これが私のSassタスクです:

0 投票する
2 に答える
904 参照

node.js - gulp-gzip の使用時に Gulp SourceMaps が機能しない

私はGulpを使ってjavascriptファイルを醜くし、ソースマップを生成しています。ここまでは順調ですね:

このコードは、ブラウザーによって正しく読み込まれる次の出力フォルダーとファイルを生成します。

public/js/someScript.min.js

public/js/maps/someScript.min.js.map : このファイルは上の行で参照されていることに注意してください。

ただし、それらを gzip したいので、更新された gulpfile.js は次のとおりです。

今、私はこれらのファイルを取得します:

public/js/someScript.min.js.gz

public/js/maps/someScript.min.js.map.gz

js.gz ファイルがsomeScript.min.js.map.gzではなくsomeScript.min.js.mapを参照しているため、ソース マップはリンクされていません。私は何が欠けていますか?ファイル参照を正しい拡張子にするにはどうすればよいですか?

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

javascript - gulp-sourcemaps、Uncaught SyntaxError: 予期しないトークン:

背景: Gulp Scripts タスクでソース マッピングをセットアップしようとしています。main.js:10マッピングは機能していると思いますが (「hello world」console.log がではなくを参照していることを以下で確認してくださいall.min.js)、コンソール エラーが表示されます。Uncaught SyntaxError: Unexpected token :


質問:なぜこれが起こっているのですか? また、js ソース マッピングの機能を十分に活用できなくなるような問題が発生するのでしょうか?


参考文献:

スクリーンショット:

コンソールのスクリーンショット

gulpfile.js:

プロジェクト ディレクトリ ツリー:

all.min.js.map: http://pastebin.com/wck38eHJ


注:はい、JQuery がマップ ファイルを提供していることは知っていますが、さまざまな理由からこの方法で実行したいと考えています。