четверг, 3 сентября 2015 г.

Node + Grunt + R.js + Require Config

Структура проекта:

/index.html
/js/require.js
/js/require.text.js
/js/module1.js
/js/module.2.js
/js/module3.js

/Gruntfile.js

/rungrunt.js

/node_modules/grunt
/node_modules/grunt_contrib_requirejs

Файл index.html

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script data-main="js/main" src="js/require.js" type="text/javascript"></script>
</head>
<body></body>
</html>

Файл module1.js

require.config({paths: {module2: 'js/module2'}});

require(['module2'], function(module2){ // или define(['module2'], function(module2){
    module2.init();
});

Файл module2.js

require.config({paths: {module3: 'js/module3'}});

define(['module3'], function(module3){
    module3.init();
    return {init: function () {console.log(2);}};
});

Файл module3.js

define(function(){
    return {init: function () {console.log(3);}};
});

Файл Gruntfile.js

module.exports = function (grunt) {

    grunt.initConfig({

          // Создать единый файл из модулей Require JS
          requirejs: {
            compile: {
                options: {
                      baseUrl: "./" // <-- путь к папке с JavaScript-файлами
                    , name: "js/module1" // <-- основной стартовый файл для сборки (может содержать внутри себя как вызов require(), так и define())
                    , out: 'js/main.js' // <-- итоговый собранный файл
                    , paths: { // <-- пути ко всем модулям используемым в проекте (их наличие для сборки обязательно)
                            "module2": "js/module2"
                          , "module3": "js/module3"
                          , "text": "js/require.text"
                      }
                    , optimize: 'none' // <-- не минифицировать итоговый файл
                }
            }
          }

    });

    grunt.loadNpmTasks('grunt-contrib-requirejs');

    grunt.registerTask('default', [
        'requirejs'
    ]);

};

Файл rungrunt.js

require('grunt').cli();

Запуск сборки через консоль командной строки CMD

cd C:\Path\To\My\Project\Folder

node rungrunt.js

В итоге в папке js создается файл main.js

define('module3',[],function(){
    return {init: function () {console.log(3);}};
});
require.config({paths: {module3: 'js/module3'}});
define('module2',['module3'], function(module3){
    module3.init();
    return {init: function () {console.log(2);}};
});
require.config({paths: {module2: 'js/module2'}});
require('js/module1',['module2'], function(module2){ // define(['module2'], function(module2){
    module2.init();
});

Комментариев нет:

Отправить комментарий