Привіт, мене звуть Стас. Я розробник сайтів на 1С-Бітрікс. У цьому пості хочу поділиться своїм досвідом, як правильно працювати з IDE PhpStorm і віддаленим web сервером.
Нижче піде опис як створити новий проект і підключити його до віддаленого web сервера або хостингу. Також покажу як налаштувати препроцесори типу - Sass. для автоматичної компіляції в CSS, без сторонніх компіляторів, IDE вміє робити все сама.
Створюємо новий проект
Для прикладу створимо папку на робочому столі і назвемо її project. У ній і будемо зберігати всю структуру нашого сайту. Це дуже корисний крок, всі файли проекту будуть зберігатися як локально так і віддалено. Тепер запустимо PhpStorm і виберемо пункт - Open.
Після цього потрібно вказати шлях де лежить наш проект. У моєму випадку це папка project на робочому столі. У вас це може бути абсолютно будь-яке місце на вашому комп'ютері. Далі відкриється сам робочий інтерфейс програми.
Зліва у нас локальний проект, папка project вона поки порожня, зліва ж буде вилучений сервер, давайте його підключимо.
Підключення до сервера
Для цього потрібно в верхньому меню вибрати пункт Tools> Deployment> Browse Remote Host. Даним дією ми викличемо вкладку Remote Host в якій буде відображатися структура папок віддаленого проекту. Вона повинна з'явитися справа.
Натискаємо на кнопку додати новий проект.
Відкриється вікно, в якому потрібно натиснути +, ввести назву нового підключення, воно може бути довільно, як правило я пишу ім'я домену сайту. Далі вказуємо потрібний тип підключення до сервера, в моєму випадку - це SFTP.
Після того як з назвою і типом підключення визначилися, перше на, що варто звернути увагу, це можливість установки чекбокса на пункт - Visible only for this project. Якщо залишити пункт активним, тоді дане з'єднання буде видно тільки для цього проекту, якщо зняти то для всіх нових проектів. Я завжди вимикаю цю опцію.
Вводимо IP сервера або ім'я host, вказуємо логін і пароль для з'єднання. Раджу поставити чекбокс в поле - Save Password, щоб при повторному підключення не вводити пароль заново.
Також на цій вкладці варто приділити увагу ще двом кнопок. Це - Test SFTP connection, вона дозволяє протестувати нове з'єднання з сервером. І Autodetect - ця кнопка якщо на неї натиснути, вибере автоматично шлях до нашого проекту, але як правило він не точний, раджу його вказувати вручну, натиснувши на три точки поруч з кнопкою.
Далі йдемо в цьому ж вікні на вкладку Mappings, тут все залишаємо як є, тільки в другому полі вказуємо слеш.
Третя внесок - Excluded Paths, дозволяє нам додавати файли або папки які ми хочемо заборонити для обміну з сервером. В даному прикладі у мене таких немає.
Налаштування обміну даними
Після того як ми створили нове з'єднання, раджу заглянути в його налаштування - Tools> Deployment> Options
Тут варто звернути увагу на опцію - Upload changed files automatically. Вона дозволяє нам вибрати, як буде відбуватися збереження даних на віддалений сервер.
Never - ніколи не буде.
Always - завжди буде.
On explicit save action CMD-S - при натисканні на поєднання клавіш, для MAC це - cmd + s, для windows - ctrl + s. Раджу завжди вибирати саме цей пункт. Тобто поки ми не натиснемо потрібне поєднання клавіш, зміни які були внесені, не полетять на сервер.
Ще одна цікава опція це - Upload external changes, вона дозволяє включити відстеження змін у всіх файлах проекту. Тобто, якщо у нас є три файли і у всіх трьох ми, щось змінили, після чого натиснули cmd-s, на сервер полетять всі зміни трьох файлів. Якщо ви на своє проекті збирається використовувати Sass, тоді раджу її залишити активною.
Sass, настройка компіляції в PhpStorm
Даним прикладом я наочно покажу, як можна швидко і просто налаштувати компіляцію для препроцесорів всередині проекту на PhpStorm.
Давайте створимо для прикладу файл з розширенням .sass, якщо ви віддаєте перевагу .less або .scss може створити їх.
Після його створення, IDE автоматично запропонує нам додати Watcher - це якийсь спостерігач за нашим файлом .sass. Давайте його додамо.
Відкриється нове вікно з настройками, я тут залишу все як є, тиснемо ок. Зрозуміло якщо ви використовуєте препроцесори, вони повинна бути встановлені у вашій системі глобально.
Давайте тепер внесемо якісь стилі в наш файл, щоб перевірити як працює компіляція в css.
Зверніть увагу, що у нашого файлу автоматично з'явилося вкладеність з скомпільованими файлами main.css і main.css.map, якщо відкрити main.css, то можна побачити, що компіляція в css відмінно працює.
Далі просто підключаємо main.css в head нашого проекту і спокійно пишемо стилі в sass файлі. Хочу нагадати, щоб PhpStorm відстежував всі змінені файли автоматично потрібно включити опцію Upload external changes, про яку я писав вище.
Ось загалом і все, все досить просто. Хоч пост і вийшов досить об'ємний, все первинна настройка займає не більше п'яти хвилин. Працюйте в PhpStorm, це відмінна IDE в якій безліч налаштувань які полегшать вам життя і заощадить ваш час при web розробці сайтів.