Создание папки проекта

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

Генерирование рабочего окружения в проекте

Я просмотрел пару генераторов. Давайте быстро пройдёмся по списку:

  1. Ayen — содержит live-reload, Browserify, Bower, Jade шаблоны, CSS препроцессор по-выбору и инструменты тестирования. К сожалению, предназначен только для одностраничных приложений.
  2. cd myproject
    yo ayen

    Запуск работы будет через команду в Терминале

    gulp watch
  3. Tapp — более простой по структуре набор. Содержит всё то же самое, кроме инструметнов тестирования. Немного плохо поддержиает Jade-шаблоны, но в целом подойдёт для работы.
    cd myproject
    yo tapp

Запуск окружения с помощью Gulp

Запуск работы будет через команду в Терминале

gulp serve

После этого Gulp:

  • выполнит преобразования файлов jade->html, coffee->javascript, styl->css
  • запустит локальный сервер и откроет страницу вашего браузера с адресом локального сервера
  • запустит процесс watch, который будет отслеживать изменения в коде файлов и будет перезагружать сервер, если такие появились и соответственно перезагружать необходимые вкладки браузера

Итак вы создали папку проекта, использовали в ней генератор для создания проекта. Дальше можно начать создавать .jade файлы для сайта, после этого создаёте файл стилей .styl.

Документация:

Если вы не знаете ни первого, ни второго, то вам хорошо помогут инструменты преобразования: