Грунтовые часы/Bower link: Каков наиболее подходящий способ использования часов Grunt с помощью Bower при разработке компонента Bower?

Question

Задача

В настоящее время я работаю над проектом, в котором у нас есть родительское веб-приложение (это приложение AngularJS) и несколько дочерних модулей Bower (содержащих Javascript, SASS, изображения и т. Д.), Которые включены в родитель с помощью Bower.

Например, родительский bower.json выглядит следующим образом:

{ 
    "name": "parent-app", 
    "version": "1.0.0", 
    "dependencies": { 
     "child-1-module": "1.0.0", 
     "child-2-module": "1.0.0" 
    } 
} 

При выполнении 'становой установки' на родителе дочерние модули будут установлены в:

bower_components/child-1-module 
bower_components/child-2-module 

Затем мы используем 'bower link' для каждого из дочерних модулей.

Then «становой ссылка ребенок-1-модуль» и «становой потомственному-2-модуль» на родителе, чтобы создать местные мягкие связи, такие как:

bower_components/child-1-module -> /some/where/else/child-1-module 
bower_components/child-2-module -> /some/where/else/child-2-module 

Это позволяет вносить изменения локально отдельные дочерние модули и посмотреть результаты в родительском приложении.

Затем мы также используем Grunt с хрюкать-вно-часы в родительском смотреть родительское приложение для изменения, а затем для выполнения других задач рубаки, или выполнить «LiveReload», чтобы обновить браузер быть используется для просмотра приложения.

урезанного пример Gruntfile.js который наблюдает .js файлов, а затем выполняет «jshint» задачу и «LiveReload» ниже:

grunt.initConfig({ 

    // Watches files for changes and runs tasks based on the changed files 
    watch: { 
     js: { 
      files: [ 
       'scripts/{,*/}*.js', 
      ], 
      tasks: ['newer:jshint:all'], 
      options: { 
       livereload: true 
      } 
     } 
    } 
} 

Это хорошо работает для просмотра родительского приложения для изменения, но мы также хотели бы знать, когда изменяются файлы в дочерних модулях. В настоящее время существует ряд решений, о которых я подумал/исследовал со смешанными результатами.

Потенциальное решение 1: Добавить bower_components хрюкать часы в родителю

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

grunt.initConfig({ 

    // Watches files for changes and runs tasks based on the changed files 
    watch: { 
     js: { 
      files: [ 
       'scripts/**/*.js', 
       'bower_components/**/*.js' 
      ], 
      tasks: ['newer:jshint:all'], 
      options: { 
       livereload: true 
      } 
     } 
    } 
} 

Однако может быть много дочерних модулей (содержащих много файлов .js), поэтому производительность сильно страдает и часто даже не запускается из-за «EMFILE: Too многие проблемы с открытыми файлами (см. here).

Кроме того дочерние модули добавляются динамически, поэтому мы не можем указать фронт в Gruntfile только специфические, например:

'bower_components/child-1-module/**/*.js' 

Потенциальных решение 2: Добавить хрюкать часы в ребенке модули и в родительском

Мы могли бы добавить Gruntfile.js в каждом дочернем модуле, который содержит часы для просмотра собственных файлов.

Когда файл изменяется в дочернем модуле, мы можем обновить конкретный файл «livereload», а затем в родителе мы можем наблюдать только за этими конкретными файлами.

Пример 'Gruntfile.js' в ребенка-модуль-1

grunt.initConfig({ 
    watch: { 
     js: { 
      files: ['scripts/**/*.js'], 
      tasks: ['livereloadEvent:js', 'newer:jshint:all'] 
     } 
    } 
} 
grunt.registerTask('livereloadEvent', function() { 
    // create a 'livereload/livereload.{arg}' file for the event specified 
    grunt.file.mkdir('livereload'); 
    for(var i = 0; i < this.args.length; i++) { 
     // contents of the file is the current timestamp 
     grunt.file.write('livereload/livereload.'+ this.args[i], new Date()); 
    } 
}); 

Тогда в родительском можно добавить следующую папку в нашей часы:

'bower_components/**/livereload/livereload.js' 

Этом работает нормально. Родитель теперь не должен смотреть слишком много файлов, теперь ребенку приходится выполнять собственное наблюдение и в основном уведомлять родителя.

Недостатком является то, что каждый ребенок должен знать об этом и реализовывать его таким же образом.

Другие потенциальные решения ...

Как еще есть другие обрабатываются это? Существует ли приемлемый и широко используемый шаблон для обработки этого?

Answer 1

Пути мы обрабатываем это очень похоже предложенного решение 2.

1. Когда разработчик работает над компонентом ребенка, он устанавливает связь Бауэр от ребенка к родительскому угловому приложению.

2. Он открывает два окна терминала. Один с заданием grunt watch, выполняющимся на дочернем, а другой с заданием grunt watch, выполняющимся на родительском элементе.

3. Когда он вносит изменения в дочерний компонент, он запускает задачу grunt, чтобы собрать конкатенированную версию файла в папку /dist компонента.

4. Родитель наблюдает за изменением папки /dist, а когда задача сборки в дочернем компоненте завершена, она запускает задачу для создания в родительском приложении.

Для того, чтобы свести к минимуму количества файлов родительского приложение наблюдает, мы используем префикс во всех наших компонентах Бауэра, поэтому часы конфигурация выглядит следующим образом:

watch: { 
    bower_components: { 
     files: ['./bower_components/orgname-*/dist/*.js'], 
     tasks: ['newer:copy'] 
    } 
} 

Я не знать, является ли это принятой «лучшей практикой», но она действительно работает.