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

Я должна признать, долгое время, после того, как я открыла для себя подобные веб-дизайн тулзы, я была своего рода «команд-лайно фобом» Я была под влиянием идеи «это для программистов, не для дизайнеров», и всегда старалась найти другой способ, вместо того, чтобы дать шанс командной строке.
И наконец, я решила попробовать, так как проект, в котором я действительно хотела принять участие, требовал неотъемлемого взаимодействия с командной строкой. Изначально я была немного напугана, но к моему большому удивлению, я быстро обнаружила себя восклицающей
«Это потрясающе, не знаю почему я не начала изучать это несколько лет назад!»
Сегодня, я использую командную строку практически в каждом веб-дизайн проекте и я не могу обойтись без этого. Это невероятно удобно на каждой стадии типичного веб-дизайн процесса.
О серии данных статей
Дело в том, что сейчас я не смогу выполнить большинство вещей, которые вы можете увидеть в типичном ”учимся работать с командной строкой” туториале, даже если моя жизнь зависела от этого. Если вы никогда не знали, что такое mkdir
, или cd
, или ls
, это не важно. Правда заключается в том, что вам, как веб-дизайнеру большинство этого знать и не надо. Единственные навыки командной строки, которые вам нужны, это те, которые делают работу над вашими веб-дизайн проектами более эффективными.
Вот почему цикл этих статей, не о том «как запускать непонятные команды для задач, которые вы никогда не делаете», а также не «сложный процесс разработки, доступным языком для дизайнеров» Серия этих статей специально для веб-дизайнеров, показывающая, как использовать невероятно полезные тулзы для ваших веб-дизайн проектов.
Как только вы добавите командную строку в ваш процесс разработки, это откроет для вас совершенно новый мир, сэкономит кучу вашего драгоценного времени, и я обещаю, вы никогда не оглянётесь назад.
Почему командная строка - это здорово для веб-дизайна
На протяжении серии этих туториалов вы научитесь утлитам командной стоки, которые изменят навсегда ваш подход к веб-дизайну.
После того, как я ознакомлю вас с основами, мы сразу приступим к изучению практических навыков, которые вы сможете использовать прямо сейчас. Как только вы посмотрите на каждую тему, которую мы будем освещать, вы поймёте почему командная строка, обязательный инструмент в веб-дизайне.
Основные темы
Давайте быстро пробежимся по главным темам, которые мы рассмотрим в этих туториалах. Их пять.
1. Использование сторонних библиотек
Веб-дизайнеры часто используют сторонние библиотеки, такие, как jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css и так далее. Без командной строки, добавление внешних библиотек обычно означало:
- Иметь список закладок, где вы можете скачать последнюю версию каждой библиотеки
- Каждый раз возвращаться на сайты, чтобы скачать библиотеку, когда она вам нужна
- Повторять процесс, каждый раз когда вышла новая версия библиотеки
- Затем переносить последнюю версию в каждый проект где была использована данная библиотека
Такого рода менеджмент библиотек медленный и неуклюжий, но с командной строкой всё это в прошлом
Вы можете добавить нужную библиотеку в ваш проект, напечатав несколько слов, например:
bower install jquery
Вы можете обновить ваши библиотеки, написав набор слов, к примеру:
bower update jquery
Вам не придется больше в ручную скачивать библиотеки используя ваш браузер, обновлять их как только вышла новая версия, и это только малая доля того, что вы можете сделать с пакетным менеджером.
2. Ускоряем разработку фронтенд кода
Три языка чаще всего используемые в каждом веб-дизайн проекте: CSS, HTML и JavaScript. Инструменты командной строки открывают для нас новые пути, сборки и разработки кода на этих языках, более продуктивные и действенные.
Одна из наиболее мощных утлит командной строки для CSS - это компиляция препроцессоров, таких как Stylus, Sass / SCSS и LESS. С командной строкой вы быстро сможете скомпилировать любой файл препроцессора, напечатав несколько слов. Вы также можете установить автоматическую компиляцию, так что ваш CSS файл будет перекомпилироваться каждый раз, как только вы меняете файл препроцессора.
С командной строкой мы можем и дальше улучшить наш CSS рабочий процесс с такими вещами как авто добавление вендорных префиксов, отчистка файла, и сжатие. Таким же образом мы можем оптимизировать наш JavaScript, конкатенацией файлов и дальнейшей минификацией.
Что же касается HTML, мы получаем доступ к таким языкам как Jade, который даёт нам возможность писать сокращённый HTML, а также возможность разработать простую, но в тоже время изощрённую систему шаблонов, благодаря этому нам не придется повторять куски кода в каждом новом проекте.
3. Автоматизация со сборщиками проектов
Возможность скомпилировать в CSS несколькими словами, затем минифицировать JavaScript другим набором слов, здорово. Но что действительно потрясающе, так это то, что вы можете сделать всё что нужно вашему проекту одновременно, одной командой.
Используя так называемый «сборщик», одна такая команда, как gulp или grunt может скомпилировать ваши файлы препроцессора, затем объединить их, добавить префиксы, почистить и сжать CSS, после чего ваши Jade файлы будут скомпилированы в HTML, и JS файлы сконкатенированы и минифицированы за несколько секунд.
Также вы можете настроить сборщик, таким образом, что он будет делать всё это, и вам не придется писать команды вручную. Запустив команду gulp watch
или grunt watch
вы можете работать над исходниками своего проекта, а в это время, вся компиляция и оптимизация будет происходить автоматически.
Сборщики очень гибкие и могут быть сконфигурированы как вы пожелаете, так что, нет конца способам, которыми вы можете организовать сборку проекта. Просто создавайте ваши конфигурации, так, чтобы они подходили для ваших нужд.
4. Авторефреш и синхронизация браузера, тестирование на разных устройствах
Авторефреш позволяет вам убрать ваш палец с кнопки рефреша и сконцентрироваться на отладке, вы увидите изменения вашего дизайна в реальном времени.
После того как вы автоматизировали ваши задачи сборщиком, вы можете ко всему прочему добавить авторефреш к конфигу, который был написан для ваших проектов. Вы можете решить для себя, что вызовет авторефреш браузера, будь-то компиляция препроцессора, изменения в html, или что-либо ещё.
Вместе с авторефрешем вы также получаете превью вашего сайта на локалхосте, своего рода симуляцию веб хостинга работающую на вашем компьютере. Это отлично если вы хотите проверить что всё работает как надо по https://
протоколу, вместо file://
протокола.
Ко всему этому вы научитесь запускать синхронизацию браузеров, посредством чего у вас будет один урл, который вы сможете открыть в нескольких браузерах, и каждая открытая страница будет синхронизирована с другими. К примеру, нажмите на кнопку навигации в хроме и вы увидите, как фаерфокс, опера и сафари, отреагируют на это нажатие кнопки одновременно.
Синхронизация браузеров также не ограничена только одним устройством. Вы можете открыть данный урл на своём планшете, телефоне или любом другом устройстве, которое использует это же wi-fi соединение и на каждом экране увидите синхронизированное превью. Всё это даст вам возможность тестировать ваш сайт кроссбраузерно и на нескольких устройствах.
И так как всё будет работать посредством вашего сборщика, запустить это можно будет командой из двух слов, grunt start
или gulp start
.
5. Развёртывание проекта
Создание нового проекта вручную может быть довольно болезненным процессом. Создание структуры директорий и файлов, а также соединение файлов и их конфигурация может быть очень времязатратным.
С использованием командной строки, однако, вы можете развернуть разные виды проектов за несколько секунд, отличное решение если вы хотите использовать сторонний фреймворк с начальным кодом, такой как, Foundation, Bootstrap, HTML5 Boilerplate и Google Web Starter Kit.
С методами, которые мы разберём для развёртывания проектов, у нас будет не только код необходимый для быстрого старта, но также уже готовый конфиг файл сборщика, так что компиляция и превью на локалхосте будут работать из коробки.
Двигаемся вперёд
Если вы готовы, увидимся в первом туториале!