Yeoman. Генератор проектов для angular.js

Уже говорил, что в ближайший месяц все рабочее время буду тратить на разработку нового корпоративного приложения на angular.js. Поскольку большего опыта в этом деле (моя основная работа никогда не была связана с front-end разработкой) еще нет, приходится ежедневно читать кучу мануалов и разбираться со многими вещами на ходу. Сегодня я хотел бы рассказать об одном полезном инструменте, который сильно экономит время на создании новых проектов на основе angular.

Как начать новый проект на angular.js

Прочитав очередной мануал, или решив создать тестовый проект для испытаний, сталкиваешься с чередой однообразных действий. Подготовить новый проект для испытаний с angular.js можно несколькими способами. Первый и самый простой – накидать структуру папок проекта, загрузить необходимые компоненты (bootstrap, angular.js) и заинклудить их в «index.html». Вроде нет ничего сложного, но создав за день 20 таких проектов, начнешь проклинать всех и вся.

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

Способ классный, но чуть позже я узнал про проект Yeoman, выполняющий эту работу еще более элегантно.

Yeoman

Yeoman – это набор приложений, позволяющих автоматизировать создание новых web-проектов и облегчить процесс добавления к ним новых пакетов. Yeoman состоит из трех отдельных компонент:

yo - основное приложение, отвечающее за генерацию фундамента нового проекта;

grunt – хорошо зарекомендовавшее себя в JavaScript-мире приложении, позволяющее выстроить процесс сборки проекта;

bower – менеджер зависимостей, решающий вопросы с добавлением/удалением в проект дополнительных пакетов, JavaScript библиотек.

Подготавливаем окружение

Перед тем как начать использовать Yeoman, тебе необходимо позаботиться о системном окружении. В твоей системе должны быть развернуты:

Git. Если ты ни разу не пользовался Git, то рекомендую почитать мою вводную статью о применении этой чудесной системы управления версиями.

Node.JS –платформа, созданная на базе движка V8, превращающая JavaScript в язык общего назначения.

npm – менеджер пакетов для node.js. Он в разы облегчит процесс установки новых пакетов для node.js.

Все выше перечисленное программное обеспечение доступно для разных операционных систем. Я устанавливал их в Windows 7, никаких трудностей и танцев с бубном не возникло.

Создаем новый angular.js проект с помощью Yeoman

Первым делом нам требуется установить bower, grunt-cli, yo, karma (это делается один раз) и сам генератор будущих angular.js проектов. Открываем консоль GIT и вбиваем в нее вот такую команду:

npm install –g yo grunt-cli bower karma generator-angular

Запустится процесс загрузки и установки всех перечисленных в команде компонент. Он выполняется достаточно быстро. Теперь для создания стартового angular.js проекта требуется выполнить пару команд:

mkdir project-name && cd $_
yo angular

В первой команде я создаю в текущей папке директорию «project-name» для нового проекта и сразу перехожу в нее. Далее, я выполняю вызов утилиты yo и передаю в качестве параметра имя соответствующего генератора проектов (в моем случае это angular).

Генератор задаст вопросы касательно компонент, которые требуется включить в новый проект. Отвечаем на вопросы, нажимаем “enter” и через пару секунд каркас будущего приложения (структура папок, шаблоны для оформления контроллеров, библиотеки и т.д.) будет готов. Уже сейчас можно запуститься встроенный web-сервер и протестировать созданную заготовку в работе:

grunt server

Команда запустит web-сервер на 9000 порту (можно изменить в конфиге) и сразу откроет браузер с тестовой страницей будущего приложения. Если страница открылась, значит, все компоненты были настроены правильно, можно приступать к написанию кода.