Командная строка в Веб-дизайне: Scaffolding New Projects

() translation by (you can also view the original English article)

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

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

Есть тысячи различных типов проектов, которые вы можете создать таким образом, используя командную строку, но для целей этого туториала мы рассмотрим четыре из них, проектов основанных на:

Foundation
Bootstrap
HTML5 Boilerplate
Google Web Starter Kit

Foundation

У Foundation есть собственный интерфейс командной строки (CLI), отлично подходит для быстрого создания проектов работающих с Foundation фреймворком. Давайте посмотрим, как использовать Foundation CLI для создания проекта, использующего Compass.

Установите Foundation CLI и Необходимые Компоненты

Первое, что нужно сделать для создания Foundation проекта - установить необходимый CLI. До того как вы это сделаете, убедитесь, что у вас установлены пять необходимых компонентов на вашей системе:

Git
NodeJS
Bower
Ruby
библиотека grunt-cli

Мы рассмотрели установку NodeJS, Git и Bower в статье - Использование Сторонних Библиотек, Ruby мы поставили в Ускоряем Разработку Фронтенд Кода, grunt-cli мы установили в Автоматизация со Сборщиками Проектов.

После того, как мы установили Ruby, нам нужно поставить гемы Compass и Bundler, с помощью этих команд:

1	gem install compass

1	gem install bundle

Теперь установите Foundation CLI следующей командой:

1	gem install foundation

Создание Foundation Проекта

Каждый раз когда вы хотите начать новый Foundation проект, откройте терминал в том месте где вы хотите его создать и запустите следующую команду:

1	foundation new project_name

После чего вы увидите структуру файлов и папок только что созданного проекта, выглядит это так:

Вам нужно открыть терминал в директории вашего проекта, в нашем случае “project_name”.

Гем “bundler”, который мы установили ранее, будет использоваться для добавления всех необходимых библиотек. Для этого запустите команду:

bundle

Сделать это нужно только один раз, сразу после создания Foundation Compass проекта.

В браузере, ваш проект будет выглядеть следующим образом:

Теперь мы готовы приступить к разработке нашего проекта. Мы имеем встроенный компилятор Sass, который будет отслеживать изменения в “.scss” файлах, после чего компилировать их в css. Активируйте его командой:

1	bundle exec compass watch

Yeoman

Yeoman инструмент созданный специально для создания, развёртывания новых проектов. Он работает на NodeJS, интегрирован с Bower для управления зависимостями и использует Grunt или Gulp для сборки.

После установки Yeoman создание нового проекта будет выглядеть примерно следующим образом:

Найдите и установите генератор для Yeoman, для проекта, который вы хотите создать, к примеру generator-h5bp для проекта на HTML5 Boilerplate.
Напишите yo <название_генератора> для генерации нового проекта, к примеру yo h5bp

Узнайте больше о Yeoman на: http://yeoman.io/

Установка Yeoman

Перед тем как начать работу с Yeoman, нам понадобиться установленный, глобально bower, grunt-cli и gulp, к этому времени всё это должно у вас быть, если вы следовали туториалам из этой серии.

Установите Yeoman глобально командой:

1	npm install -g yo

Теперь всё готово, вам осталось найти генераторы и создать новый проект.

Создаём Bootstrap Проект

Чтобы создать проект на Bootstrap мы воспользуемся generator-gulp-bootstrap. Помимо всего прочего, этот генератор содержит фреймворк Bootstrap, jQuery и Modernizr, BrowserSync, автоматическую Sass компиляцию посредством LibSass, автоматический линтинг JavaScript и оптимизацию изображений.

Установите Генератор

Установите генератор глобально:

1	[sudo] npm install -g generator-gulp-bootstrap

Создайте Проект

Откройте терминал в том месте где вы хотите создать новый проект и запустите:

1	yo gulp-bootstrap

В вашем терминале появится следующая картина, также будут заданы вопросы, хотите-ли вы использовать Bootstrap и Modernizr:

После того, как генератор сделает всё необходимое и завершит свою работу, структура проекта будет выглядеть следующим образом:

Команды

Чтобы собрать ваш проект для продакшена (финальная версия проекта с оптимизированными изображениями итд.) используйте команду:

gulp

Чтобы запустить превью на локалхосте с автоматической компиляцией и перезагрузкой страниц, запустите:

1	gulp watch

В браузере ваш Bootstrap проект будет выглядеть так:

Создаём HTML5 Boilerplate Проект

Создать новый HTML5 Boilerplate проект можно с помощью generator-h5bp.

Установка Генератора

Установите генератор глобально, командой:

1	[sudo] npm install generator-h5bp -g

Создаём Проект

Создайте новый проект следующей командой:

yo h5bp

Вам предоставят выбор, хотите вы или нет включить документацию для вашего проекта, после чего генератор начнёт свою работу.

Структура нового HTML5 Boilerplate будет выглядеть следующим образом:

В браузере вы увидите простой текст “Hello world!”, но если вы посмотрите на исходный код, вы заметите, что там есть всё необходимое для разработки HTML5 сайта:

Создаём Google Web Starter Kit Проект

Web Starter Kit проект от Google, разработанный как “набор шаблонов и инструментов для разработки под разные устройства”. Вы можете ознакомиться со всеми его возможностями на: https://developers.google.com/web/starter-kit/

Для создания подобного проекта мы используем generator-mobile.

Установите Генератор

Установите генератор глобально, командой:

1	[sudo] npm install yeoman/generator-mobile -g

Создаём Проект

Создайте GWSK проект следующей командой:

yo mobile

В терминале вам придётся ответить на серию вопросов, от результата, которых будет зависеть, какой проект будет в итоге будет сгенерирован:

Когда генератор закончит процесс создания нового проекта, у вас будет структура, как на картинке ниже:

Команды

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

1	gulp serve

Превеью сайта выглядит следующим образом:

Обратите Внимание: После запуска команды gulp serve вы можете увидеть сообщение об ошибке, browser-sync couldn’t be found. Если так, установите browser-sync, для вашего проекта, следующей командой:

1	[sudo] npm install browser-sync

Для финальной сборки проекта запустите команду:

gulp

Для получения информации о производительности вашего веб-сайта, запустите:

1	gulp pagespeed

Эта команда предоставит вам данные “pagespeed” в вашем терминале:

И если вы выбрали один из хостингов упомянутых в вопросах, во время создания вашего проекта, вы можете разместить сайт на этом хостинге, следующей командой:

1	gulp deploy

В Заключение

На этом всё, теперь в вашем распоряжении есть набор инструментов для создания и работы с популярными фронтенд фреймворками, вот она - сила командной строки!