Yeoman.io для быстрой сборки Web проекта на Bootstrap

Категория: JavaScript

Yeoman (он же yo) - это набор утилит для развертывания Web проектов и JavaScript приложений в ускоренном режиме. Yo может генерировать (scaffolding) несколько типов приложений с помощью плагинов (generators), но в данной статье речь пойдет о базовом проекте (webapp) на Twitter Bootstrap 3.

Установка утилиты Yeoman (также будут установлены Grunt и Bower):

sudo npm install -g yo

Установка базового генератора (generator-webapp, без этого другие генераторы могут не работать):

sudo npm install -g generator-webapp

Генерация Web приложения

Для запуска интерактивного генератора Web приложения выполните в корне Вашего проекта:

yo webapp

Что происходит дальше? На первый взгляд - магия) Но, дальше вы поймете, что все действия довольно тривиальные. Вы выбираете устанавливать ли Twitter Bootstrap и Modernizr. Инициализируются Grunt и Bower, со всеми сопутствующими конфигами и плагинами. Создаются каталоги app/, test/ и node_modules/ в который чуть позже будут загружены необходимые плагины (этот каталог будет весить ~ 70MB!).

Далее необходимо будет установить зависимости проекта с помощью Bower:

bower install

На этом этапе будет создан каталог app/bower_components/, а в него загружены jquery 1.10.2, sass-bootstrap и modernizr.

После этого, необходимо запустить сборку проекта (deployment), на этом этапе Grunt выполняет все указанные в конфиге таски - хинтинг, тесты, компиляция, конкатенация + минификация, сжатие изображений и прочие:

grunt
Внимание!

Не знаю так ли задумано, но в файле Gruntfile.js допущены стилистические ошибки - отступ в 2 пробела вместо 4:

Running "jshint:all" (jshint) task
Gruntfile.js
  line 315  col 7  Expected 'grunt' to have an indentation at 9 instead at 7.
  line 316  col 7  Expected 'grunt' to have an indentation at 9 instead at 7.
✖ 2 problems

Исправьте отступы и запустите команду grunt повторно.

Внимание!

При ошибке: Warning: Running "compass:dist" (compass) task. Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work., вам необходимо будет установить Ruby и гем Compass:

sudo apt-get install ruby1.9.3
sudo apt-get install ruby-compass


категория: JavaScript