Налаштування PhpStorm для верстки на ОС Windows

Добрий день
Так склалося, що виникла необхідність підготувати єдину робочу середу (workflow) для всіх верстальників в групі на ОС Windows. Основна мета — це в мінімальні терміни передати мінімум необхідних знань всім учасникам групи. Основна проблема була в тому, що багато хто не знайомі з unix-системами і поняття не мають, як завести той же SASS на ОС Windows. Тому було прийнято рішення скласти ознайомчу статтю (покрокову інструкцію) з налаштування робочого середовища.

За порадою колег вирішив викласти її у відкритий доступ. Думаю, початківцям верстальникам це стане в нагоді, тому що коли-то я витратив чимало часу, щоб прийти до простих істин.

Відразу обмовлюся, що вибір інструментів — справа суто особиста, і все, що нижче описано нижче, робилося свідомо для певної групи. Використовувати дану інструкцію чи ні — вирішувати тільки вам.

Отже почнемо!

Дана стаття буде містити в собі 3 етапи:


Етап 1 — установка і знайомство з IDE Phpstorm

Установка IDE Phpstorm

Заходимо на офіційний сайт і викачуємо 30-денну безкоштовну версію. Після закінчення 30 днів можна перевстановити IDE і користуватися далі або купити підписку або вдатися до магії деяких умільців.

зображення

По процесу установки думаю і так все зрозуміло, вказуємо куди потрібно встановити програму. На одному з етапів установки, вам буде запропоновано вибрати які файли варто відкрити в IDE, а також потрібно створити ярлик на робочому столі.

зображення

По закінченню установки запускаємо IDE, при першій установці вам буде запропоновано імпортувати свої налаштування або використовувати стандартні.

зображення

Далі буде запропоновано придбати ліцензію (підписку) або використовувати пробний період в 30 днів. Тиснемо «evaluate for free 30-day».

зображення

Далі буде запропоновано вибрати стиль оформлення і передвстановлені настройки гарячих клавіш (keymap). При необхідності можна відвідати сайт Phpstorm themes та вибрати ту тему, яка вам більше до душі.

зображення

На цьому установка IDE закінчена.

Створення нового проекту в IDE Phpstorm

IDE дозволяємо створювати 2 типи проектів:

Розглянемо обидва варіанти більш детально, а також налаштуємо візуальний інтерфейс на прикладі локального проекту.

Створення нового локального проекту

Створимо локальний проект. Для цього у вікні вітання IDE виберемо пункт «Сreate new project». Також новий проект можна створити з меню IDE «File».

зображення

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

  • Шаблон проекту
  • Вказати місце зберігання проекту
  • Вказати назву проекту
зображення

У разі вибору проекту з застосуванням шаблону можна буде вибрати версію шаблону. Наприклад, шаблон boostrap автоматично довантажити з репозиторію на github.

зображення

В результаті у нас відкриється вікно нашого нового проекту. В якому буде створена папка з назвою нашого проекту. Так само тут розташовується папка ".idea", ні в якому разі не видаляйте! У ній зберігаються всі налаштування, пов'язані з проектом.

зображення

Також звертаю Вашу увагу на те, що при створенні нового проекту програма попросити вас налаштувати простір імен «namespace». В цілому можна не морочитися і довірити це самій програмі.

Для цього потрібно у спливаючому вікні натиснути на посилання «automatically». У разі, якщо ви випадково закрили дане вікно або воно «само» закрилося, клацніть по рядку стану, і в терміналі натисніть на посилання «automatically». Якщо ви все зробили вірно, то побачите відповідне повідомлення: «Detect psr-0 namespace roots: no psr-0 namespace roots was detected». Для приховування вікна натисніть на значок з перпендикулярної стрілочкою.

зображення

Вітаю, ви створили новий локальний проект. Даний варіант проектів дуже зручний, якщо працюєте над ним тільки ви і вам не потрібно викладати його в мережу.

Створення нового проекту, що пов'язаний з віддаленим сервером

Для створення проекту, пов'язаного з віддаленим сервером, необхідно у вікні привітання вибрати пункт «Create New Projects from Existing Files» або в меню IDE «File — New Projects from Existing Files».

зображення

зображення

Далі вам буде запропоновано вибрати сценарій використання, нам потрібен варіант «Web server is on remote host, files are accessible via ftp/sftp/ftps».

зображення

Далі потрібно ввести назву проекту, а також вказати, де він буде зберігатися на вашому ПК. Якщо ви хочете змінити шлях зберігання проектів, то потрібно вибрати варіант «Сustom» і вказати папку куди потрібно помістити проект.

Важливо! Використовуйте лише латиницю в іменуванні файлів, папок, шляхів зберігання. Так як частина інструментів можуть просто не підтримувати кирилицю.

Наприклад:

  • «За://мої документи/project/демо» — поганий варіант: шлях та назва проекту містить кирилицю
  • «За://project/demo» — тут все добре, шлях та назва проекту містить лише латиницю
зображення

Далі буде запропоновано створити нове віддалене підключення або вибрати з уже існуючих. Створимо нове sftp (shh) підключення, вкажемо параметри підключення до віддаленого сервера.

  • Name — ім'я підключення, зрозуміле для вас. Я рекомендую писати повне доменне ім'я, так як буває, що на одному ip можуть знаходиться декілька тестових сайтів
  • Type — формат підключення ftp або sftp (shh)
  • Sftp — host ip адреса сервера або хост (наприклад, mysite.ru або demo.mysite.ru)
  • Port — номер порту (за умовчання для ftp (21), sftp (22))
  • Root path — шлях до батьківського каталогу (за замовчуванням залишаємо "/"), наприклад якщо у вас є 2 папки на сервері (dev, www), і ви хочете, щоб всі підключення показувало відразу папку dev, то можна вказати шлях (/dev/)
  • User name — логін для доступу на сервер
  • Password — пароль для доступу на сервер (не забуваємо ставити галочку «save password», щоб не вводити пароль кожного разу при підключенні до сервера, терміналі). так само можна підключатися за допомогою ключа ssh.
  • «don't check http connection to server — ставимо галочку, щоб не перевіряти підключення кожен раз.»
Кнопка «Test sftp connection...» дозволяє перевірити, чи правильно введені параметри доступу. У разі успіху буде видано відповідне повідомлення.

«Web server root url» шлях по якому будуть відкриватися файли для перегляду на віддаленому сервері. Шлях пропишеться автоматично, як тільки буде заповнено рядок «sftp host».

зображення

Далі програма запропонує вказати які файли відносяться до проекту, для цього вказуємо папку з проектом на віддаленому сервері і тиснемо кнопку «Project root». У моєму випадку це все, що лежить на сервері. В результаті у Вас з'явиться зелений фон, що файли позначені.

зображення

зображення

Якщо ми натиснемо продовжити, що програма почне завантажувати зазначені файли на ПК, з сервера. Так як проекти зазвичай дуже великі за обсягом і кількістю файлів, ми це робити не будемо. Для цього додамо файли у виняток, натиснувши на кнопку «Excluded from download». Надалі, ми розберемо як завантажити тільки потрібні нам файли.

зображення

Тиснемо «далі» програма запропонуємо, вказати нам свій шлях для кореневої папки проекту. Тут можна поставити "/" або просто нажати кнопку «Finish».

зображення

Готово! Ми зв'язали наш проект з віддаленим сервером. Тепер спробуємо завантажити якийсь файл з сервера, внести в нього виправлення і відправити назад на сервер. Спочатку нам потрібно поправити налаштування. Якщо пам'ятаєте, вище, ми додали в виняток весь проект, щоб не завантажувати його повністю. Натискаємо клавіші Сtrl+Alt+S», переходимо в розділ «Build, Execution, Deployment — Deployment», натискає на вкладку «Excluded path» і видаляємо винятку, клікнувши на шлях, а після натиснувши кнопку «Remove path», після чого тиснемо кнопку «ОК».

зображення

У результаті, якщо все зроблено правильно, то у вкладці «Remote host» наші файли підсвітяться зеленим фоном.

зображення

Для того, щоб скачати файл або папку до себе на ПК, потрібно клікнути правою кнопкою миші і в контекстному меню вибрати пункт «Download from here». Після чого файли завантажуються до Вас на ПК.

зображення

Як тільки файли завантажуються вони відобразяться у вкладці «Project» і у вікні передачі файлів «File transfer *ім'я віддаленого сервера*» з'явиться відповідне повідомлення.

зображення

Після чого вносимо правки у потрібний нам файл і відправляємо його назад на сервер. Для цього потрібно клікнути правою кнопкою миші по файлу, у вкладці «Project», і у спливаючому меню вибрати пункт «Upload to».

зображення

зображення

За бажанням, можна призначити гарячі клавіші (keymap) для швидкого завантаження та відправки файлів.

Цей спосіб зручний, якщо нам потрібно поправити тільки один файл, але для повноцінної розробки, краще налаштувати автоматичну відправку файлів на сервер. Для цього натискаємо клавіші Ctrl+Alt+S» або в меню «Tools — Deployment — Options» і вносимо правки:

  • Create empty direcory — після створення порожній папки так само завантажить її на сервер.
  • Upload changed files automatically to the default server — вибираємо пункт «always»
  • Upload external change — ставимо галочку, дозволяємо завантажувати файли, які модифікується іншими програмами. наприклад карти css, js
  • Warn then uploading over newer file — вибираємо пункт «compare timestamp & size», перевіряємо модифікувався файл по часу і розміру
  • notify about remote changes — попереджає якщо ми намагаємося залити не актуальну версію вихідного файлу. Наприклад, якщо файл одночасно правили 2 людини. Буде запропоновано, перезатереть, смержить, пропустити.
зображення

зображення

На цьому налаштування проекту пов'язаного з віддаленим сервером завершена. Далі ми розглянемо основні параметри і можливості IDE. потрібно це для того, щоб в команді був мінімальний поріг однакових знань.

Налаштування візуального інтерфейсу і огляд можливостей IDE
Першим ділом включимо підтримку «Tool windows», це спеціальні вкладки які дозволяють візуально перемикатися між можливостями IDE. Робиться це просто, потрібно натиснути на іконку в лівому нижньому куті, після чого з'являться закладки зліва, справа, знизу. Так само це можна зробити з меню IDE «View — Tools buttons».

зображення

Видалити не потрібні вкладки, можна натиснувши правою кнопкою миші по вкладці і вибрати пункт «Remove from sidebar».

зображення

Я рекомендую розташувати вкладки наступним чином:

  • На лівій панелі розташувати вкладки «project», «gulp», «npm»
  • На нижній панелі розташувати вкладки «terminal», «version control», «file transfer» «rest», «todo», «event log»
  • На правій панелі розташувати вкладки «remote host»
Надалі ми розглянемо всі ці інструменти.

Відображення нумерації рядків, відступів, кольору IDE
Перейдемо до налаштування IDE натиснувши комбінації клавіш Сtrl+Alt+S» або з меню програми «File — Settings» і перейти в розділ «Editor — General — Appearance» і проставити галочки:

  • «Show line number» — показуємо номер рядків в документі
  • «Show vertical indent guides» — показуємо вертикальне вирівнювання
  • «Show css color preview icon in gutters» — показує невеликий квадратик, біля номера рядка, з поточним кольором
  • «Show whitespace» — показує відступи в табах або прогалини. налаштування підійде початківцям верстальника, щоб дотримуватися семантику.
Інші налаштування можна не міняти.

зображення

В результаті має з'явитися приблизно, як показано на зображенні нижче.

зображення

зображення

Підказки за кодом
За замовчуванням редактор підкаже, якщо в коді є зауваження або помилки. Справа в поточному документі будуть відображатися жовті або червоні смужки. Клікнувши по смужці Вас перекине на сходинку, де сталася помилка або зауваження. Так само можна переглянути помилку\зауваження просто навівши курсор на смужку.

зображення

Перегляд сторінки в браузері
Для перегляду сторінки в браузері наведіть мишею в правий кут документа, з'явиться вікно, в якому буде запропоновано вибрати, в якому браузері ви хочете переглянути сторінки. Так само це можна зробити натиснувши поєднання клавіш «Alt + F2» (увага сполучення клавіш може відрізнятися!).

За замовчуванням IDE відкриє на localhoste сторінку для перегляду. Якщо Ваш проект пов'язаний з віддаленим сервером, то буде відкрита сторінка зазначена в дорозі(Web server root url).

зображення

Так само можна налаштувати список браузерів, вказати в якому браузері відкривати за замовчуванням, і відключити спливаючу підказку у правому верхньому куті документа. Для цього необхідно натиснути поєднання клавіш «Ctrl+Alt+S» і перейти в розділ «Tools — Web browsers» або скористатися пошуком, як це показано на зображенні нижче.

зображення

Інструмент emmet
Даний інструмент, вже попередньо встановлено, тому ніяких додаткових установок робити не потрібно, можна відразу користуватися. Документацію по інструменту emmet можна подивитися на сайт, приклади, шпаргалка.

Редагувати файли на віддаленому сервері
Для редагування файлів на віддаленому сервері, натискаємо на вкладку «remote host», відкриваємо файл, не завантажуючи його на свій пк (клікаєм 2 рази на файл, у вкладці remote host). Для того, щоб відправити файл на сервер натискаємо на іконку . Так само є можливість відкотити правки назад, натиснувши на іконку , або подивитися зміни натиснувши на іконку .

зображення

Робота з локальною історією файлів
Для того, щоб переглянути локальну історію змін файлу, потрібно клікнути правою кнопкою миші по файлу, і вибрати пункт «Local History — Show History».

зображення

В результаті відкриється вікно, у якому ліворуч буде відображена вся доступна історія змін файлу і 2 колонки. Ліва колонка цей стан файла з історії, а в правій — поточне. Зверніть увагу, Ви можете вносити правки тільки в праву колонку. Так само доступні кнопки відкотити зміни або зберегти патч. Після закриття вікна, всі зміни в правій колонці, автоматично зберігатися.

зображення

Порівняння вмісту 2-х файлів
Для того щоб порівняй 2 файлу на вашому ПК, необхідно клацнути по файлу правою кнопкою миші і вибрати пункт «Compare with» у вікні вказати, з яким файлом ми хочемо порівняти.

зображення

Для того щоб порівняти локальний файл з файлом на віддаленому сервері, необхідно клацнути по файлу правою кнопкою миші і вибрати пункт «Deploymet — Compare with deployed version on *ім'я віддаленого сервера*».

зображення

Зміна кодування
Буває, що необхідно перекодувати файли з cp-1251 в utf-8. Для цього необхідно у файлі клікнути правою кнопкою миші і вибрати пункт «File Encode». Так само це можна зробити клацнувши по вибору кодування.

зображення

зображення

Виправлення символів переносу
В unix системах символи переносу на новий рядок, відрізняються від символів в Windows. З-за цього може вийти так, що при порівнянні файлів, весь файл буде підсвічуватися як модифікований, на ділі Ви поміняли всього лише 1 символ.
Рекомендується використовувати unix переноси. В меню програми «file file — encoding».

зображення

Налаштування табуляції, конвертація табів\прогалин
У разі якщо документ містить кілька варіантів табуляції, редактор Вам підкаже це і запропонує вибрати.

зображення

Так само це можна зробити в налаштуваннях, натиснувши Ctrl+Alt+S» і перейшовши в розділ «Editor — Code Style», вибрати бажаний формат документа і поставити галочку «Use tab charaster».

зображення

Для швидкого форматування документа потрібно в меню програми «Edit — Convert Indents» вибрати символ використовувати.

зображення

Пошук розташування файлів на ПК
Щоб швидко знайти розташування файлу на ПК, необхідно клікнути правою кнопкою миші по файлу, і вибрати пункт «Show in Explorer», отруюються папка з вибраним файлом.

зображення

Швидке відформатувати в семантичний код
Іноді трапляються файли, які не можливо читати через поганий форматування або мінімізації. Тут нам допоможе реформатирование коду, в меню програми вибираємо пункт «Code — Reformat Code».

зображення

Робота з терміналом і ssh session
Викликати термінал можна засобами меню програми «View — Tools Windows Terminal», комбінацією клавіш (Alt+ F12), з панелі швидкого доступу. По суті це командний рядок в Windows.

Для запуску SSH Терміналу для підключення до сервера, потрібно перейти в меню програми «Tools — Start SHH Session» після чого вибрати вже наявне підключення, або вказати параметри підключення для нового.

зображення

Нотатки та закладки
Для додавання нотатки необхідно додати Html коментар з текстом todo. Викликати панель заметом можна з меню програми «View — Tools Windows — TODO» або з панелі швидкого доступу. За допомогою фільтра можна налаштувати відображення нотаток. По подвійному кліку на замітку, у Вас автоматично відкриється файл і курсів буде розташований на замітці.

<!--todo Моя тестова замітка-->

зображення

Закладки дозволяють швидко переглядати або показувати шматки коду. Для додавання закладки необхідно встановити курсор на початок потрібного шматка коду і за допомогою гарячої клавіші (F11) або з меню програми «Navigate — Bookmark — Toggle Bookmark» поставити закладку. Закладка відобразиться у вигляді галочки.

зображення

Для швидкого перегляду за допомогою гарячої клавіші(Shift-F11) або з меню програми «Navigate — Bookmark — Show Bookmark» викликати вікно перегляду.

зображення

LiveEdit(LivePreview) перегляд змін без перезавантаження сторінки на ПК
Встановимо плагін LiveEdit. Для цього необхідно відкрити налаштування програми(Ctrl+Alt+S), потім перейти в розділ «Plugins» і натиснути кнопку «Browse repositories...».

зображення

У вікні, в рядку пошуку ввести «Live Edit» і натиснути кнопку Install. Після установки програма попросити перезавантажити її.

зображення

Знову йдемо в настройки програми (Ctrl+Alt+S), потім в «Build, Execution, Debbug — Live Edit» і ставимо галочку на «Auto in (300 ms)».

зображення

Тепер необхідно установить додаток для браузера, щоб зв'язати наш редактор і браузер. Зверніть увагу, що додаток працює, тільки в браузерах Chrome, Yandex. У майбутньому розробники обіцяють доповнення для браузерів Firefox, Safari. Більш детально ви можете прочитати на сайте розробників.

зображення

Запускаємо Live Edit, для цього вибираємо пункт меню програми «Run — Debug» або на панелі швидкого доступу натискаємо іконку жука.
Звертаю Вашу увагу, що режим «Live Edit» працює тільки для локальних проектів, тобто тільки для тих файлів, які лежать на вашому ПК і не пов'язані з віддаленим сервером.

зображення

Етап 2 — установка та налаштування компілятора стилів (sass,scss)
Для установки компілятора на знадобиться встановити:

Важливо! Установка повинна проводиться від імені адміністратора.

Установка nodejs
Викачуємо інсталятор для Windows c офіційного сайту. Стандартна установка, але на етапі вибору компонентів переконайтеся, що вибрані пункти «Add to path». Повинно бути як на зображенні нижче.

зображення

Установка ruby
Викачуємо інсталятор для Windows c офіційного сайту. Стандартна установка, але на етапі вибору компонентів переконайтеся, що стоїть галочка «Add Ruby Executables to PATH».

зображення

Перезапускаємо Phpstorm закривши його або скористатися з меню програми «File — Invalidate Chache / Restart — Just Restart». Перевіряємо версію nodejs і ruby. Для цього потрібно набрати в терміналі

node -v

і

gem -v

В результаті:

зображення

Іноді потрібно перезавантажити комп'ютер, щоб термінал заробив. Все залежить від версії Phpstorm.

Установка gem sass, scss
Для установки пакетів необхідно по черзі в терміналі ввести команди:
gem install sass 
та
gem install scss 
При першій установці вплывет стандартне вікно Windows з питанням, чи можна виконати додаток ruby. Тиснемо «ОК».

зображення

зображення

Установка закінчена, тепер зробимо налаштування, щоб наші файли автоматично компілювати з sass в css.
Якщо ми створимо новий файл .sass або .scss, то при відкритті програма автоматично запропонує нам призначити «File Watcher».

зображення

Натиснувши на посилання «Додати watcher», автоматично відкриється вікно з налаштуванням спостерігача. Якщо у нас все встановилося коректно, то в полі programm у нас буде шлях до sass.bat файлу.

зображення

Натискаємо «ОК» і на цьому швидка настройка завершена. Перевіряємо роботу компілятора, для цього напишемо будь шматок коду в sass файлі. В результаті після натискання Ctrl+S» буде виконана компіляція стилів.

зображення

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

зображення

Але часто буває, що файли .sass(препроцесорів) лежать в одній папці, а результат .css потрібно поміщати в іншу папку. Для цього нам потрібно, лише поправити шляху. Натиснувши поєднання клавіш (Ctrl+Alt+S) і переходимо в розділ «Tools — File Watchers».

зображення

Далі клікаєм 2 рази по рядку Sass.

зображення

Поле «Arguments» після символу ":" потрібно вказати шлях до папки css. Тиснемо на кнопку «Inset macros» і вставляємо змінну "$FileDir". У даному випадку "$FileDir" це змінна програми, яка автоматично буде підставляти шлях до нашого проекту.

зображення

У результаті повинно вийти
$FileDir$\css\$FileNameWithoutExtension$.css 
, де перша змінна-це шлях до проекту, потім ім'я папки, де потрібно зберігати .css файли, і ім'я змінної файлу. Цей шматок
$FileDir$\css\$FileNameWithoutExtension$.css
потрібно вставити в поле «Output path to elements». Звертаю Вашу увагу, що у вказівці шляху стояти зворотні скісні риски "\".

В результаті отримаємо, як на зображенні, і тиснемо кнопку «ОК».

зображення

Перевіряємо, для цього потрібно просто внести будь-яка зміна в .sass файл і натиснути «Ctrl+S». Програма автоматично створює папку з назвою «css» і помістити в неї скомпільовані файли.

Старі файли можна видалити.

зображення

Для .scss файлів принцип той же. Тільки «File Watchers» буде SCSS і програма підставить у полі programm шлях до scss.bat файлу.

зображення

зображення

Налаштування додаткових компіляторів можна подивитися на офіційному сайте

Етап 3 — установка складальника проектів, приклад налаштування (gulp)
Приклад встановлення та налаштування з нуля
Для створення конфігураційного файлу необхідно в терміналі набрати команду
npm init
, після чого будуть задані ряд питання, де можна тиснути кнопку «Enter». Тільки в полі «entry points» вкажіть ім'я файлу, в даному випадку це буде «gulpfile.js»

зображення

Якщо ви натиснули не так, або вирішили виправити, то можна це зробити зайшовши в сам файл package.json, який створився і розташовується в корені проекту.

Більш детально про налаштування ви можете прочитати на офіційному сайт.

зображення

Тепер нам потрібно встановити сам gulp, і якийсь корисний плагін, нехай це буде autoprefixer. Про проект PostCss і Autoprefixer Ви можете прочитати на офіційному сайт.

Для установки Gulp, потрібно набрати команду в терміналі
npm install gulp --save-dev
і дочекатися закінчення установки. Якщо все пройшло успішно, в корені у нас буде створена папка node_modules, в якій буде встановлено менеджер пакетів Gulp. Ключ --save-dev, потрібен щоб встановити пакети локально, і в подальшому використовувати на інших проектах.

зображення

Тепер встановимо autoprefixer, для цього наберемо команду
npm install gulp-autoprefixer --save-dev 
і дочекаємося закінчення установки.

Зверніть увагу, що установка autoprefixer на офіційному сайті відрізняється від установки на сайті npm. Це пов'язано з тим, що на офіційному сайті, autoprefixer працює через PostCss(постпроцесор). Надалі, краще використовувати даний плагін через PostCSS.

Тепер якщо ми відкриємо файл package.json, то побачимо, що наші доповнення автоматично прописалися в блок «devDependencies».
Установка плагінів завершена, тепер їх потрібно налаштувати.

Для цього створимо докорінно файл «gulpfile.js» і вставляємо туди код який вказаний на сайті npm в блоці usage і зберігаємо його (Ctrl+S).

зображення

Я вніс невеликі зміни, щоб було більш зрозуміло.

зображення

Переглянути код
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer');

gulp.task('autoprefix - плагін', function () {
return gulp.src('css/sass-style.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('css/'));
});


Перевіряємо роботу плагіна. Додамо в .sass файл властивість display:flex і збережемо його. За замовчуванням він скомпилирует результат .css файл.

зображення

Для того, щоб виконати наше завдання, відкриємо панель gulp, зробити це можна клікнувши правою кнопкою миші по файлу «gulpfile.js» і вибрати пункт «Show Gulp Tasks» або з меню програми «View — Tools WIndows — Gulp». В результаті чого відриється панель зі списком завдань.

зображення

зображення

Увага! Після будь-яких правок у файлі «gulpfile.js» необхідно оновити завдання.

зображення

Клікаємо 2 рази за завданням, і чекаємо закінчення його виконання. Якщо все пройшло успішно, термінал оповістити Вас про це. Як бачите, у нас додалися префікси у файлі .css.

зображення

Для прикладу додамо ще один плагін, який дозволить минифицировать код.
Виконаємо наступну команду в терміналі
npm install gulp-cssnano --save-dev
і дочекаємося закінчення установки.
Тепер необхідно оновити «gulpfile.js», відповідно до зазначеної документації на сайт і не забуваємо оновити завдання в gulp вкладці.

Переглянути код
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano');

gulp.task('autoprefix - плагін', function () {
return gulp.src('css/sass-style.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('css/'));
});

gulp.task('nano ', function() {
return gulp.src('css/sass-style.css')
.pipe(cssnano())
.pipe(gulp.dest('css/'));
});


В результаті в нас має з'явитися ще одне завдання.

зображення

Клікаємо 2 рази за завданням «nano» і отримуємо минифицированый файл, без зайвих пробілів, відступи, переноси і. т. д.

зображення

Як бачите нічого складного немає. Більше корисних плагінів Ви можете знайти на тут, так само рекомендую підписатися на групу вконтакте, в який Ви зможете стежити за розвитком проекту і замучать питаннями автора PostCss.

Далі у Вас швидше за все виникне логічне питання: «Мені кожен раз доведеться, кожен раз так встановлювати всі плагіни для інших проектів?»

Щоб кожен раз не ставити всі плагіни і налаштування в ручну, я рекомендую зберегти свої файли «package.json» і «gulpfile.js». Надалі, потрібно буде лише, скопіювати ці два файлу, в новий проект і виконати команду
npm install
та всі доповнення(autoprefixer, nano ...) автоматично встановляться. Дуже важливо завжди дотримуватися єдиної структури зберігання файлів. Тоді не доведеться правити шляхи до файлів. Як правильно організувати структуру файлів, Ви можете пошукати в інтернеті.

На цьому налаштування закінчена. В цілому час на прочитання і налаштування займе не більше однієї години. Сподіваюся стаття буде Вам корисна.

У планах додати огляд систем контролю версій(git, mercurial).

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.