使用 requirejs 和 grunt 构建多客户端项目答案

【问题标题】：Build multi client project with requirejs and grunt使用 requirejs 和 grunt 构建多客户端项目
【发布时间】：2013-02-26 08:09:28
【问题描述】：

我正在做一个项目，其中基于主要代码的代码应该由一群不同的客户使用。所以我们有一个 requirejs 项目，我最初的想法是创建一个简单的 bootstrap.js 文件，该文件将需要每个客户端都不同的 app.js 文件。

bootstrap.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"
  }
})

所以目前我有一个 grunt 构建任务，它正在使用一堆其他任务，如 uglify、usemin、md5 等。我可以创建一个使用此任务但更改每个客户端的 requireJs 设置的新任务吗？还是有更好的方法来实现我的目标？

【问题讨论】：

标签： javascript requirejs gruntjs

【解决方案1】：

所以毕竟这并不难。很酷的是，您可以更改实际运行任务的配置，并且可以在运行任务中调用之前定义的任务。

//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();
    });
  });

【讨论】：