4

私は、さまざまなクライアントがメイン コード ベースを使用する必要があるプロジェクトに取り組んでいます。したがって、requirejs プロジェクトがあり、私の最初のアイデアは、クライアントごとに異なるファイルをbootstrap.js必要とする単純なファイルを作成することです。app.js

ブートストラップ.js

requirejs(['app'],function(app){
  //some initial code here
  app.start();
}

したがって、プロジェクト構造は次のようになります。

|_bootstrap.js
|_commonModules
  |_someModule.js
|_client1
  |_app.js
  |_modules
    |_module.js
|_client2
  |_app.js
  |_modules
    |_module.js

したがって、私のアイデアは、requirejs の r コンパイラを使用してすべてのクライアントのアプリをコンパイルし、次のようにすべてのステップで新しい build.js を作成することにより、すべてのコンパイルでアプリへのパスを clientX/app.js に設定することです。

({    
  paths: {
    "app": "client1/app"
  }
})

そのため、現時点では、uglify、usemin、md5 などの他の多くのタスクを使用している grunt ビルド タスクがあります。このタスクを使用するが、すべてのクライアントの requireJs 設定を変更する新しいタスクを作成できますか? または、私の目標を達成するためのより良い方法はありますか?

4

1 に答える 1

6

ということで、結局そんなに大変ではありませんでした。クールなことは、実際に実行中のタスクの構成を変更できることと、実行中のタスクで以前に定義されたタスクを呼び出すことができることです。

//this was the old task to build one distribution
grunt.registerTask('build', ['clean:build', 'copy:build', 'useminPrepare', 'usemin', 'requirejs', 'concat', 'uglify', 'mincss', 'md5', 'manifest', 'copy:toClientFolder']); 

grunt.registerTask('buildAll', function() {
  ['client1', 'client2'].forEach(function(client) {
    //before every build task run a task to change the config
    grunt.task.run('updateConfig:' + client, 'build');
  });
});

  //we need to change the config in a separate task,
  //otherwise, change the config just in the forEach, would result in the same 
  //config for both task, using the client2 settings
  grunt.registerTask('updateConfig', function(client) {
    var requireJsName = 'requirejs.compile.options.name';
    var clientFolder = 'copy.toClientFolder.files';
    grunt.config(requireJsName, 'clients/' + client + '/Bootstrap');
    grunt.config(clientFolder, [
      {expand: true, cwd: 'dist', src: '**', dest: 'dist_' + client}
    ]);
  });

クライアントの app.js ファイルは次のようになります。

requirejs.config({
  paths: {
    'commonModules/someModule': 'clients1/modules/module'
  }
});

requirejs(['boootstrap',
  'commonModules/someModule1'],

  function(boootstrap, someModule1) {
    $(function() {
      boootstrap();
      someModule1();
    });
  });
于 2013-02-27T07:52:26.943 に答える