38

RequireJSを使用してブラウザーに個々のJavaScriptモジュールをロードするプロジェクトがいくつかありますが、まだ最適化されていません。開発と本番の両方で、アプリはJavaScriptファイルごとに個別のリクエストを行います。次に、 Gruntを使用してそれを修正したいと思います。

単純なプロジェクト構造を無駄にまとめようとしたので、誰かが私に実用的な例を提供してくれるかどうか疑問に思っています。私の目標は次のとおりです。

  1. 開発モードでは、必要なモジュールごとに個別のリクエストを発行することで、すべてがブラウザで機能します。開発モードでは、うなり声のタスクや連結は必要ありません。
  2. 準備ができたら、うなり声のタスクを実行して、r.jsを使用してすべてのJavaScriptファイルを最適化（結合）し、ローカルでテストできます。最適化されたアプリケーションが正しく実行されることを確認したら、それをデプロイできます。

この会話のためのサンプル構造は次のとおりです。

grunt-requirejs-example/
  grunt.js
  main.js (application entry point)
  index.html (references main.js)
  lib/ (stuff that main.js depends on)
    a.js
    b.js
    requirejs/
      require.js
      text.js
  build/ (optimized app goes here)
  node_modules/ (necessary grunt tasks live here)

具体的には、自分が始められる実用的なプロジェクト構造を探しています。私の主な質問は次のとおりです。

  1. このプロジェクト構造に欠陥がある場合、何をお勧めしますか？
  2. grunt.js特にr.jsオプティマイザーを機能させるには、ファイルに正確に何を含める必要がありますか？
  3. watchこれらすべてを行う価値がなく、ファイルを保存するたびにgruntタスクを使用して、開発モードですべてを自動的にビルドする方法がある場合は、私はすべての耳です。ループが変更されてブラウザに表示されるのを遅らせるようなことは避けたいと思います。
4

1 に答える 1

81

grunt-contrib-requirejsタスクを使用して、require.jsに基づいてプロジェクトをビルドします。次のコマンドを使用して、プロジェクトディレクトリ内にインストールします。

npm install grunt-contrib-requirejs --save-dev

ところで：--save-devpackage.jsonの開発依存関係にパッケージを追加します。プロジェクトでpackage.jsonを使用していない場合は、無視してください。

次のコマンドを使用して、gruntファイルにタスクをロードします。

grunt.loadNpmTasks('grunt-contrib-requirejs');

そして、grunt.initConfigに構成を追加します

requirejs: {
  production: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      out: "path/to/optimized.js"
    }
  }
}

これで、require.jsのものを単一のファイルにビルドできます。このファイルは、実行することでuglifyjsで最小化されます。grunt requirejs

これをgruntファイルに追加することで、さまざまなタスクのセットをある種のメインタスクにバンドルできます。

grunt.registerTask('default', ['lint', 'requirejs']);

これにより、入力するだけgruntで、gruntは2つの「サブタスク」（lintとrequirejs）を使用してデフォルトのタスクを自動的に実行します。

特別な制作タスクが必要な場合：上記のように定義します

grunt.registerTask('production', ['lint', 'requirejs', 'less', 'copy']);

で実行します

grunt production

「本番」と「開発」の動作、つまりrequirejsタスク内で異なる動作が必要な場合は、いわゆるターゲットを使用できます。上記の構成例では、すでにとして定義されていproductionます。必要に応じて別のターゲットを追加できます（ところで、同じレベルにオプションオブジェクトを追加することで、すべてのターゲットのグローバル構成を定義できます）

requirejs: {
  // global config
  options: {
    baseUrl: "path/to/base",
    mainConfigFile: "path/to/config.js"
  },
  production: {
    // overwrites the default config above
    options: {
      out: "path/to/production.js"
    }
  },
  development: {
    // overwrites the default config above
    options: {
      out: "path/to/development.js",
      optimize: none // no minification
    }
  }
}

これで、両方を同時に実行することも、を使用してgrunt requirejs個別にgrunt requirejs:production実行することも、次の方法でさまざまなタスクで定義することもできます。

grunt.registerTask('production', ['lint', 'requirejs:production']);
grunt.registerTask('development', ['lint', 'requirejs:development']);

今あなたの質問に答えるために：

  1. 私は間違いなくあなたのプロジェクトでサブフォルダーを使用します。私の場合、開発用に「src」フォルダーを使用し、本番用に「htdocs」フォルダーにビルドします。私が好むプロジェクトレイアウトは次のとおりです。

    project/
  src/
    js/
      libs/
        jquery.js
        ...
      appname/
        a.js
        b.js
        ...
      main.js // require.js starter
    index.html
    ...
  build/
    ... //some tmp folder for the build process
  htdocs/
    ... // production build
  node_modules/
    ...
  .gitignore
  grunt.js
  package.json

  2. 上記を参照

  3. これは可能ですが、監視タスクにrequirejsを追加することはお勧めしません。これはリソースを大量に消費するタスクであり、マシンの速度が著しく低下します。

最後になりましたが、r.jsをいじるときは十分に注意してください。特に、構成にディレクティブを追加して、r.jsを使用してプロジェクト全体を最適化する場合modules。R.jsは、確認せずに出力ディレクトリを削除します。誤ってシステムルートとして設定された場合、r.jsはHDDを消去します。注意してください、私は私のgruntタスクを設定している間、しばらく前にhtdocsフォルダー全体を完全に消去しました... keepBuildDir:truer.js構成で遊んでいるときは、常にオプションに追加してください。

于 2012-12-30T00:16:35.673 に答える