Даже если у вас текущая специализация в разработке это back-end, а не front-end, все равно стоит посмотреть в сторону Bower. Даже наоборот, будет гораздо легче управлять зависимостями всего лишь правкой конфига и одной командой bower install, по аналогии с привычным composer install. Единственное, что изменится, это пути откуда будут подключаться js и css файлы.
Установка node
Есть несколько способов установки node, я пройдусь по некоторым, но лично я предпочитаю сборку из исходников.
Для Debian можно поставить из репозиториев jessie.
1 2 3 4 5 6 7 8 9 10 |
nano /etc/apt/sources.list deb http://ftp.de.debian.org/debian/ jessie main contrib non-free nano /etc/apt/apt.conf.d/80default-release APT::Default-Release "stable"; apt-get update apt-get -t jessie install nodejs npm |
В этом случае странно то, что бинарник ставится с именем nodejs, а не node.
Так же можно поставить автоматическим скриптом.
1 2 3 4 |
curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash - apt-get install -y nodejs |
Этот скрипт сам добавит репозиторий или ppa, добавит ключи и обновит локальный кеш пакетов.
Так же можно установить через Node Version Manager (nvm)
1 2 3 4 5 6 7 8 9 10 11 12 |
apt-get install build-essential libssl-dev curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash #relogin or source ~/.profile #show list of versions nvm ls-remote nvm install 0.12.4 |
Все эти способы хороши и будут работать, но я предпочитаю все же исходники. Собираться будет последняя версия из исходников.
1 2 3 4 5 |
sudo apt-get update sudo apt-get upgrade sudo apt-get install gcc cpp g++ automake1.9 autoconf libtool flex bison python-software-properties |
Дальше собираем и ставим. Может длиться достаточно долго, минут 10-15.
1 2 3 4 5 6 7 8 9 |
cd /usr/local/src wget http://nodejs.org/dist/node-latest.tar.gz tar zxvf node-latest.tar.gz cd node-v0.1* ./configure make sudo make install |
Проверяем версию, должна быть последняя.
1 2 3 4 |
node -v v0.12.4 |
Установка bower и пример использования
Теперь можно установить bower, который по сути является node пактом. Bower предоставляет обертку над Git и спрециализируется на работе с front-end пакетами.
1 2 3 4 5 |
apt-get install git-core npm cache clean npm install -g bower |
1 2 3 |
bower help |
Последняя команда выдаст справку. Что же мы получили в итоге?
Теперь устанавливать заивисимости для front-end очень легко! Можно например установить jquery или конкретную версию jquery 1.8
1 2 3 4 5 6 7 |
bower install jquery #version bower install jquery#1.8.1 #from git with tag bower install git://github.com/components/jquery.git#~1.8.1 |
Какие пакеты доступны в bower? Да практически все, посмотреть можно на специальном сайте http://bower.io/. Тут есть и jquery и bootstrap и angular и underscore и просто какие-то пакет и расширения, вроде пакетов к jquery или например bootstrap-datepicker, вообще все что нужно для front-end.
Использовать пакеты для подключения в проекте так же легко, все будет устанавливаться в папку bower_components по умолчанию.
1 2 3 |
<script src="bower_components/jquery/dist/jquery.min.js"></script> |
Но можно опеределить папку для установки самостоятельно, положив в корень проекта файл .bowerrc с содержимым
1 2 3 4 5 |
{ "directory": "public/bower_components" } |
Такой путь я использую для Zend Framework 2. Как же теперь сохранить установленные зависимости в проекте? Все очень просто, можно при установке пакетов использовать опцию –save, она добавит в файл bower.json в корне проекта зависимость. А можно редактировать этот файл самостоятельно. Выглядеть он может например так.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
{ "name": "project", "description": "A project js libs", "version": "0.0.1", "homepage": "http://project.ru", "license": "MIT", "private": true, "dependencies": { "angular": "1.3.*", "angular-route": "1.3.*", "angular-loader": "1.3.*", "angular-mocks": "1.3.*", "angular-resource": "1.3.*", "bootstrap": "3.3.*", "html5-boilerplate": "4.3.*", "jquery": "2.*", "underscore": "1.7.*", "html5shiv": "3.7.*", "respond-minmax": "1.4.*", "eonasdan-bootstrap-datetimepicker": "4.*", "smalot-bootstrap-datetimepicker": "2.*", "bootstrap-datepicker": "1.4.*", "chosen": "https://github.com/harvesthq/chosen/releases/download/v1.3.0/chosen_v1.3.0.zip" } } |
Дальше остается только выполнить bower install и подключить файлы в head как обычно.