Ngbuild. Собираем Angular приложение без лишних слов

Хочу поделиться своим билдером для Angular.js приложения.

Вкратце суть.

Есть файл, в котором объявляется наш главный модуль /app.js:

angular.module('App',['/some_path/my_module.js']);

В качестве требуемого модуля у него указан путь к другому файлу /some_path/my_module.js

angular.module('MyModule',[]);

Обращаемся к билдеру

ngbuild app.js app.build.js

И смотрим в файл /app.build.js

angular.module('MyModule',[]);
angular.module('App',['MyModule']);

Под катом будет еще несколько примеров использования и интеграции с gulp и grunt.

Теперь предположим, что мы хотим реализовать такую архитектуру, при которой контроллерам/директивам/сервисам будет соотвествовать папка, а каждому элементу отдельный файл

/app.js
/controllers
-----/module.js
-----/first_ctrl.js

/app.js

angular.module('App',['/controllers']);

/controllers/module.js

angular.module('Controllers',[]);

/controllers/first_ctrl.js

angular.module('Controllers').controller('FirstCtrl',function($scope){});

Вызываем ngbuild и смотрим /app.build.js

angular.module('Controllers',[]);
angular.module('Controllers').controller('FirstCtrl',function($scope){});
angular.module('App',['Controllers']);

То есть суть в том, что если, указывать в качестве требуемого модуля путь к папке, билдер автоматически подргузит все файлы из нее и при этом поставит на первое место содержимое файла module.js

Так же билдер нормально реагиурает на то, что в одном файле могут быть несколько модулей

Предположим в /app.js

angular.module('App',['/modules.js']);

/modules.js

angular.module('Controllers',[]);
angular.module('Directives',[]);
angular.module('Filters',[]);

Вызываем билдер и смотрим в /app.build.js

angular.module('Controllers',[]);
angular.module('Directives',[]);
angular.module('Filters',[]);
angular.module('App',['Controllers','Directives','Filters']);

Для удобства разработки билдер можно интегрировать с watch задачами gulp и grunt

Gulp

var gulp=require('gulp');
var ngbuild=require('ngbuild');

gulp.task('ngbuild', function () {
    ngbuild({
        src: 'app.js',
        dest: 'app.build.js'
    });

});

gulp.task('watch', function () {
    gulp.watch(['**/*'], ['ngbuild']);
});

gulp watch

Grunt

var grunt = require('grunt');
var ngbuild = require('ngbuild');

grunt.initConfig({
    watch: {
        files: ['**/*'],
        tasks: ['ngbuild']
    }
});

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

grunt.registerTask('ngbuild', function () {
    ngbuild({
        src: 'app.js',
        dest: 'app.build.js'
    });
});

grunt watch

На этом все. Жду ваши предложения и замечания

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.