2

developmentとdeployの 2 つのタスクを持つ bower 依存関係を持つ Grunt プロジェクトをセットアップしようとしています。現在、プロジェクトのフォルダー構造は次のようになっています。

.
├── bower_components
│   ├── animate.css
│   ├── jquery
│   ├── semantic-ui
│   └── wow
├── dist
│   └── assets
│       ├── styles
│       └── js
├── node_modules
└── src
    └── assets
        ├── less
        └── js

現在、grunt-wiredepを使用して、bower の依存関係を HTML ファイルに自動的に含めていますdist。開発と展開の分離を維持するためbower_componentsに、フォルダーを除外しようとしています (開発中にサイトが提供されている場合でも)。distdist

私はこれに慣れていないので、適切な grunt/bower モジュールと、開発とデプロイのベスト プラクティスを考え出すのに完全な想像力の失敗を経験しています (はい、Yeoman はこれの多くを処理しますが、私は学ぼうとしています)。私の現在のビジョンは次のとおりです。

  1. Connect は、distフォルダから HTML ページを提供します。
  2. dist開発中、bower コンポーネントはページに自動的に含まれますが (wiredep)、フォルダー内から提供する必要があります ( grunt-wiredep-copy )。
  3. デプロイでは、bower コンポーネントは縮小版を取得し、それらをプロジェクトの JS および CSS ファイルと連結するか、単一の JS および CSS ファイル内の bower コンポーネントのみと連結します。

私の質問は、開発でbowerコンポーネントを使用し、最小限のgrunt-contrib-copy / grunt-contrib-concat / grunt-string-replaceまたはそのようなモジュールでターゲットを展開してファイルを移動して書き換える（または）良い方法は何ですかHTML参照？それとも、このステップには常に高度な手動要素が含まれますか? KFCチップと「ポテトとグレービー」のように、バウアーとうなり声が一緒になると、私には奇妙に思えます.

JS と LESS/CSS の連結は、各タイプのそれぞれの uglify および minify grunt モジュールを使用して簡単に行うことができます。Bower ファイルはこれらのプロセスから除外され、wiredep と wireepCopy は、デプロイ タスクの "クリーンアップ" (HTML ファイル内のそれぞれのリンクを縮小/連結および更新) する簡単な方法を提供していないようです。wireepCopy は、開発タスク中に HTML 内の参照を移動したファイルに更新することさえしません。たぶん、wiredepは進むべき道ではないでしょうか? ありがとう！

4

1 に答える 1

0

厳密には答えではありませんが、私にとってこれはもはや問題ではありません.フロントエンドの開発は進みました.

解決策は Grunt と Bower を使用していません。代わりにnpmとWebpackを使用してください。Bower は、フロント エンドでビルドされた正確なアセットとバージョンを管理できるようにする点で、他のパッケージ マネージャー/ビルド アセンブラーとは異なります。この私見はもう必要ありません。

新しい (そして改善された) スタックでは、npm がアセットをプルダウンし、Webpack を使用すると、アプリを個別のビルド ファイルに簡単にスライスして、ファイル サイズを最小限に抑えることができます。JS で必要なフロント エンド モジュールを単に require/import するだけで、Webpack が結合を行います。

npm と webpack の組み合わせは、Grunt (Gulp、Broccoli などを読む) が実現した機能のほとんど (すべてではないにしても) を引き継ぎます。

于 2016-05-12T09:16:44.803 に答える