Как использовать Yeoman для скаффолдинга веб-приложений
Инструменты

Как использовать Yeoman для скаффолдинга веб-приложений

Оригинал: How to Use Yeoman to Scaffold Your Next Web App, Wesley Tate Smith

Итак, вы решили создать свое очередное веб-приложение. Вам необходимо установить менеджер зависимостей (bower), менеджер зависимостей на стороне сервера (npm/node), инструменты для тестирования, css-фреймворки / препроцессоры, html-шаблонизаторы, js-фреймворки, средства сборки, линтеры, минификатор и т.д. и т.д. и наконец, вам нужно создать корректную файловую структуру приложения и убедиться, что все взаимодействует как нужно.

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

Yeoman, на помощь!

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

Но по существу, именно это предлагает вам Yeoman. Все, что нужно — это выбрать, какие инструменты вы хотели бы развернуть на своей машине, а Yeoman создаст готовую структуру приложения. Yeoman предоставляет так называемые «генераторы», которые можно вызывать с помощью команды yo, чтобы сгенерировать структуру приложения.

Как начать?

Если у вас еще не установлены Node.js и npm, в первую очередь нужно их поставить. Откройте терминал и введите следующую команду:


node -v && npm -v 

Если у вас не установлен Node.js, можно воспользоваться инструкциями по установке на сайте. Вместе с Node.js будет установлен и npm.

После того, как Node.js установлен, вам потребуется глобально установить еще несколько инструментов. В частности, вам потребуются Yeoman, Bower и Grunt или Gulp в качестве системы сборки. Я рекомендую установить оба и посмотреть, что вам больше понравится. Обратите внимание, если вы получаете сообщения об ошибках при установке, возможно, необходимо разрешить root доступ с помощью «sudo».


npm install -g yo bower grunt-cli gulp

Теперь вы готовы.

Использование генераторов

Использование генераторов Yeoman

Прежде всего позвольте мне сказать, что Yeoman имеет огромное количество генераторов, с помощью которых вы можете создать любую комбинацию инструментов, какую захотите. В следующем примере я покажу, как создать структуру приложения Angular.js с jQuery, Bootstrap (со Stylus в качестве CSS препроцессора), Jade в качестве HTML-шаблонизатора, Jasmine / Mocha для тестирования, Gulp в качестве системы сборки и еще несколько инструментов, которые необходимы, чтобы как можно скорее начать разработку.

Для начала, установим генератор Yeoman, который мы будем использовать для генерации Angular / Gulp приложения.


npm install -g generator-gulp-angular 

Теперь создадим директорию проекта и перейдем в эту директорию:


mkdir myapp && cd myapp
Использование генераторов Yeoman

Вы можете выбрать одну (или более) опций, показынных на рисунке выше. Все это разные генераторы Yeoman. Для этой демонстрации я выбрал генератор Gulp Angular, который выделен на рисунке. Нажмите Enter.

Далее, выберем версию Angular, которую вы хотели бы установить.

Использование генераторов Yeoman

Выберем необходимые модули Angular.js.

Использование генераторов Yeoman

Выберем версию jQuery, которую вы хотели бы установить.

Использование генераторов Yeoman

Выберем REST библиотеку.

Использование генераторов Yeoman

Выберем роутер.

Использование генераторов Yeoman

Выберем ваш любимый UI фреймворк!

Использование генераторов Yeoman

Выберем компоненты UI фреймвока, которые вы бы хотели установить.

Использование генераторов Yeoman

Выберем CSS препроцессор. Мой любимый - Stylus!

Использование генераторов Yeoman

Выберем JS препроцессор (я выбрал чистый JavaScript, хотя сам поклонник CoffeeScript).

Использование генераторов Yeoman

Выберем HTML-шаблонизатор. Я выбираю Jade.

Использование генераторов Yeoman

Вы можете двигаться дальше. Пусть Yeoman позаботиться об остальном. Теперь Yeoman вызовет команды bower install и npm install, чтобы установить зависимости, и создаст структуру приложения. Если вы получаете ошибки доступа при установке, возможно вам необходимо устанавливать npm зависимости с помощью «sudo npm install».

И тут начинается самое веселое. Когда зависимости будут установлены, в корневой директории проекта запустите команду:


gulp serve

Ваш терминал должен выглядеть как показано на рисунке. После нажатия на Enter gulp начнет отслеживать изменения файлов проекта и запустит локальный сервер на порту 3000 (или другом, если порт 3000 занят).

Использование генераторов Yeoman

Вы также будете перенаправлены в браузере на страницу localhost:port, где будет открыта главная страница приложения со ссылками на все установленные зависимости / инструменты!

Использование генераторов Yeoman

Откроем проект в любимом редакторе и посмотрим на структуру каталогов.

Использование генераторов Yeoman

Проверим структуру файлов!

Использование генераторов Yeoman

Поскольку мы запустили команду gulp serve, gulp отслеживает изменения всех файлов проекта, мы можем изменить и сохранить файл, и убедиться, что изменения применились без необходимости обновлять страницу.

Например, изменим файл stylus ...

Использование генераторов Yeoman

добавим ...

Использование генераторов Yeoman

… убедимся, что измемения применились без необходимости обновлять страницу:

Использование генераторов Yeoman

Молодец, Yeoman

Если вы хотите настроить проект и приступить к разработке как можно скорее, я настоятельно рекомендую добавить Yeoman в свой рабочий процесс. Вы сэкономите кучу времени и головной боли, а инструменты сборки, такие как Grunt или Gulp, будут отслеживать изменения в зависимостях или файлах и пересобирать проект. Если вы стакнетесь с какими-либо проблемами при использовании Yeoman, не стестяйтесь обратиться ко мне!

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться