web-dev-qa-db-ja.com

本番環境でbower_componentsにリンクすることになっていますか？

Bowerを使用するのは比較的新しいので、実稼働環境でbower_componentsにリンクすることになっているかどうかわかりません。 bower_componentsから必要なファイルを別のディレクトリにリンクまたはコピーするために、うなり声タスクを使用する必要がありますか？

「bower_components」というディレクトリを持つウェブサイトを見たことがないので、これを聞いています。少し怖いです。 angularチュートリアルのように、すべての初心者ガイドは「bower_components/...」にリンクしています。

gruntjsbower
44
Kevin Evans

ヨーマンを使用していますか？

Gruntfile.jsに応じて、異なるタスクが必要です。これらの1つは「bower-install」です。このタスクはread you index.html、次のコメントブロックを見つけます

<!-- bower:js -->
<!-- endbower -->

injectその中にbower.jsonで指定されたすべての依存関係があります。これは、タスクがすべての<script src "/ bower_components/..">ブロックに対して書き込むことを意味します。

/ app dirが「開発」環境であり、ソースプロジェクトであるため、「bower_components」参照を含むWebサイトに気付いたことはありません。ソースから、「ビルド」タスクを実行する本番アプリケーションを作成します。このタスクは、異なるジョブを作成する異なるサブタスクで構成され、これらの1つは連結 1つのjsでbower_installタスクによって追加されるすべてのスクリプトですファイル。

次に、このファイルを縮小する別のタスク、テストを実行する別のタスク、本番サイトが存在する「dist」ディレクトリを作成する別のタスクなどがあります...

Yeomanを使用する場合、Gruntfile.jsでこれらすべてのタスクが既に構成されているので、それを開いて、すべてのタスクが何をするかを理解してください。

一見、理解するのは非常に困難です。たとえば、ビルドタスクは14または15のサブタスクを指します。1つのタスクのみを実行するカスタムタスクを登録し、何が起こるかを確認することをお勧めします。

乾杯

25
Sergio Rinaudo

.bowerrcファイル（bower.jsonファイルの隣）を作成し、directoryプロパティを別の値に設定することにより、bowerインストールディレクトリに適切な名前を付けることができます。たとえば、.bowerrcには次のものがあります。

{
  "directory": "public/vendor"
}

次に、このディレクトリの内容をソース管理にチェックインする必要があるかどうかという密接に関連した質問もあります。 その質問の詳細については、こちらをご覧ください 。

そして最後に、他の人がすでに述べたように、フロントエンドの依存関係を連結して縮小することをお勧めします。

12
Sergey K

直接リンクしても問題はありませんが、通常は、すべてのスクリプトを1つのファイルに連結し、プロダクション用にファイルサイズを小さくするためにそれをUGL化する必要があります。

単調な glify task は、これらの両方を非常に簡単に処理できます。結合するファイルの配列を提供するだけです。

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});
5
dezman

Bower_componentsを使用するだけで開始するのはかなり一般的です。これは angular-seedスタータープロジェクトのスクリプト参照 で確認できます。本番アプリケーションのデプロイが開始され、ロード時間とパフォーマンスが重要になったら、ソリューションに変換して依存関係をマージおよび縮小することを検討する必要があります。

3
Scott Willeke