RequireJS を使用して JavaScript ファイルを結合するために grunt.js を使用する作業プロジェクト構造ですか? 質問する

Question

私はgrunt-contrib-requirejsrequire.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 は lint と requirejs という 2 つの「サブタスク」を含むデフォルトのタスクを自動的に実行します。

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

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

そしてそれを実行する

grunt production

requirejs タスク内で「production」と「development」に異なる動作が必要な場合は、いわゆるターゲットを使用できます。上記の構成例では、すでにとして定義されています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']);

さて、あなたの質問にお答えします:

プロジェクトでは必ずサブフォルダを使用します。私の場合は、開発用に「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

上記を参照

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

最後になりましたが、r.js で遊ぶときは十分注意してください。特に、modules設定にディレクティブを追加して、r.js でプロジェクト全体を最適化したい場合は注意が必要です。r.js は、何も尋ねずに出力ディレクトリを削除します。誤ってシステムルートに設定されている場合、r.js は HDD を消去します。注意してください。私は以前、grunt タスクを設定しているときに htdocs フォルダ全体を永久に消去しました... keepBuildDir:truer.js 設定で遊ぶときは、常にオプションを追加してください。

Answer 1