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

Командная Строка в Веб-дизайне: Ускоряем Разработку Фронтенд Кода

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called The Command Line for Web Design.
How to Install NPM and Bower
The Command Line for Web Design: Automation With Grunt

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

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

Вы научитесь как использовать командную строку для:

  • Компиляции кода препроцессоров (Stylus, Sass, и LESS) в CSS
  • Автоматического добавления вендорных префиксов в CSS
  • Сжатия, объединения и чистки CSS
  • Компиляции Jade в HTML
  • Конкатенации и минификации JavaScript

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

CSS Препроцессоры

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

Три препроцессора из которых стоит выбирать - это Stylus, Sass / SCSS и LESS. На Tuts+ есть огромный набор потрясающий туториалов и курсов, которые помогут вам изучить синтаксис всех трёх препроцессоров.

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

Stylus

У большинства веб-дизайнеров есть любимой препроцессор, мой - Stylus. Он обладает минималистичным синтаксисом, который довольно быстро писать, мощным функционалом, а также на нём основаны такие библиотеки, как Jeet и Kouto-Swiss.

Вы можете прочитать подробнее о Stylus на: http://stylus-lang.com/

Установка Stylus

Для того, чтобы установить Stylus глобально, что позволит вам компилировать файлы “.styl” где угодно, запустите команду:

Компиляция Stylus

Самый простой способ скомпилировать Stylus используя однострочную команду:

Эта команда скомпилирует “example.styl” в “example.css”, в той же директории.

Слово stylus запускает команду. Затем мы указываем файл исходников < example.styl, далее > example.css пишем название файла CSS, который будет создан после компиляции.

Вы также можете добавить дополнительные флаги к этой команде, к примеру --compress флаг уберёт все пробелы в итоговом CSS файле:

Вы можете не компилировать каждый файл вручную, в качестве альтернативы вы можете скомпилировать все Stylus файлы в CSS, из одной папки в другую. Для этого после команды stylus укажите папку с исходниками, затем используйте флаг --out, после чего напишите имя папки для скомпилированных CSS файлов.

К примеру, чтобы скомпилировать все Stylus файлы в папке “source_files” в папку “assets/css”, используйте:

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

Есть несколько других опций, которые можно применить работая со Stylus в командной строке. Прочитать о них можно, посетив: http://stylus-lang.com/docs/executable.html

Sass / SCSS

Sass пожалуй самый популярный препроцессор на сегодняшний день. Он невероятно мощный с ним можно добиться потрясающих результатов, также вокруг этой технологии образовалось довольно активное комьюнити. На основе Sass были созданы такие библиотеки, как Compass, Bourbon и Susy.

Прочитайте больше о Sass на: http://sass-lang.com/

У вас есть два выбора когда дело доходит до компиляции Sass на вашем компьютере: вы можете использовать для этого Ruby, либо LibSass.

Изначально Sass был создан на Ruby, так что если вам нужна 100% поддержка функций Sass, Ruby - ваш выбор. К примеру если вы собираетесь работать с Compass самый простой способ будет использовать Ruby Sass.

LibSass была создана как альтернатива Ruby Sass благодаря, которой можно компилировать sass посредством npm библиотеки. В этом случае sass компилируется гораздо быстрее, время компиляции составляет примерно половину секунды, по сравнению с 5-ю секундами Ruby Sass. Однако некоторые функции и сторонние библиотеки не будут работать с LibSass.

Какой из компиляторов выбрать, полностью зависит от ваших предпочтений, однако я предлагаю использовать LibSass ради быстрой компиляции, если же вам конечно не нужно что-то специфичное (например Compass), в этом случаее вам придётся использовать Ruby компилятор.

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

Установки Ruby Sass

Для компиляции Sass посредством Ruby, на вашем компьютере должен быть установлен Ruby.

Если вы на Mac'е, вам повезло, так как Ruby предустановлен и вам не нужно ничего делать.

Если вы на Windows, отправляйтесь на http://rubyinstaller.org/, затем скачайте и запустите установщик. После чего поставить Sass можно будет запустив эту команду:

Sass будет автоматически загружен и установлен для вас. Для того, чтобы убедиться, что sass был установлен запустите эту команду:

Вы увидите номер версии и название установленного Sass в вашем терминале:

Компиляция с Ruby Sass

Чтобы скомпилировать файл используя Ruby Sass просто напишите sass, имя исходного файла, пробел, имя, которое будет у скомпилированного CSS файла:

Отслеживание Изменений с Ruby Sass

В Ruby Sass есть встроенная функция “watch” (мы разберём тему об отслеживании файлов позже), которая будет следить за изменениями в файлах и автоматически компилировать их, каждый раз после сохранения.

Чтобы воспользоваться данной функцией добавьте --watch флаг к вашей команде, затем укажите исходный и итоговый файл, разделённые двоеточием вместо пробела:

Вы также можете указать целую директорию, вместо одного файла, к примеру:

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

Больше Информации о Командах

Узнать все доступные опции Ruby Sass можно, запустив:

В вашем терминале вы увидите документацию по командам Sass:

Также вы можете воспользоваться --help флагом, для того чтобы получить больше информации об определённой команде. Просто напишите имя команды, после чего --help и вы получите информацию, как на скриншоте выше.

Установка LibSass / node-sass

Если вы будете работать с LibSass, вы можете поставить его также, как npm библиотеки, которые были установлены с помощью npm до этого, в цикле этих статей.

LibSass написан на C/C++, но есть различные реализации, включая те, которые работают с Node.js. В нашем случае мы будем использовать node-sass.

Для установки node-sass глобально, запустите команду:

Компиляция с node-sass

Чтобы скомпилировать файл, напишите node-sass, затем имя исходного файла, после этого имя скомпилированного CSS файла:

Указать директорию в которую попадёт скомпилированный CSS файл можно добавив --output флаг и имя необходимой папки:

Отслеживание Изменений с node-sass

Также как и Ruby Sass, node-sass имеет --watch флаг, для авто-компиляции файлов после изменения:

Вы также можете указать целую директорию для отслеживания, вместо одного файла:

Используя node-sass для отслеживания изменений в папке в конце не забудьте написать /*, тем самым вы дадите знать компилятору, что хотите отслеживать все файлы в данной директории.

Остановка "watch" Процесса

Когда запущен “watch” процесс его можно остановить либо:

  • Закрыв терминал
  • Либо нажав CTRL + C

LESS

Препроцессор LESS также очень популярный, вероятнее всего вы могли о нём слышать, так как на нём реализован Twitter Bootstrap фреймворк. LESS замечательный препроцессор с которого неплохо начать, если вы до этого не использовали их, так как вы можете писать обычный CSS.

Прочитайте больше о LESS на: http://lesscss.org/

Установка LESS

Глобально установить LESS, для компиляции “.less” файлов где угодно, можно запустив команду:

Компиляция LESS

Откройте терминал в папке содержащей  ваш LESS файл и запустите команду lessc, затем название файла, после > символ, и в конце имя, которое вы хотите задать итоговому CSS файлу:

Автоматическое Добавление Вендорных Префиксов к CSS

Autoprefixer библиотека npm, которая запрашивает актуальную информацию, с сайта CanIUse.com,  о том каким свойствам CSS нужны вендорные префиксы. После чего они будут добавлены в ваш код.

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

К примеру, autoprefixer сделает из этого кода:

...такой:

Прочитать больше об Autoprefixer можно на: https://www.npmjs.com/package/autoprefixer

Установка Autoprefixer

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

Авто Добавление Префиксов CSS Файлу

Для автоматического добавление вендорных префиксов CSS файлу используйте команду:

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

Если же вы хотите, чтобы Autoprefixer создал ещё один файл, добавьте --output фалг и напишите после него имя для css файла с префиксами:

Оптимизация CSS

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

  • Сжатие - удаление пробелов и комментариев
  • Чистка - модификация самого кода, чтобы он занимал меньше места

Сжатие с Препроцессорами

Stylus, Ruby Sass и node-sass все обладают возможностью сжать ваш CSS во время процесса компиляции.

Для Stylus, добавьте --compress флаг:

Для Ruby Sass добавьте --style флаг, после чего напишите compressed:

Для node-sass добавьте флаг --output-style, затем напишите compressed:

Чистка и Сжатие с clean-css 

Если вы не используете CSS препроцессор, или вы хотите максимально оптимизировать код, вы можете воспользоваться библиотекой clean-css, которая обладает различными опциями для сжатия.

Обычно процесс сжатия заключается в удалении пробелов и комментариев в вашем CSS. Библиотека clean-css в свою очередь способна:

  • Объединить повторяющиеся имена селекторов
  • Объеденить повторяющиеся свойства в приделах одного селектора
  • Округлить числа с большим количеством десятичных
  • Убрать точку с запятой и пробелы в конце стилей селекторов

Объединение повторяющихся селекторов может быть полезным, для примера, хотели бы вы, чтобы все стили лэйаута для определённого класса находились в “layout.css” файле, когда всё стили отвечающие за цвета находились в “colors.css”.

Округление чисел отлично подойдёт, когда вы использовали функции препроцессора, для конвертации значений в rem и в итоге получили, что-то на подобии 2.3649858573rem.  С clean-css это число будет округлено до двух десятичных, в конце-концов у вас будет более короткое 2.36rem значение.

Вы можете прочитать больше о clean-css на: https://github.com/jakubpawlowicz/clean-css

Установка clean-css

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

Использование clean-css

Для чистки CSS файла используйте:

Обратите внимание: Не смотря на то что в названии библиотеки есть тире “clean-css”, используйте cleancss без тире для запуска команд.

Чтобы указать новое имя файла, который появится после генерации clean-css, используйте -o флаг, затем напишите имя итогового файла, после, имя файла который вы хотите оптимизировать:

Для clean-css есть ещё несколько доступных опций, о которых можно прочитать в: Как Использовать Clean CSS CLI.

HTML и JavaScript

Jade

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

Прочитать больше о Jade можно здесь: https://www.npmjs.com/package/jade

Установка Jade

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

Компиляция Jade

Jade был создан тем же человеком, который разработал Stylus и обладает таким же синтаксисом для команд < и > знаки для компиляции файла:

Данная команда скомпилирует “index.jade” в “index.html”, в той же директории.

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

Указать директорию, в которую будут добавлены ваши HTML файлы можно флагом --out, между именем исходной и итоговой папки:

Чтобы использовать отслеживание изменений и автоматическую компиляцию, добавьте сразу после команды jade флаг --watch.

Для одного файла:

Для директорий:

Конкатенация и Минификация JavaScript Файлов

Также как мы хотим оптимизировать наши CSS файлы, мы хотим, чтобы наши JavaScript файлы были доставлены до браузера пользователя, как можно более эффективно.

Привычное дело, что в каждом проекте есть несколько JS файлов, к примеру Modernizr, jQuery, а также наш собственный JS код, но нам хотелось-бы уменьшить количество http запросов, которые делает наш сайт. По мимо этого JavaScript должен загружаться невероятно быстро.

Лучший способ разобраться с обоими задачами одновременно, объединить наши JavaScript файлы в один, тем самым понадобиться лишь один http запрос для загрузки, а также минифицировать итоговый файл, уменьшив его размер.

Мы будем использовать UglifyJS библиотеку, которая позаботиться о данном процессе.

Для глобальной установки uglify-js запустите:

Чтобы объединить два JavaScript файла, затем убрать пробелы и комментарии, воспользуйтесь uglifyjs командой, после которой не забудьте указать имя исходного и итогового файла, с пробелом между ними. Затем напишите флаг --output и имя нового сконкатенированного и минифицированного файла:

Помимо удаления пробелов и комментариев, вы можете воспользоваться сжатием, тем самым ваш код будет модифицирован, а размер его уменьшится. Для этого добавьте --compress флаг к концу команды:

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

Вы также можете сжать и исказить одновременно, добавив оба флага:

Прочитайте больше о командах UglifyJS на: https://www.npmjs.com/package/uglify-js

Заметка о Минификации Сторонних Библиотек JavaScript

Если вы объединяете и/или минифицируете сторонние библиотеки, такие, как jQuery, Modernizr и так далее, убедитесь, что вы используете не минифицированные версии файлов этих библиотек. Обычно это плохая идея минифицировать уже минифицированные файлы, ваши библиотеки могут перестать функционировать, как надо.

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

В Следующем Туториале

Теперь вам известно, как выполнять задачи, различными полезными командами, но что если вы можете сделать всё необходимое в вашем проекте разом, одновременно, лишь одной командой?

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

Увидимся в следующем туториале!

Advertisement
Advertisement
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.