問題タブ [grunt-usemin]

grunt でビルドするときは、次の 2 つのタスクがあります。

preprocess:distにコピーapp/scripts/config.jsしdist/scripts/config.jsて置き換える最初// @echo FOOのタスクBAR。

app/scripts/**/*.js次に、すべてを に連結する usemindist/scripts/application.jsです。

Gruntfile でタスクをビルドします。

私のインクルードスクリプトは次のindex.htmlとおりです。

config.js連結されたファイル dist/scripts/application.js にfromapp/scriptsではなくfromがあることを除いて、すべて正常に動作しますdist/scripts。

({.tmp,dist,app})後は連結時にファイルをどこに取るかを指定するためだと思いましbuild:jsたが、それでも config.js は間違ったディレクトリ (アプリであり、dist ではありません) から取得されます。

したがって、// @echo VAR が置き換えられていない config.js になります。

連結時に app ではなく dist から config.js を取得するように concat/usemin に指示するにはどうすればよいですか?

注: 1 つの解決策は、usemin の動作方法を変更する必要がないように、前処理で を に入れ、 のconfig.processed.js代わりapp/scriptsにこのファイルを含めることです。config.js

しかし、次にconfig.processed.jsを.gitignoreに配置する必要があり、ソースファイル内に生成されたファイルがあります...

このファイルを .tmp または dist で生成することをお勧めします。

編集：私のGruntfile全体：

現在、Grunt Build ファイルを作成しています。「usemin」を使用する HTML で 3 つのブロックを作成し、3 つのファイル assets.min.js 、 lib.min.js などを作成します。

これはうまくいきます。しかし、私が直面している2つの大きな問題があります...

1. Angular はエラー "Uncaught error [$injector:modulerr]..
2. Usemin もファイルを再び縮小しているようです。

これらのファイルを連結するだけで、つまりUseminを回避する縮小ステップをバイパスすることにより、2番目のオプションも試しました..それでも同じエラー

ガイドしてください

現在、プロジェクトの grunt-useminをセットアップしていますが、タスクで小さな問題が発生していcssminます。

私たちのプロジェクトは、いくつかの外部ライブラリに依存しており、いくつかの外部ライブラリは長い追加アセット (画像やフォントなど) をもたらします。問題は、これらのライブラリのフォルダー構造が同じでないことです。

これは、さまざまなフォルダー構造の例です。

index.html では、すべてのスタイルシートが参照され、ビルド ブロック内に配置されます。そのため、usemin タスクが実行されると、ライブラリのスタイルシートが 1 つの縮小されたファイルに連結され、出力フォルダー内に配置されます。対応するアセット (画像) もこの出力フォルダーにコピーされ、imgフォルダー内でフラット化されます。出力フォルダー構造は次のようになります

ご想像のとおり、連結されたスタイルシートには (この例では) 2 つの異なる相対 URI があります。

• image1.png
• ..\images\image2.png

これにより、一部の画像が見つからないという問題が発生しています。すべての相対 URI を out フォルダーにリベースするソリューションが必要です。タスクのオプションtargetとrootオプションを使用しようとしましたが、役に立ちませんでした。cssmin誰かがこのタスクの正しい構成、または私が探しているものを達成できる別の Grunt タスクを教えてもらえますか?

前もって感謝します！

gruntコマンド ラインから実行すると jshint エラーが発生します。

私のグラントファイルには次のものがあります。

また、yeoman.dist は grunt.initConfig で定義されています。

Cannot read property 'options' of undefined エラーが発生するのはなぜですか?

ストックのヨーマン angular-fullstack ジェネレーターを使用しています。この問題は、実行時に発生しgrunt serve:distます。イメージは正常に改訂されましたが、更新されたイメージ パスがどの jade ビューにも追加されません。

usemin ブロック:

ほとんどの jade ファイルが「partials」ディレクトリ内にあるため、html ターゲットを再帰グロビングに変更しました。ただし、新しい angular-fullstack プロジェクトには、パーシャル ディレクトリに jade ファイルもあり、イメージの置換は期待どおりに機能します。

フォルダ構造 - ソース ファイル:

フォルダー構造 - dist ファイル:

Revving は CSS および JS ファイルで機能しますが、画像だけでは機能しません。

jade パーシャルの画像パスの例:

他に役立つ情報があれば教えてください。

Yeoman ビルド タスクによってアプリが壊れてしまい、どこに問題があるのか​​を調べようとしています。

だから私は他のタスクをコメントアウトし、残しました:

また、useminPrepre タスクは次のように定義されます。

出力 (以下を参照) は問題ないように見えdistますが、ビルドが完了するとフォルダーは空になります。実際にファイルを書き込むために useminPrepare を作成するにはどうすればよいですか?

私はselect2Angularプロジェクトで使用しています(yeomanを使用)。Select2 css は次のディレクトリにあります。

bower_components/select2/select2.css bower_components/select2/select2.png

css は select2.png を次のように使用しています: background-image: url('select2x2.png')

concat と minify を実行すると、次のような構造になります。

bower_components/select2/d204997b.select2x2 スタイル/034d1972.vendor.css

しかし問題は、venodr css の select2 部分がスタイル ディレクトリで d204997b.select2x2 を探していることです。

これは私の GruntJS ファイルの一部です。

ありがとう