Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

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

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Live Reload & BrowserSync
The Command Line for Web Design: Wrapping Up

Russian (Pусский) translation by Anton Lisovsky (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, с помощью этих команд:

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

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

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

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

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

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

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

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

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

Yeoman

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

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

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

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

Установка Yeoman

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

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

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

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

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

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

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

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

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

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

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

Команды

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Команды

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

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

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

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

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

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

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

В Заключение

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.