Ngbuild. Собираем приложение Angular.js

Хочу поделиться своим билдером для 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']); 

/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 

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

ссылка на оригинал статьи http://habrahabr.ru/post/217749/

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *