Показаны сообщения с ярлыком Tools. Показать все сообщения
Показаны сообщения с ярлыком Tools. Показать все сообщения

понедельник, 12 октября 2015 г.

Установка и настройка Bower

Bower — это система управления JavaScript пакетами. Если вам приходилось работать с Composer, то Bower — это то же самое, только для JavaScript пакетов.

Использовать Bower очень удобно в командных проектах которые зависят от множества JavaScript библиотек. Всё что вам необходимо, это файл проекта bower.json, в котором отмечены все JavaScript зависимости, а об остальном позаботится bower. Bower сам закачает указаные зависимости нужной версии и аккуратно положит их в папку bower_components.

В этой статье я опишу весь процесс установки Bower, а также рассмотрю как настроить Bower для прокси.

Установка Bower на Windows

Прежде всего необходимо установить Node.js. Скачайте установщик с офф-сайта и запустите его. Установка особых настроек не требует, принимайте все по умолчанию. После того как Njde.js установится нужно перезагрузить машину.

В принципе, можно приступить к установке Bower. Для этого в консоли, под администратором, введите команду:

npm install -g bower

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

npm config set proxy http://<proxy_host>:<proxy_port>
npm config set https-proxy http://<proxy_host>:<proxy_port>

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

Опять же, насчет прокси. Чтобы настроить bower на работу через прокси, создайте файл %HOMEPATH%\.bowerrc со следующим содержимым:

{
  "proxy":"http://<proxy_host>:<proxy_port>",
  "https-proxy":"http://<proxy_host>:<proxy_port>"
}

Это все. Bower готов к работе.

Установка Bower на Ubuntu

Команда для установки nodejs

$ sudo apt-get install nodejs

После установки nodejs нужно создать символическую ссылку на исполняемый файл nodejs следующим образом:

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

Для установки Bower необходимо установить npm командой:

$ sudo apt-get install npm

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

$ npm config set proxy http://<proxy_host>:<proxy_port>
$ npm config set https-proxy http://<proxy_host>:<proxy_port>

Только теперь, с помощью npm, вы можете установить bower такой командой:

$ sudo npm install -g bower

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

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

{
  "proxy":"http://<proxy_host>:<proxy_port>",
  "https-proxy":"http://<proxy_host>:<proxy_port>"
}

Теперь Bower готов к работе.

понедельник, 27 июля 2015 г.

Ручная установка composer

Если вы разрабатываете web приложения с использованием PHP фреймворков и до сих пор не пользуетесь composer, то пришло время начать это делать. На самом деле composer очень удобная утилита управления PHP пакетами. Особенно удобным composer становится при командной разработке.

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

В этой статье я опишу процесс ручной установки утилиты composer на Windows и на Ubuntu. Причем установка будет глобальной для системы.

Да. Согласитесь, что само слово "глобальной" уже вызывает недоверие и сомнение у скептиков. Но это только в том случае, если вы не понимаете что делаете и зачем вы это делаете. В нашем случае, на самом деле, все очень просто: мы ставим composer глобально чтобы можно было его использовать из любого места системы (из любой папки). Как вы убедитесь ниже никаких глобальных супер-изменений системы мы не производим.

Установка composer в Windows 7

Для Windows существует инсталлятор и скачать его можно с офф-сайта проекта, но мы пойдем менее простым но зато понятным путем — установим composer вручную.

Первым делом, создадим новую папку "C:\Program Files\composer" и скачаем дистрибутив в эту папку (в самом низу страницы доступны релизы для ручного скачивания). В той же папке создадим файл composer.bat такого содержания:

@php "%~dp0composer.phar" %*

Теперь, пропишем путь к нашей папке в переменную окружения PATH и перегрузим систему. После чего composer буден доступен из любой папки. Откроем CMD, или ConEmu и введем команду:

$ composer -V

Кстати, нужно заметить, что в ConEmu вывод разноцветный, и воспринимается лучше чем в стандартном, монотонном CMD.

Если вы собираетесь работать с composer в корпоративной сети, с выходом в Интернет через прокси, то вам придется использовать команды composer'а в связке с командой SET. Например:

SET HTTP_PROXY=http://<proxy>:<port>
composer create-project symfony/framework-standard-edition my_project_name

Переменная окружения HTTP_PROXY устанавливается всего один раз для консольного сеанса и действует пока консоль не будет закрыта. Таким образом, все последующие команды composer'а можно вводить без команды SET.

У меня был случай, когда после переустановки ConEmu в другую папку, composer "упал" и отказывался работать. Решение проблемы нашел на офф-сайте.

Установка composer в Ubuntu

В Ubuntu, как и следовало ожидать, все попроще. Скачиваем дистрибутив в папку ~ (домашняя папка пользователя). В самом низу страницы доступны релизы для ручного скачивания. Далее выполняем последовательность команд:

$ sudo mv ~/composer.bin /usr/bin/composer
$ sudo chmod 755 /usr/bin/composer

Введите команду

$ composer -V

и получите версию утилиты.

Если говорить о прокси настройках для composer в Ubuntu, то здесь, опять же, все намного проще. А именно, в конец файла ~/.bashrc нужно добавить две строчки:

export http_proxy=http://<proxy>:<port>
export https_proxy=http://<proxy>:<port>
Таким образом, мы указали терминалу bash экспортировать две переменные при каждом его запуске.

Это все.

Текстовый редактор Atom

В последнее время, довольно большой популярности набирает текстовый редактор Atom, от команды Github. Одна из причин роста популярности Atom — его расширяемость. Функционал Atom легко расширяется подключением соответствующих пакетов. Помимо этого, Atom очень привлекательный на вид и удобный в использовании.

Важно понимать, что Atom не является полноценным IDE, таким как Netbeans или PhpStorm, например. Это простой текстовый редактор с расширенными возможностями, которые можно настраивать под свои нужды.

В этой статье я опишу как установить и настроить Atom для использования HTML, JavaScript, AngularJs и PHP.

Установка на Windows 7

Установка не вызывает затруднений — скачиваем установщик с офф-сайта и запускаем его. Настроек никаких особых не нужно производить кроме указания пути установки.

Установка на Ubuntu

В Ubuntu все также просто. В терминале выполняем последовательность команд:

$ sudo add-apt-repository ppa:webupd8team/atom
$ sudo apt-get update
$ sudo apt-get install atom

Если у вас соединение через прокси, то последовательность команд должна быть следующей:

export http_proxy=http://<proxy>:<port>
export https_proxy=http://<proxy>:<port>

$ sudo -E add-apt-repository ppa:webupd8team/atom
$ sudo apt-get update
$ sudo apt-get install atom

Установка пакетов

Установка пакетов производится проще простого — через интерфейс Atom

  • Для Windows — File → Settings → Install
  • Для Ubuntu — Edit → Preferences → Install

Находим нужный пакет и устанавливаем его. Вот список используемых мною пакетов:

  1. atom-save-all — назначает сочетанию клавиш Ctrl + S сохранения всех измененных файлов. По умолчанию Atom сохраняет только активный файл.
  2. javascript-snippets — пакет для автоматического дополнения JavaScript NodeJS кода.
  3. AngularJS-Atom — пакет для автоматического дополнения AngularJS тегов и кода.
  4. autoclose-html — пакет для автоматического закрытия HTML тегов.
  5. atom-bootstrap3 — пакет для автоматического дополнения классов Twitter Bootstrap.
  6. autocomplete-php — пакет для автоматического дополнения PHP методов.
  7. color-picker — очень удобный пакет для подбора цветов.

Опять же, относительно прокси. В моем случае доступные пакеты в Atom отображаются, а вот установить их не получается никак — ни через интерфейс ни с помощью apm или npm. В таком случае, если пакет не имеет зависимостей от других пакетов, то он легко устанавливается копированием в папку ~/.atom/packages, где символ ~ означает домашний каталог пользователя.

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

среда, 22 июля 2015 г.

Консольный эмулятор ConEmu

Если вы пользователь ОС Windows, и не желаете переходить на Ubuntu, или другую Unix-подобную систему, то для более удобной работы с командной строкой я предлагаю установить очень мощный и удобный в использовании консольный эмулятор ConEmu.

Если же вы думаете, что командная строка вам не понадобится, так как вы используете Windows, то спешу заверить вас, что вы сильно ошибаетесь. Существует большое количество программ которые очень упрощают жизнь web разработчику. К таким программам относятся: composer, bower и git. Возможно, существуют графические варианты этих программ, но всегда удобнее будет работать с ними из консоли.

ConEmu — живой и довольно популярный проект заслуживающий внимания. И хотя ConEmu обладает огромными возможностями, я же наведу небольшой список тех из них, которые дают основательный повод заменить им обычный CMD. Итак:

  • открытие нескольких вкладок. Вкладки можно открывать как от обычного пользователя так и от имени администратора.
  • удобный copy/paste. Выделенный мышкой текст автоматически копируется в буфер, а вставка происходит по нажатию Ctrl + V.
  • подсветка текста разными цветами. Практически все вышеупомянутые вспомогательные программы подсвечивают свой вывод разными цветами. Это очень удобно по сравнению с монотонным выводом в CMD.

Об ConEmu рассказывать можно много, но лучше попробовать самому.

Ярлыки

Популярные записи