Yeoman – это утилита для выстраивания удобного и современного процесса front-end разработки. Состоит она из трех компонентов:

Yo – утилита для быстрой установки основы приложения.
Grunt – javascript утилита выстраивающая процесс билда.
Bower – менеджер зависимостей/пакетов клиентских javascript библиотек.
С Grunt и Bower вы уже знакомы, осталось разобраться только с Yo.

Перед тем как мы приступим к основной части этого урока удостоверьтесь, что на вашем компьютере имеется следующий предустановленный софт:

Node.js
NPM
Ruby
Sass and Compass Gems for Ruby
LiveReload
Ну что же, теперь мы готовы прочувствовать всю прелесть Yeoman. Создадим папку с будущем проектом Yeoman, откроем консоль и перейдем в эту папку. *Обратите внимание, что все последующие команды консоли выполняются внутри папки с проектом.

Начнем с установки. Осуществляется она следующей командой:

npm install -g yo grunt-cli bower

Теперь установим все необходимые в нашем проекте генераторы, в этом примере мы будем строить основу для проекта на Backbone.js в качестве MVC фреймворка и Mocha в качестве библиотеки для тестирования. Следовательно установим их генераторы:

npm install -g generator-backbone
npm install -g generator-mocha

Следующим шагом будет развертывание самой основы с помощью генераторов, делается это следующей командой. Обратите внимание –template-framework=handlebars, указывает на то, что в качестве клиентского шаблонизатора проекта мы будем использовать Handlebars:

yo backbone --template-framework=handlebars

Во время установки Yeoman будет задавать вам вопросы по тому, какие библиотеки или инструменты включать в сборку. На все вопросы требуется отвечать либо утвердительно (Y), либо отрицательно (n). Я отвечаю на все – да! Включаю в проект Twitter Bootstrap, Sass и Require.js.

Теперь вся основа для нашего проекта готова! Остались лишь небольшие штрихи.

Например вот этой командой…

npm install & bower install

…мы удостоверимся, что установили все зависимости npm и bower, используемые нашим проектом. Поэтому рекомендую вводить ее каждый раз после установки проекта.

В Yeoman используется модуль Grunt – connect, который использует Node.js в качестве тестового сервера, что позволяет очень удобно без установки какого либо Back-end запустить тестовый серверный вариант вашего проекта. Делается это следующей командой Grunt:

 grunt server

После ввода данной команды, я подозреваю, что вы как и я увидите в консоли ошибку связанную с livereload. Я думаю, что это недостатки бета версии yeoman. Но к счастью исправить это довольно легко, во первых удостоверьтесь, что livereload включен (я использую плагин Chrome), а во вторых надо открыть файл Gruntfile.js в корне вашего проекта и дописать после yeoman: yeomanConfig, следующий конфигурационный объект Livereload c адресом порта:

   livereload: {
      port: 35728 
   },

Теперь еще раз смело вводим в консоли…

 grunt server

…и наслаждаемся открывающимся окном в браузере с симпатичным текстом приветствия Yeoman. Ну вот и все, в вашей папке рабочая и готовая к использованию среда для разработки веб-приложения, под капотом которой: Backbone.js, JQuery, Underscore.js, Modernizer, Twitter Bootstrap, Sass и Require.js. Так же, вы сразу же можете писать код в CoffeeScript синтаксисе, в cборке уже предустановлен плагин для гранта, производящий компиляцию .coffee в .js . Добавьте к этому приправу из удобного, легкого и настраиваемого использования Grunt задач и установки компонентов с помощью Bower и вы получите супер производительность в работе с вашим проектом. Теперь главное использовать все это с умом. А напоследок, давайте рассмотрим остальные команды установленного нами генератора Backbone.js. С помощью следующих команд мы сможем быстро создавать заготовки моделей, коллекций, видов, роутеров и даже шаблонов. А если при установке вы выбрали проект на Require.js , то все эти составляющие еще и будут обернуты в Require.js модули!

//по умолчанию все устанавливается в папку app/scripts. Но вы можете это поменять в Gruntfile.js
yo backbone:all  //установить иерархию папок backbone.js проекта
yo backbone:model todo //создать модель с названием todo
yo backbone:view todo //создать вид с названием todo
yo backbone:collection todo //создать коллекцию с названием todo
yo backbone:router main //создать роутер с названием todo