問題タブ [grunt-usemin]

私は、yeoman angular generator を使用して新しいプロジェクトを作成し、それを自分のニーズに合うように拡張しました。しかし後で、express と mongodb のサポートに mean.io を使用したいことに気付きました。mean.io のデフォルト プロジェクトから自分のプロジェクトに必要な部分をコピーするのにかなりの時間がかかりました。しかし、私はまだ grunt-rev と grunt-usemin で深刻な問題に直面しています。

元の yeoman 生成プロジェクトには、すべての AngularJS アイテムを含む app/ フォルダーがありました。ただし、新しいプロジェクトには、サーバーに存在するすべてのアイテム用の app/ フォルダーと、クライアント エンドで必要なすべてのアイテム用の public/ フォルダーがあります。現在、grunt-rev プラグインは css ファイルと画像ファイルの名前を変更して、そのアイテムのバージョンに一致する識別子を含めます。これはかなり便利だと思うので、プロジェクトに残しておきたいと思います。さて; 私の index.html は app/ フォルダーにあり、すべての css と画像は public/ フォルダーにあります。私の index.html では、「」のような形式の画像を取得しました<img src="images/imagename.png">「。これは、サーバールートである同じ場所から app/views/ と public/ の両方を提供するため、ノード Express サーバーを起動してプロジェクトをテストするときに機能します。ただし、画像ソースが認識しないため、Usemin はこれを理解していません」 t は絶対フォルダー構造と一致します。app/views/ コンテンツを app/ に移動しようとしましたが、役に立ちませんでした。同じことが cssmin で構築された css ファイルでも起こります。index.html にプロパティを取得し、その下にすべての css .ビルド後、そこにstyles/main.cssがありましたが、useminがフォルダー構造を認識していないため、index.htmlにstyles/main.cssがあり、styles/に986a2d75.application.cssがあります。

2 つのフォルダを 1 つのように扱う必要があることを usemin に知らせる方法はありますか? usemin に特定のパターンを探すように強制できることがわかりましたが、それではすべての画像を gruntfile に個別に追加することを忘れないようにする必要があるため、そうする前にこれらのプラグインをまったく使用したくありません。

ember アプリで ember-table を使用したいと思います。bower経由でインストールしました。ただし、ember では、さまざまな要素 (テンプレートなど) を特定のディレクトリに配置する必要があるようです。

これらを ln -s する必要がありますか、または ember に bower_components/ember-table 内を検索するように指示する方法はありますか?

更新：

ember-table サンプル アプリとの類推により、このブロックはほとんど必要なものを提供してくれるようです。

ember-table はテンプレートを ember に挿入するため、テンプレート/コンポーネントに含める必要はありません。(コンポーネントに関する NB ember ガイドでは、これを行う方法について説明したい場合があります...)

これまでのところ、私にとってより問題なのは、ブートストラップを ember-table から解きほぐすことです。(サブ質問: 1) ember-table はベースが少ないため、less を scss に変換する方法はありますか? グローバルな変更を行わないように css 名前空間を使用するバージョンのブートストラップはありますか?)

私は、yeoman によって生成された空のプロジェクトから始め、必要に応じて Gruntfile.js を編集しようとしました。

grunt ビルド タスクは index.html ファイルを読み取り、bower の依存関係を連結して .vendor.js ファイルを生成します。

ワークフローに問題があり、.vendor.js ファイルが生成されたとしても、usemin は index.html ファイルのマークアップを置き換えません。

ここに私のGruntfile.jsがあります

そして、これが grunt を実行したときに生成されるものです。

index.html:

そして最後に、ここにうなり声の出力があります

これを理解する助けがあれば幸いです。

Yeoman を使用して AngularJS プロジェクトをスキャフォールディングしました。「rev」タスクを使用して、画像、スクリプト、スタイルなどが一意に識別されるようにしています。

AngularJS アプリケーション内に、ng-include ディレクティブでインポートされたテンプレートがあります。私の問題は、usemin が翻訳中のファイルに関連する各ファイル内の参照を翻訳していることですが、物事がレンダリングされると、それらは私の index.html に取り込まれ、ブラウザーは別の相対パスで物事を引き込みます。

たとえば、次のようなディレクトリ構造があります。

• index.html
• テンプレート/header.html
• images/logo.png

header.html は index.html に取り込まれることがあり、images/logo.png への参照があります。

header.htmlを入れる<img src="images/logo.png" />と、それ自体は適切にロードされますが、usemin によって翻訳されません。

header.htmlを入れる<img src="../images/logo.png" />と、usemin はそれを見つけて翻訳しますが、header.html が index.html に取り込まれると、画像が見つかりません。

usemin のドキュメントには次のように書かれています。

参照が相対の場合、デフォルトでは、参照先のアイテムは宛先ディレクトリの現在のファイルの場所を基準としたパスで検索されます [強調鉱山]

「デフォルト」言語では、相対パスが現在のファイル以外のものに相対的であることを伝える方法があると思いますが、その動作を変更する方法を教えてくれるドキュメントは見つかりませんでした。

uglify例: Gruntfile の JS スクリプトに以下の現在の構成を使用しています。

grunt-usemin は、 gruntfile オプションで宣言された html ファイルのコード ブロックからsrcおよびdestオプションを生成することを認識しています。次に例を示します。useminPrepare

したがって、生成されたファイル ブロックでgrunt-useminなどの同じオプションを使用するように構成するにはどうすればよいですか。通常、github または NPM レジストリで提供される簡単なドキュメントを読みましたが、これに対する確かな答えが見つからないようです。bannersourceMap: false