Командная Строка в Веб-дизайне: Использование Сторонних Библиотек

Мы часто используем сторонние библиотеки в наших веб-дизайн проектах.

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

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

В этом туториале вы узнаете, как организовать сторонние библиотеки, всего-навсего написав команду, размером от двух до пяти слов.

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

Два Самых Популярных Пакетных Менеджера

Для того, чтобы начать использовать командную строку для организации сторонних библиотек, нам понадобятся  «система управления пакетами», известная также, как «пакетный менеджер». На сегодняшний день самый популярный выбор среди веб-дизайнеров npm и Bower, технологии, которые мы будем изучать сегодня.

Установка npm (через Node.js)

Скорее всего вам приходилось слышать о Node.js, данная технология обладает огромным количеством полезных инструментов основанных на JavaScript, начиная от платформ для создания блогов, сред разработок, медиа центров, заканчивая операционными системами.

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

Не думайте, что npm обозначает «Node Package Manager». Официально название обозначает «npm is not an acronym - npm не акроним», в шапке npm сайта вы можете увидеть шутки по этому поводу, после каждого обновления страницы «never poke monkeys - никогда не пугайте обезьян» и «newts parading majestically - тритоны разгуливают величественно».

На данный момент npm предоставляет доступ и помогает организовать работу с 127,664 библиотекам, которые были созданы для совершенно разнообразных целей. Помимо библиотек используемых для веб-дизайна, вы также найдёте такие библиотеки и инструменты, как:

• Stylus
• node-sass
• LESS
• Jade
• UglifyJS
• Bower
• Grunt
• Gulp
• Yeoman
• Autoprefixer
• BrowserSync
• Foundation CLI
• UglifyJS
• clean-css
• Jeet.gs
• Kouto Swiss

В данном туториале мы будем использовать npm вместе с Node.js, однако это независимая сущность, которая может быть использована с другими технологиями, к примеру вышедший недавно IO.js.

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

Bower

Вообще-то моё знакомство с пакетными менеджарами началось с Bower. Кто-то посоветовал мне, сказав

«Ты когда-нибудь использовала Bower? Он просто потрясающий!»

У меня не было чёткого понимания, как bower может быть полезен, так что я отправилась на www.bower.io и мне было достаточно одного взгляда на набор доступных библиотек, чтобы всё встало на свои места.

Bower, даёт вам доступ к таким вещам, как:

• Bootstrap
• AngularJS
• jQuery
• Font Awesome
• HTML5 Boilerplate
• Animate.css
• Normalize.css
• Modernizr
• Underscore
• Flat UI
• jQuery UI
• Handlebars
• Masonry

Шансы довольно высоки, что вы используете хотя бы одну или две из этих библиотек в своих проектах, на регулярной основе. С bower управление ими будет гораздо проще и быстрее.

Когда следует применять Bower вместо npm

В некоторых случаях, вы можете заметить, что библиотека доступна одновременно в npm и Bower. Если вы столкнулись с такой ситуацией, что вы должны использовать?

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

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

Bower создан для управления фронтенд библиотеками, так что выбирайте его, если вы ищите библиотеку, которая будет работать на стороне клиента, в браузере.

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

Установка npm и Bower

Устанавливаем Node.js и npm

Установка npm довольно простая, так как он идёт вместе с установщиком Node.js. Зайдите на http://www.nodejs.org и скачайте установщик для вашей ОС. После установки Node.js, npm поставится автоматически и вы сможете следовать далее, запуская необходимые команды в данном туториале.

Важно! Даже если Node.js стоит на вашей системе, выполните все шаги ниже, так вы можете быть уверены, что у вас стоит последняя версия. Если нет, некоторые команды, которые следует запустить в данной статье могут не работать.

Обновляем npm

Согласно сайту npm, есть вероятность, что с устновщиком Node.js идёт старая версия npm.

Проверить версию можно запустив:

1

[sudo] npm install npm -g

Установите Git / MsysGit

Git, вместе с Node.js и npm, необходимы для использования Bower. Git также необходим для других веб-дизайн библиотек, которые вы возможно захотите использовать, следовательно, давайте поставим всё необходимое и будем двигаться дальше.

Для OSX Пользователей

Для пользователей OSX зайдите на сайт Git'а, скачайте установщик и запустите его, как и любой другой: http://git-scm.com/download/mac

Для Пользователей Windows

Для запуска Bower под Windows вам понадобится особая версия Git, под названием msysGit. Нажмите кнопку Download и вы скачаете установщик, пока не запускайте его: http://msysgit.github.io

Причина по которой я сказала, пока его не запускать, так как вам следует быть осторожными и выбрать необходимые настройки, во время установки. Когда вы увидите тоже самое, что изображено на скриншоте ниже, убедитесь, что вы выбрали опцию Run Git from the Windows Command Prompt.

Чтобы узнать больше информации об установке msysGit для Bower посмотрите на: A Note for Windows Users.

Установка Bower

Bower может быть установлен посредством npm, запустите эти команды:

1

[sudo] npm install -g bower

Пользователи Mac, так как мы используем -g флаг, для глобальной инсталляции Bower, не забудьте добавить sudo перед самой командой, затем введите ваш пароль, когда это будет необходимо.

Основы npm и Bower

Инициализация Проекта

npm и Bower работают со специальными файлами, которые содержат информацию о проекте и список используемых библиотек. C npm проектами эти файлы называются «package.json» , а в Bower проектах он называется «bower.json». Самый простой способ создать эти файлы, использовать команду init. Давайте так и сделаем.

Посредством npm

В вашем терминале, в котором открыт корень вашего проекта, запустите эту команду

1

npm init

При этом вам будет задана серия вопрос, от ответов на которые,  будет зависеть итоговый «package.json».

Больше информации о команде npm init вы можете прочитать на: https://docs.npmjs.com/cli/init

Посредством Bower

Опять же, откройте в вашем терминале корень проекта, и запустите команду:

1

bower init

Также, как и при процессе инициализации npm, вам будут заданы вопросы, после ответов будет создан соответствующий «bower.json» файл.

Прочитайте больше о bower init по ссылке: http://bower.io/docs/creating-packages/#bowerjson

Поиск библиотек

После инициализации проекта, мы готовы к добавлению библиотек. Для этого нам нужно найти необходимые библиотеки через npm либо Bower.

Искать нужно в подходящем месте, так как необходимо знать правильное имя в npm или Bower системе, для того, чтобы добавить и установить свежую версию библиотеки.

Для npm

Вы можете искать библиотеки, которые хотите использовать с npm, в поисковой строке на верху их домашней страницы.

Также есть возможность искать непосредственно из командной строки, используя npm search <package>, однако лично я считаю, что легче искать на npm сайте.

Когда вы найдёте нужную библиотеку запомните её название.

Для Bower

Поиск библиотек для Bower осуществляется через http://bower.io/search/.

Также, как и с npm, запомните нужное имя библиотеки, которую вы будете использовать.

Установка Новых Библиотек

Как только вы найдёте библиотеку, которая вам нужна, пришло время её установить. На этом этапе вам и пригодится название библиотеки, которое вы запомнили. В инструкциях ниже, используйте название в тех местах где вы увидите <package> в командах.

Для npm

Поставить библиотеку локально, то есть только внутри вашей директории проекта, запустите:

1

npm install <package>

Библиотека будет загружена в поддиректорию называемую «node_modules», тем самым вы сможете её использовать в вашем проекте. К примеру:

Помимо установки локально, также имеется опция глобальной установки библиотеки.

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

Для глобальной установке добавьте -g флаг к вашей команде:

1

[sudo] npm install <package> -g

Для Bower

Инсталляция библиотек для Bower практически такая же, как и для npm, используйте команду:

1

bower install <package>

Разница лишь в том что библиотеки Bower окажутся в поддиректории под названием «bower_components», к примеру:

Так как вы будете использовать Bower для добавления фронтенд библиотек для определённых проектов, все установки будут производиться локально, следовательно нет необходимости в -g флаге.

Работа с Зависимостями

Если вы собираетесь копировать, переносить или делиться проектом, в котором был использован npm или Bower с другими, вам следует знать об управлении зависимостями. Давайте я объясню почему.

Помните файлы, которые мы создали ранее; «package.json» и «bower.json». В каждом из этих файлов вы можете указать зависимости вашего проекта.

Вы уже видели, как библиотеки npm ставятся в папку с именем «npm_modules», в то время как для Bower в «bower_components». Так вот отличная новость заключается в том, что если вы будете делиться вашим проектом, вы можете не включать данные директории, если в ваших файлах «package.json» и «bower.json» имеется список необходимых зависимостей.

Это поможет вам сэкономить пару сотен мегабайт, делая перенос вашего проекта, гораздо проще.

Когда кто-то другой получит доступ к вашему проекту, ему будет достаточно запустить npm install и все библиотеки перечисленные в файле «package.json» будут автоматически загружены в новую директорию «npm_modules».

Точно также команда bower install автоматически поставит зависимости указанные в «bower.json» файле, в новую директорию «bower_components».

Продакшен и Девелопмент Зависимости

Есть два типа зависимостей:

1. Продакшен зависимости - в контексте веб-дизайна, библиотеки, которые будут работать на стороне фронтенда, допустим Modernizr для кросс-браузерной совместимости.

2. Девелопмент зависимости - в контексте веб-дизайна, библиотеки, используемые во время процесса разработки, допустим LESS для компиляции .less файлов.

Bower и npm оба позволяют вам обозначить продакшен и девелопмент зависимости. Тем не менее, мы говорили ранее, что вы будете использовать Bower для фронтенд библиотек, а npm для девелопмент зависимостей. Таким образом мы настроим Bower для продакшен зависимостей, npm в свою очередь будет работать с девелопмент зависимостями.

Метод для настройки зависимостей Bower и npm ничем не отличается, просто укажите флаг команде отвечающей за установку библиотеки.

Установка Девелопмент Зависимостей

Чтобы обозначить библиотеку, как девелопмент зависимость добавьте --save-dev флаг, например

1

npm install <package> --save-dev

Библиотека будет утсановлена точно так же, как мы видели ранее, однако она будет добавлена в списке вашего «package.json», как devDependencies, например

Установка Продакшен Зависимостей

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

1

bower install <package> --save

В этом случае библиотека буедт добавлена в список dependencies, в «bower.json», к примеру

Обратите внимание: когда устанавливаете npm библиотеки глобально с -g флагом, вы можете не использовать --save или --save-dev флаги.

Обновление Библиотек

Обновление библиотек также является командой из одной строчки, как для Bower, так и для npm.

Для npm

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

1

npm update <package>

В свою очередь обновить глобальные библиотеки можно с флагом -g:

1

[sudo] npm update <package> -g

Вы также можете не указывать название библиотеки, чтобы обновить их все разом.

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

1

npm update

А для обновления глобально установленных библиотек запустите:

1

[sudo] npm update -g

Для Bower

Обновление Bower библиотек не отличается от npm. Из корня вашего проекта, где расположена директория «bower_components», запустите команду:

1

bower update <package>

Актуальная версия будет автоматически установлена и добавлена в «bower_components»

Использование npm и Bower библиотек

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

Для Bower библиотек процесс не будет отличаться от привычного добавления ресурсов, используя script или link элементы в вашем HTML, загружая файлы напрямую из вашей папки «bower_components».

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

Вы узнаете, как этого добиться в будущем туториале Автоматизация со сборщиками проектов.

Библиотеки установленные через npm обычно будут использованы в командной строке, либо скриптом сборщика проектов.

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

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

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

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

Вы узнаете об использовании командной строки, для компиляции препроцессоров, автопрефикса CSS, JS и CSS оптимизации, и компиляции шаблонов HTML.

Увидимся в следующем туториале, Ускоряем разработку фронтенд кода.