Создание папки проекта
Yeoman like a Pro
Yeo, man (Йоу мэн) — эй, чувак.
Генераторы Yo помогают настроить быстро рабочее окружение. Наше рабочее окружение будет включать в себя Jade, Stylus, Gulp, Browserify, Bower.
Вы можете самостоятельно собрать свой проект (рабочее окружение), для последних рекомендую курс на Lynda.com автор Ray Vilyalobos «Web Project Workflows with Gulp.js, Git, and Browserify».
Установка и удаление генератора:
Генераторы устанавливаются и удаляются с помощью Node Package Manager (NPM). Найти их можно по ссылке http://yeoman.io/generators/ (поиск там кривой, поэтому просто вставляйте поочерёдно необходимые слова, типа Stylus, Jade...)
Для установки введите в терминале команду:
npm install -g generator-nameOfGenerator
npm uninstall -g generator-nameOfGenerator
После установки генератора, заходите в папку вашего проекта и запускаете генератор с помощью команды yo
:
cd myproject
yo nameOfGenerator
Генерирование рабочего окружения в проекте
Я просмотрел пару генераторов. Давайте быстро пройдёмся по списку:
- Ayen — содержит live-reload, Browserify, Bower, Jade шаблоны, CSS препроцессор по-выбору и инструменты тестирования. К сожалению, предназначен только для одностраничных приложений.
- Tapp — более простой по структуре набор. Содержит всё то же самое, кроме инструметнов тестирования. Немного плохо поддержиает Jade-шаблоны, но в целом подойдёт для работы.
cd myproject yo tapp
cd myproject
yo ayen
Запуск работы будет через команду в Терминале
gulp watch
Запуск окружения с помощью Gulp
Запуск работы будет через команду в Терминале
gulp serve
После этого Gulp:
- выполнит преобразования файлов jade->html, coffee->javascript, styl->css
- запустит локальный сервер и откроет страницу вашего браузера с адресом локального сервера
- запустит процесс watch, который будет отслеживать изменения в коде файлов и будет перезагружать сервер, если такие появились и соответственно перезагружать необходимые вкладки браузера
Итак вы создали папку проекта, использовали в ней генератор для создания проекта. Дальше можно начать создавать .jade файлы для сайта, после этого создаёте файл стилей .styl.
Документация:
- http://learnboost.github.io/stylus/ Доки по Стилус
- http://jade-lang.com/ Доки по Джейд
Если вы не знаете ни первого, ни второго, то вам хорошо помогут инструменты преобразования:
- http://html2jade.org/ HTML в Jade
- http://css2stylus.com/ — CSS в Stylus
- http://js2.coffee/ Javascript в Coffee и обратно