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

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

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

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

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

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

問題

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ます。

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

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

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

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

する必要があります

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

する必要があります

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

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

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

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

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

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

私は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を参照しているため、ソース マップはリンクされていません。私は何が欠けていますか？ファイル参照を正しい拡張子にするにはどうすればよいですか?

背景: 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 がマップ ファイルを提供していることは知っていますが、さまざまな理由からこの方法で実行したいと考えています。