() translation by (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” где угодно, запустите команду:
1 |
[sudo] npm install stylus -g |
Компиляция Stylus
Самый простой способ скомпилировать Stylus используя однострочную команду:
1 |
stylus < example.styl > example.css
|
Эта команда скомпилирует “example.styl” в “example.css”, в той же директории.
Слово stylus запускает команду. Затем мы указываем файл исходников < example.styl, далее > example.css пишем название файла CSS, который будет создан после компиляции.
Вы также можете добавить дополнительные флаги к этой команде, к примеру --compress флаг уберёт все пробелы в итоговом CSS файле:
1 |
stylus --compress < example.styl > example.css |
Вы можете не компилировать каждый файл вручную, в качестве альтернативы вы можете скомпилировать все Stylus файлы в CSS, из одной папки в другую. Для этого после команды stylus укажите папку с исходниками, затем используйте флаг --out, после чего напишите имя папки для скомпилированных CSS файлов.
К примеру, чтобы скомпилировать все Stylus файлы в папке “source_files” в папку “assets/css”, используйте:
1 |
stylus source_files --out 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 можно будет запустив эту команду:
1 |
[sudo] gem install sass |
Sass будет автоматически загружен и установлен для вас. Для того, чтобы убедиться, что sass был установлен запустите эту команду:
1 |
sass -v
|
Вы увидите номер версии и название установленного Sass в вашем терминале:
Компиляция с Ruby Sass
Чтобы скомпилировать файл используя Ruby Sass просто напишите sass, имя исходного файла, пробел, имя, которое будет у скомпилированного CSS файла:
1 |
sass source_file.scss compiled_file.css |
Отслеживание Изменений с Ruby Sass
В Ruby Sass есть встроенная функция “watch” (мы разберём тему об отслеживании файлов позже), которая будет следить за изменениями в файлах и автоматически компилировать их, каждый раз после сохранения.
Чтобы воспользоваться данной функцией добавьте --watch флаг к вашей команде, затем укажите исходный и итоговый файл, разделённые двоеточием вместо пробела:
1 |
sass --watch source_file.scss:compiled_file.css
|
Вы также можете указать целую директорию, вместо одного файла, к примеру:
1 |
sass --watch source/sass:assets/css |
После того, как отслеживание будет запущено вы увидите примерно такую картину в вашем терминале:
Больше Информации о Командах
Узнать все доступные опции Ruby Sass можно, запустив:
1 |
sass --help
|
В вашем терминале вы увидите документацию по командам Sass:
Также вы можете воспользоваться --help флагом, для того чтобы получить больше информации об определённой команде. Просто напишите имя команды, после чего --help и вы получите информацию, как на скриншоте выше.
Установка LibSass / node-sass
Если вы будете работать с LibSass, вы можете поставить его также, как npm библиотеки, которые были установлены с помощью npm до этого, в цикле этих статей.
LibSass написан на C/C++, но есть различные реализации, включая те, которые работают с Node.js. В нашем случае мы будем использовать node-sass.
Для установки node-sass глобально, запустите команду:
1 |
[sudo] npm install node-sass -g |
Компиляция с node-sass
Чтобы скомпилировать файл, напишите node-sass, затем имя исходного файла, после этого имя скомпилированного CSS файла:
1 |
node-sass source_file.scss compiled_file.css |
Указать директорию в которую попадёт скомпилированный CSS файл можно добавив --output флаг и имя необходимой папки:
1 |
node-sass source_file.scss --output assets/css compiled_file.css
|
Отслеживание Изменений с node-sass
Также как и Ruby Sass, node-sass имеет --watch флаг, для авто-компиляции файлов после изменения:
1 |
node-sass --watch source_file.scss compiled_file.scss
|
Вы также можете указать целую директорию для отслеживания, вместо одного файла:
1 |
node-sass --watch source/sass/* --output assets/css |
Используя node-sass для отслеживания изменений в папке в конце не забудьте написать /*, тем самым вы дадите знать компилятору, что хотите отслеживать все файлы в данной директории.
Остановка "watch" Процесса
Когда запущен “watch” процесс его можно остановить либо:
- Закрыв терминал
- Либо нажав CTRL + C
LESS
Препроцессор LESS также очень популярный, вероятнее всего вы могли о нём слышать, так как на нём реализован Twitter Bootstrap фреймворк. LESS замечательный препроцессор с которого неплохо начать, если вы до этого не использовали их, так как вы можете писать обычный CSS.
Прочитайте больше о LESS на: http://lesscss.org/
Установка LESS
Глобально установить LESS, для компиляции “.less” файлов где угодно, можно запустив команду:
1 |
[sudo] npm install less -g |
Компиляция LESS
Откройте терминал в папке содержащей ваш LESS файл и запустите команду lessc, затем название файла, после > символ, и в конце имя, которое вы хотите задать итоговому CSS файлу:
1 |
lessc source_file.less > compiled_file.css
|
Автоматическое Добавление Вендорных Префиксов к CSS
Autoprefixer библиотека npm, которая запрашивает актуальную информацию, с сайта CanIUse.com, о том каким свойствам CSS нужны вендорные префиксы. После чего они будут добавлены в ваш код.
Это будет невероятно полезно, если конечно вы не следите за обновлениями браузеров на регулярной основе, также вы можете обнаружить, что вы добавили префиксы, в которых больше нет необходимости. Это значит, что вы можете писать CSS не думая о префиксах, так как Autoprefixer позаботится о них за вас.
К примеру, autoprefixer сделает из этого кода:
1 |
a { |
2 |
display: flex; |
3 |
}
|
...такой:
1 |
a { |
2 |
display: -webkit-box; |
3 |
display: -webkit-flex; |
4 |
display: -ms-flexbox; |
5 |
display: flex; |
6 |
}
|
Прочитать больше об Autoprefixer можно на: https://www.npmjs.com/package/autoprefixer
Установка Autoprefixer
Установите Autoprefixer глобально командой:
1 |
[sudo] npm install autoprefixer -g |
Авто Добавление Префиксов CSS Файлу
Для автоматического добавление вендорных префиксов CSS файлу используйте команду:
1 |
autoprefixer style.css |
В отличии от препроцессоров, не будет создан новый файл, по умолчанию. Файл, который вы указали будет обновлён и все нужные префиксы будут добавлены непосредственно в него.
Если же вы хотите, чтобы Autoprefixer создал ещё один файл, добавьте --output фалг и напишите после него имя для css файла с префиксами:
1 |
autoprefixer unprefixed.css --output prefixed.css
|
Оптимизация CSS
Пожалуй вы всегда хотите, чтобы CSS файл, который будет находится на вашем сайте был сжат до максимально возможных размеров. Для достижения этого подойдут следующие техники по оптимизации:
- Сжатие - удаление пробелов и комментариев
- Чистка - модификация самого кода, чтобы он занимал меньше места
Сжатие с Препроцессорами
Stylus, Ruby Sass и node-sass все обладают возможностью сжать ваш CSS во время процесса компиляции.
Для Stylus, добавьте --compress флаг:
1 |
stylus --compress < source_file.scss > compiled_file.css |
Для Ruby Sass добавьте --style флаг, после чего напишите compressed:
1 |
sass source_file.scss compiled_file.css --style compressed
|
Для node-sass добавьте флаг --output-style, затем напишите compressed:
1 |
node-sass --output-style compressed source_file.scss compiled_file.css
|
Чистка и Сжатие с 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 глобально командой:
1 |
[sudo] npm install clean-css -g |
Использование clean-css
Для чистки CSS файла используйте:
1 |
cleancss style.css |
Обратите внимание: Не смотря на то что в названии библиотеки есть тире “clean-css”, используйте cleancss без тире для запуска команд.
Чтобы указать новое имя файла, который появится после генерации clean-css, используйте -o флаг, затем напишите имя итогового файла, после, имя файла который вы хотите оптимизировать:
1 |
cleancss -o cleaned.css style.css
|
Для clean-css есть ещё несколько доступных опций, о которых можно прочитать в: Как Использовать Clean CSS CLI.
HTML и JavaScript
Jade
Jade замечательный язык, который компилируется в HTML, с ним можно писать более короткий код при разработке, а также создавать системы шаблонов, благодаря, которым вам не придется переписывать похожий код по нескольку раз.
Прочитать больше о Jade можно здесь: https://www.npmjs.com/package/jade
Установка Jade
Для глобальной установки Jade запустите команду:
1 |
[sudo] npm install jade -g |
Компиляция Jade
Jade был создан тем же человеком, который разработал Stylus и обладает таким же синтаксисом для команд < и > знаки для компиляции файла:
1 |
jade < index.jade > index.html
|
Данная команда скомпилирует “index.jade” в “index.html”, в той же директории.
Для компиляции всех файлов в определённой директории используйте:
1 |
jade dir_name |
Указать директорию, в которую будут добавлены ваши HTML файлы можно флагом --out, между именем исходной и итоговой папки:
1 |
jade src_dir --out html_dir
|
Чтобы использовать отслеживание изменений и автоматическую компиляцию, добавьте сразу после команды jade флаг --watch.
Для одного файла:
1 |
jade --watch < index.jade > index.html |
Для директорий:
1 |
jade --watch dir_name
|
1 |
jade --watch dir_name --out html_dir |
Конкатенация и Минификация JavaScript Файлов
Также как мы хотим оптимизировать наши CSS файлы, мы хотим, чтобы наши JavaScript файлы были доставлены до браузера пользователя, как можно более эффективно.
Привычное дело, что в каждом проекте есть несколько JS файлов, к примеру Modernizr, jQuery, а также наш собственный JS код, но нам хотелось-бы уменьшить количество http запросов, которые делает наш сайт. По мимо этого JavaScript должен загружаться невероятно быстро.
Лучший способ разобраться с обоими задачами одновременно, объединить наши JavaScript файлы в один, тем самым понадобиться лишь один http запрос для загрузки, а также минифицировать итоговый файл, уменьшив его размер.
Мы будем использовать UglifyJS библиотеку, которая позаботиться о данном процессе.
Для глобальной установки uglify-js запустите:
1 |
[sudo] npm install uglify-js -g |
Чтобы объединить два JavaScript файла, затем убрать пробелы и комментарии, воспользуйтесь uglifyjs командой, после которой не забудьте указать имя исходного и итогового файла, с пробелом между ними. Затем напишите флаг --output и имя нового сконкатенированного и минифицированного файла:
1 |
uglifyjs input1.js input2.js --output input.min.js
|
Помимо удаления пробелов и комментариев, вы можете воспользоваться сжатием, тем самым ваш код будет модифицирован, а размер его уменьшится. Для этого добавьте --compress флаг к концу команды:
1 |
uglifyjs input1.js input2.js --output input.min.js --compress |
Другая доступная опция по оптимизации - “искажать” код, при этом все имена функций, переменных и аргументов будут уменьшены до одного знака. Для того чтобы использовать эту опцию добавьте --mangle в конце команды:
1 |
uglifyjs input1.js input2.js --output input.min.js --mangle |
Вы также можете сжать и исказить одновременно, добавив оба флага:
1 |
uglifyjs input1.js input2.js --output input.min.js --mangle --compress |
Прочитайте больше о командах UglifyJS на: https://www.npmjs.com/package/uglify-js
Заметка о Минификации Сторонних Библиотек JavaScript
Если вы объединяете и/или минифицируете сторонние библиотеки, такие, как jQuery, Modernizr и так далее, убедитесь, что вы используете не минифицированные версии файлов этих библиотек. Обычно это плохая идея минифицировать уже минифицированные файлы, ваши библиотеки могут перестать функционировать, как надо.
Вы можете определить файлы, которые уже были минифицированы, все они обычно следуют соглашению о названиях “name.min.js”, не минифицированная версия будет носить имя “name.js”.
В Следующем Туториале
Теперь вам известно, как выполнять задачи, различными полезными командами, но что если вы можете сделать всё необходимое в вашем проекте разом, одновременно, лишь одной командой?
В следующем туториале вы научитесь этому, используя сборщики, вы сможете настроить все задачи для вашего проекта, таким образом компиляция, добавления вендорных префиксов, объединение и оптимизация файлов будет выполняться за несколько секунд.
Увидимся в следующем туториале!
