4

Grunt をどのように開始するかを考えようと 1 日を費やしましたが、(GitHub で) 見つけることができたすべてのドキュメントはオプションを指定しており、他には何も指定していません。

Grunt自体は初めてなので、よりユーザーフレンドリーなドキュメント/ハウツーを探しています。

複数の .css ファイルの縮小プロセスを自動化し、テンプレート内の次のように定義されたプレースホルダー内に含めたいと思います。

<!-- styles -->

<!-- /styles -->

と

<!-- js -->

<!-- /js -->

Grunt がすべきことは次のとおりです。

  • 私のcssディレクトリの中を見てください
  • 「main.css」と「main.js」アプリでファイルを圧縮
  • HTMLテンプレートを開き（tmpバージョンを必要とせず、代わりに同じhtmlファイルを更新できると便利です）、タイムスタンプを追加して作成されたファイルにリンクする最終タグ<link>と<script>タグをそこに書き込みます（キャッシュバスティング用） )

私には一般的なアプローチのように思えますが、準備ができているものを見つけることができません。

「grunt-contrib-cssmin」、「cartero」、「grunt-includes」、「grunt-include-replace」、「grunt-usemin」、および多数の代替案を見ましたが、すべての要件を統合しているようには見えず、私は私が望むものを得るためにそれらを一緒に働かせることができません。

4

1 に答える 1

11

あなたはここで正しい軌道に乗っています。grunt-usemin探しているもののほとんどを処理しますが、他のパッケージが必要です。CSS/JS の縮小化を有効にするには、 grunt-contrib-cssmin (CSS 用)、grunt-contrib-uglify (JS 用)の組み合わせを使用する必要があります。 、キャッシュの破壊にはgrunt-revを使用することをお勧めします。

スクリプトを意図したとおりに機能させるには、useminPrepare タスクを確認してください。これにより、CSS および JS ファイルをラップして、それらに対してタスクを実行できます。たとえば、私のプロジェクトでは Bower のグッズをたくさん使用しているため、私の footer.html には次のように記述されています。

    <!-- build:js js/scripts.min.js -->
    <script src="./bower_components/zepto/zepto.js"></script>
    <script src="./bower_components/underscore/underscore-min.js"></script>
    <script src="./bower_components/eventEmitter/EventEmitter.js"></script>
    <script src="./bower_components/eventie/eventie.js"></script>
    <script src="./bower_components/imagesloaded/imagesloaded.js"></script>
    <script src="./bower_components/spin.js/spin.js"></script>
    <script src="./scripts/lib/zepto.touch.module.js"></script>
    <!-- endbuild -->

実行useminPrepareすると、これらすべてが「収集」され、圧縮/縮小に使用できる構成オブジェクトが作成されます。私のタスクは次のようになります。

grunt.registerTask('produce',[
  'clean:main',      // clean out the /dist directory if it exists
  'copy',            // copy files to /dist
  'useminPrepare',   // prepare an object of files that will be passed to concat and/or uglify
  'concat',          // concatenate assets
  'uglify',          // minify assets
  'usemin',          // use the minified version of these files in my html
  'compass:produce', // run production version of compass
  'clean:post'       // cleanup junk
]);

本当にタイムスタンプを使用したい場合は、<!-- build -->コメントに追加することを検討できますが、それが機能するかどうかは完全にはわかりません (テストしていません)。Yeoman/grunt-usemin のメンテナーの 1 人である Addy Osmani は、grunt-rev のみを使用することを推奨しています: https://github.com/yeoman/grunt-usemin/issues/104。

最後の箇条書きについては、tmp ファイルを作成する必要があると思います。そうしないと、ベース HTML を破壊的に編集することになります。それがあなたのやりたいことなら、できると思いますが、そうしないことを強くお勧めします。

于 2013-08-19T03:22:59.650 に答える