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

Для установки пакетного менеджера Bower предварительно нужно установить NPM и NodeJS.

После этого введите в командной строке:
npm install bower -g

Параметр -g нужен для того, чтобы установить Bower глобально и иметь возможность запускать его из любого каталога.

Установка NodeJS и NPM в Windows

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

У NodeJS есть официальный установщик для Windows, поэтому установка будет проще простого:

  1. скачиваем установщик с официального сайта NodeJS;
  2. запускаем скаченный установщик и нажимаем несколько раз кнопку Next, попутно соглашаясь с условиями.

Для того, чтобы проверить, установился ли NodeJS и NPM, откройте консоль Windows или Git bush (если консоль уже была открыта, то нужно её закрыть и открыть снова, чтобы обновить системный PATH) и выполните команды:
node -v
и
npm -v

Если команды выдали версии, например: «v6.2.0» и «3.8.8», то это значит, что всё успешно установлено и можно работать.

Что такое пакетные менеджеры и зачем их использовать

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

Как работают менеджеры пакетов

У каждого пакетного менеджера есть файл с настройками, в котором нам нужно указать от каких пакетов зависит наш код, чтобы пакетный менеджер их скачал и установил к нам в систему. При этом каждый пакет может зависеть от других пакетов. Пакетный менеджер распутывает эту систему зависимостей и устанавливает всё что нужно, поэтому их ещё называют менеджерами зависимостей. Вот пример: для работы я использую фрэймоворк Twitter Bootstrap и для его работы нужен jQuery. Поэтому если я укажу своему менеджеру пакетов установить Twitter Bootstrap, то он автоматически установит и jQuery.

Какие пакетные менеджеры использовать

Я в своей работе использую три разных пакетных менеджера:

  • Composer — пакетный менеджер для мира PHP. Использую для загрузки чужого PHP-кода;
  • Bower — пакетный менеджер для фронтенда. Через него я загружаю все Javascript-библиотеки;
  • NPM — пакетный менеджер для среды NodeJS. Использую для установки Gulp и его плагинов.

Для чего нужен SSH-ключ и как его создать под Windows

SSH-ключ — это специальный код, который позволяет удалённому компьютеру понять кто вы есть и какими правами на этом компьютере обладаете.

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

Как работает SSH-ключ

SSH-ключ разделён на две части. Одна часть называется приватной и должна всегда храниться только на вашем компьютере. Вторая часть ключа называется публичной и эту часть нужно копировать на другие компьютеры. При подключении к удалённому компьютеру он сравнивает публичную часть, которую вы ему дали с приватной частью, которая хранится у вас. Если части ключа совпадают, то вы получаете доступ к удалённому компьютеру (на самом деле всё гораздо сложнее, но принцип работы именно такой). На вашем компьютере может быть создано сколько угодно SSH-ключей. То есть вы можете использовать один SSH-ключ для доступа к сотне компьютеров или для каждого удалённого компьютера создавать отдельный ключ.

Защита SSH ключа

Вы никогда и ни при каких обстоятельствах не должны никому передавать приватную часть своего ключа. Чтобы эту приватную часть нельзя было украсть можно её зашифровать, тогда даже если она попадёт в чужие руки её не смогут использовать. Если вы зашифруете приватную часть SSH-ключа, то каждый раз при его использовании вам нужно будет вводить ключ шифрования, называемый passphrase. Есть общее правило безопасности: если ключ используется не скриптом, а человеком, то он должен быть зашифрован.

Как создать SSH-ключ под Windows

Windows не имеет встроенной поддержки SSH протокола. Поэтому, для создания SSH-ключа нужна специальная программа. Подойдёт Git Bash, которая устанавливается вместе с Git под Windows.

Инструкция по созданию SSH-ключа:

  1. запустите Git Bash;
  2. введите команду ssh-keygen;
  3. программа предложит выбрать место, куда сохранить ключ. По умолчанию создаётся каталог .ssh в папке текущего пользователя Windows. Например, у меня это C:\Users\Denis\.ssh. Этот вариант подходит, поэтому нажимайте Enter;
  4. программа запросит passphrase для шифрования ключа. Если просто нажать Enter, то приватная часть ключа не будет зашифрована. Помите, что если SSH-ключ используется не скриптом, то он должен быть зашифрован. Относитесь к passphrase как к паролю, его нужно запомнить;
  5. после нажатия Enter, программа попросит ввести passphrase повторно. Если вы не шифруете ключ, то ничего не вводите. Следующее нажатие Enter завершит создание ключа.

Теперь в каталоге .ssh созданы два файла:

  • id_rsa — приватный ключ (никому не передавать);
  • id_rsa.pub — публичный ключ (нужно копировать на другие компьютеры).

Установка и настройка Git в Windows

Установить Git на Windows проще простого. В качестве приятного бонуса вместе с Git поставляется консоль Git bash. Работать с этой консолью гораздо удобнее, чем со стандартной CMD в Windows. Кроме того, она понимает некоторые полезные линуксовские команды, такие как find, ls и прочие.

При установке Git под Windows вам нужно будет прописать git.exe в PATH вашей системы, чтобы Git можно было запускать из любого места в командной строке. А также указать Git’у, чтобы при получении кода он не менял символы окончания строк в файлах (эти символы отличаются на системах с Linux’ом и Windows). Всё это делается парой кликов мышкой через инсталятор Git.

Вот скриншоты важных страниц установки Git:

  1. экран выбора установки программ в PATH вашей системы. Выбирайте средний вариант — так вы сможете использовать Git из командной строки из любого каталога и не потревожите стандартные программы Windows find и sort;
    выбор изменений PATH при установке GIt
  2. здесь мы указываем как Git будет поступать с символами окончания строк. На Windows и Linux эти символы разные и Git может менять их перед отправкой и получением кода из репозитория. В моём случае лучший выбор — это не вмешиваться в код при получении и следить за тем, чтобы в репозиторий не попадали файлы с символами Windows-style.
    Выбор изменения символов окончания строк при установке Git
  3. последний экран не столь важен, здесь можно указать что будет в основе надстройки Git Bush — стандартная консоль Windows или MinTTY. Если у вас Windows до 10 версии, то лучше выбрать MinTTY.
    указание какой консолью пользоваться Git'у

После установки укажите Git’у ваше имя и электронную почту. Эти данные будут передаваться с каждым коммитом и их нельзя будет изменить.

Откройте Git Bush и запустите две команды:

  • git config --global user.name "Ваше_Имя"
  • git config --global user.email Ваша_Электронная_Почта

На этом первоначальная настройка Git закончена.

Первоначальная настройка PHPStorm

Сразу после установки PHPStorm на Windows нужно сделать две важные настройки:

  1. указать UTF-8 в качестве кодировки всех файлов по умолчанию;
  2. указать символ \n в качестве символа окончания строки по умолчанию.

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

Обе настройки находятся в разделе Editor. Попасть в настройки можно с главного экрана PHPStormглавный экран PHPStorm

Либо с верхнего меню через File -> Default settings
Default settings в PHPStorm

Окончание строк в файлах настраиваем в разделе Editor -> Code Style
настройка окончаний строк в PHPStorm

Кодировку файлов настраиваем в разделе Editor -> File Encodings
настройка кодировки файлов по умолчанию в PHPStorm

Что такое Gulp и для чего его использовать

Gulp — это менеджер для автоматизации рутинных задач при веб-разработке. Например, я использую Gulp для оптимизации изображений перед публикацией на сайте, конвертации coffee script и sass-кода в javascript и css, а также уменьшения размера получившихся файлов стилей и скриптов. Но это капля в море от всех его возможностей.

Как устроен Gulp

Сам Gulp умеет не многое, для каждой из функций нужен отдельный плагин, коих огромное множество. Команды для Gulp’а группируются в задачи и записываются в файл gulpfile.js — это обычный javascript-файл. Gulp работает под NodeJS и устанавливается (как и его плагины) с помощью менеджера пакетов NPM. Gulp может выполнять задачи параллельно и использует потоки, вместо временного хранилища, что позволяет ему выполнять задания очень быстро.

Как пользоваться Gulp

Все задачи для Gulp’а записываются в gulpfile.js. Задачи могут зависеть друг от друга. При запуске такой задачи сначала выполнятся те, от которых она зависит.

После того, как gulpfile.js готов, Gulp запускается из командной строки командой gulp [имя_задачи]. Либо просто gulp, в этом случае выполнится команда с именем default.

Что такое Vagrant и для чего его использовать

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

Как устроен Vagrant

Основа Vagrant’а — это box’ы. Box — это файл с полностью настроенной и готовой к использованию виртуальной средой. Например, я в работе использую связку Nginx + PHP-FPM + MySQL (LEMP) и у меня есть готовый box, который настроен идентично моему рабочему серверу. Box’ы удобно передавать коллегам для обеспечения идентичной среды разработки у всей команды.

Все настройки виртуальной машины (сколько выделять памяти, какие каталоги делать общими с вашей основной системой и пр.) содержатся в одном файле, который называется Vagrantfile. Также с помощью этого файла можно указать какие команды должны быть выполнены при первом запуске Vagrant. Например, можно создать базу данных с определённым именем или настроить Nginx.

Как пользоваться Vagrant

Vagrant используется из командной строки. Команды лакончины, просты для запоминания и логичны. Так, например, чтобы запустить виртуальную среду достаточно выполнить команду: vagrant up. Обычно, последовательность работы с Vagrant выглядит следующим образом:

  1. устанавливаем нужный нам box командой vagrant box add [имя box'а];
  2. создаём Vagrantfile командой vagrant init и настраиваем его;
  3. запускаем Vagrant командой vagrant up;
  4. после работы останавиливаем Vagrant командой vagrant halt;
  5. когда проект закончен, удаляем виртуальную среду командой vagrant destroy.

Vagrant обладает одним очень удобным инструментом. Сайт, работающий в вирутальной среде Vagrant, можно сделать доступным через интернет. Делается это очень просто, командой vagrant share. Подробности можно прочитать на сайте с документацией.

Где взять box’ы

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

Обо мне

Здравствуйте. Меня зовут Денис Беляев. Я full stack веб-разработчик с 2012 года.

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

Что такое Git и зачем его использовать

Git — это система управления версиями. У Git две основных задачи: первая —  хранить информацию о всех изменениях в вашем коде, начиная с самой первой строчки, а вторая — обеспечение удобства командной работы над кодом.

Что такое репозиторий Git

Репозиторий Git — это место, где хранится ваш код и вся информация о его изменениях. Репозитории могут находиться у вас на компьютере, на компьютерах ваших коллег и на удалённом сервере.

Как выглядит работа с Git

Git запоминает не все изменения, а только те, которые вы скажите. Это можно сравнить с фотографией. В определённый момент вы нажимаете на затвор и текущая версия вашего сайта остаётся навсегда запечетлена в недрах Git. В будущем вы сможете вернуться и посмотреть как всё было. Такое «фотографирование» называется commit и таких commit’ов может быть неограниченное количество.

Обычно работа с Git выглядит так:

  1. сверстали шапку сайта — сделали commit;
  2. сверстали контент страницы — сделали второй commit;
  3. закончили верстать страницу — сделали третий commit и отправили код на сервер, чтобы вашу работу могли увидеть коллеги, либо чтобы опубликовать страницу с помощью Capistrano.

Отправка кода на сервер называется Push. И при Push’е отправляется не весь код, а только та его часть, которая изменилась.

Где взять серверы для репозиториев Git

Можно настроить свой собственный сервер для Git, но гораздо проще использовать Github или Bitbucket. Это сервисы, предоставляющие сервера для репозиториев Git и сопутствующие инструменты, совершенно бесплатно. У Bitbucket есть преимущество — закрытые репозитории на этом сервисе тоже бесплатны. На Github же бесплатно можно создавать только открытые репозитории. Закрытый репозиторий нужен для того, чтобы к вашему коду имели доступ только те, кому вы разрешите, а не все пользователи интернета.