web-dev-qa-db-ja.com

grunt.jsを使用してRequireJSを使用するJavaScriptファイルを結合する作業プロジェクト構造？

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

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

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

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

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)

具体的には、workingプロジェクト構造を開始できる場所を探しています。私の主な質問は：

  1. このプロジェクト構造に欠陥がある場合、何をお勧めしますか？
  2. 正確に何がgrunt.jsファイル、特にr.jsオプティマイザーを機能させるには？
  3. これらすべての作業に値するものではなく、ファイルを保存するたびにgrunt watchタスクを使用してすべてを開発モードで自動的にビルドする方法がある場合、私はすべてのことを理解しています。ループの速度を低下させるものから変更を加えて、ブラウザでの表示に変更することは避けたいです。
javascriptbuildrequirejsgruntjs
38
Chris Calo

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

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

ところで：--save-devは、package.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"
    }
  }
}

これで、grunt requirejsを実行して、ugliifyjsで最小化される単一のファイルにrequire.jsを構築できます。

これをgruntファイルに追加することにより、一連の異なるタスクをある種のメインタスクにバンドルできます。

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

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

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

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

そしてそれを実行する

grunt production

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

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. それは可能ですが、watchタスクにrequirejsを追加することはお勧めしません。これはリソースを大量に消費するタスクであり、マシンの速度を著しく低下させます。

最後に重要なことですが、r.jsをいじるときは十分注意してください。特に、設定にmodulesディレクティブを追加してr.jsでプロジェクト全体を最適化したい場合。 R.jsは確認なしで出力ディレクトリを削除します。誤ってシステムルートに設定された場合、r.jsはHDDを消去します。警告：私はhtdocsフォルダー全体を永久に完全に消去しましたが、グラントタスクのセットアップ中に... r.js設定をいじるときは、常にオプションにkeepBuildDir:trueを追加してください。

81
Marcello di Simone