Как я могу объявить зависимости в index.html с помощью Grunt?

Question

Мой AngularJS приложение структурирована следующим образом:

myproj 
|-- app 
| |-- index 
| |  |-- index.html 
| |  |-- index.js 
| |-- page1 
| |  |-- page1.html 
| |  |-- page2.js 
| |-- page2 
|-- common 
| |-- resources 
| |  |-- page1resources.js 
| |  |-- page2resources.js 

index.html моя главная страница и содержит UI-маршрутизатор, который контролирует способ отображения страниц. Чтобы заставить это работать, я должен объявить все зависимости в index.html, поэтому у меня есть список из 20 файлов .js и несколько таблиц стилей.

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

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

Как вы управляете импортом и зависимостями в приложении AngularJS с Grunt?

Answer 1

Вы ищете Grunt wiredep

Grunt имеет эту удивительную утилиту под названием wiredep, который делает в основном те вещи, которые вы хотите. Он ищет файлы .js, в которые вы его устанавливаете, и вводит их в файл index.html.

Простая конфигурация wiredep в Gruntfile.js будет выглядеть следующим образом:

wiredep: { 

    task: { 

    // Point to the files that should be updated when 
    // you run `grunt wiredep` 
    src: [ 
     'app/views/**/*.html', // .html support... 
     'app/views/**/*.jade', // .jade support... 
     'app/styles/main.scss', // .scss & .sass support... 
     'app/config.yml'   // and .yml & .yaml support out of the box! 
    ], 

    options: { 
     // See wiredep's configuration documentation for the options 
     // you may pass: 

     // https://github.com/taptapship/wiredep#configuration 
    } 
    } 
} 

Кроме того, вы можете посмотреть в Yeoman, который имеет AngularJS генератор для вашего проекта. Используя этот генератор, вы можете вводить новые контроллеры, директивы прямо из CLI, не задумываясь о том, чтобы вводить их, которые wiredep обрабатывает для вас.