Javascript 使用requirejs和grunt构建多客户端项目
我正在做一个项目,在这个项目中,基于主代码的应用程序应该由许多不同的客户机使用。所以我们有一个requirejs项目,我最初的想法是创建一个简单的Javascript 使用requirejs和grunt构建多客户端项目,javascript,requirejs,gruntjs,Javascript,Requirejs,Gruntjs,我正在做一个项目,在这个项目中,基于主代码的应用程序应该由许多不同的客户机使用。所以我们有一个requirejs项目,我最初的想法是创建一个简单的bootstrap.js文件,它需要一个app.js文件,每个客户端都需要不同的文件 bootstrap.js requirejs(['app'],function(app){ //some initial code here app.start(); } 因此,项目结构如下所示: |_bootstrap.js |_commonModules
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
({
paths: {
"app": "client1/app"
}
})
requirejs.config({
paths: {
'commonModules/someModule': 'clients1/modules/module'
}
});
requirejs(['boootstrap',
'commonModules/someModule1'],
function(boootstrap, someModule1) {
$(function() {
boootstrap();
someModule1();
});
});
因此,我的想法是使用requirejs'r编译器为每个客户端编译应用程序,并通过为每个步骤创建一个新的build.js,将每次编译中的app路径设置为clientX/app.js,如下所示:
|_bootstrap.js
|_commonModules
|_someModule.js
|_client1
|_app.js
|_modules
|_module.js
|_client2
|_app.js
|_modules
|_module.js
({
paths: {
"app": "client1/app"
}
})
requirejs.config({
paths: {
'commonModules/someModule': 'clients1/modules/module'
}
});
requirejs(['boootstrap',
'commonModules/someModule1'],
function(boootstrap, someModule1) {
$(function() {
boootstrap();
someModule1();
});
});
所以目前我有一个grunt构建任务,它使用了一系列其他任务,比如uglify、usemin、md5等等。我可以创建一个使用此任务但更改每个客户端的requireJs设置的新任务吗?还是有更好的方法来实现我的目标?所以毕竟这并不难。最酷的是,您可以更改实际运行任务的配置,并且可以在运行任务中调用先前定义的任务
//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文件如下所示:
|_bootstrap.js
|_commonModules
|_someModule.js
|_client1
|_app.js
|_modules
|_module.js
|_client2
|_app.js
|_modules
|_module.js
({
paths: {
"app": "client1/app"
}
})
requirejs.config({
paths: {
'commonModules/someModule': 'clients1/modules/module'
}
});
requirejs(['boootstrap',
'commonModules/someModule1'],
function(boootstrap, someModule1) {
$(function() {
boootstrap();
someModule1();
});
});