requirejs와 grunt를 사용하여 멀티 클라이언트 프로젝트를 빌드하십시오.

Question

다른 클라이언트가 메인 코드 기반을 사용해야하는 프로젝트를 진행 중입니다. 그래서 우리는 requirejs 프로젝트를 가지고 있고 나의 초기 아이디어는 모든 클라이언트마다 다른 파일 app.js을 필요로하는 간단한 bootstrap.js 파일을 갖는 것입니다.

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

그래서 내 아이디어 requirejs 'R 컴파일러를 사용하여 모든 클라이언트 응용 프로그램을 컴파일하는 것입니다 :

bootstrap.js

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

그래서 프로젝트 구조는 다음과 같이 될 것입니다 다음과 같이 각 단계마다 새 build.js를 작성하여 모든 컴파일에서 app에 대한 경로를 clientX/app.js로 설정합니다.

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

그래서 지금 나는 uglify, usemin, md5와 같은 다른 작업들을 많이 사용하고있는 쓸데없는 빌드 작업을 가지고 있습니다. 이 작업을 사용하지만 모든 클라이언트의 requireJs 설정을 변경하는 새 작업을 만들 수 있습니까? 아니면 내 목표를 달성하기위한 더 좋은 방법이 있습니까?

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