1

私はrequire.jsを使用してプロジェクトに取り組んでおり、r.jsを使用して最適化する予定です。JavaScript ファイルの最適化は、必要な構成の一部として自動的に組み込まれています。

私が望むのは、CSS をいくつかの異なるファイルに分割するhead.cssことbody.cssですmain.css。HTML は次のようになります。

<link rel=stylesheet type=text/css href=css/main.css>

問題は、開発中にファイルが分割されることです。それらを分割したままにして、毎回最適化をやり直す必要はありません-たとえ自動的に実行できるとしても。

また、開発中であっても、HTML を 1 つのスタイルシート参照だけで維持できるようにしたいと考えています。これを行う最適な方法は何でしょうか?

私が見ることができるいくつかの可能性があり、それぞれに潜在的な問題があります。

  1. 他のすべての CSS ファイルを含めるために使用し ますmain.css。@import
    • 自動ではありません --main.cssファイルごとに編集する必要があります。ファイルの数は比較的少なく、おそらく非常に早い段階ですべてが判明するため、これは大した問題ではありません。
    • r.jsこれを最適化しません
  2. 使用するrequire-css
    • これは、AMD による CSS の読み込みに適しているようです。すべての CSS を前もって読み込みたいと思います。
    • CSS ファイルの自動読み込みに関する他のオプションと同じ問題
  3. CSS 最適化なしで呼び出す独自のスクリプトを作成し、r.jsすべての CSS ファイルを連結して適切に縮小します。
    • 私よりも上手にこれをやった人がいると確信しています
4

1 に答える 1

2

私はうまく機能するgrunt-contrib-cssminを使用しています。grunt に引数を渡すこともできるのでgrunt:dist、すべての css を組み合わせることができ、プレーンgruntはそれらを分離したままにします。

module.exports = function (grunt) {
  grunt.initConfig({
    cssmin: {
      add_banner: {
        options: {
          banner: '/* My minified css file */'
        },
        files: {
          'dist/css/dist.min.css': ["bower_components/bootstrap/dist/css/bootstrap.css", "tmp/css/dist.css"]
        }
      }
    }
  })
}

グラント始めました。

grunt 用の requirejs スクリプトもあります。セットアップは次のようになります。

requirejs: {
  compile: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      out: "path/to/optimized.js"
    }
  }
}
于 2013-11-08T18:08:05.020 に答える