Робочі моменти: інструменти 'живої' розробки

Перші кроки в автоматизації розробки фронтенду

Вперед!
KoalaApp
Koala планувальник з інтерфейсом

Оптимізація робочих процесів - наше все

Всім привіт, в цьому пості я хотів би розповісти дещо про інструменти розробки в контексті "живої розробки", або як кажуть livecoding. І так, спочатку в якості екскурсу скажу, що починав як і багато розробників з простого, але класного(на мою думку) редактора Notepad++, він підкупив своєю простотою "з коробки" - кохання з першого погляду)) Далі було освоєння СаблаймТекст2 і дечого більш екзотичного, як скажімо Brackets. В кінці кінців це лише інструменти для досягнення поставлених цілей і виконання задач, ще було декілька підходів до Vim, але признаюсь - я його досі не використовую, видно не прийшов час.. Проекти розробляються і тестуються на вебсервері Denwer(також все досить просто, але налаштування треба вести "на місцях" - правити конфіги ручками) та Openserver( просто і з коробки має графічний інтерфейс, юзаю його по дефолту).

Апдейт з майбутнього: Також дя статичних сайтів використовую Фенікс сервер — просто кайф, особливо радує можливість веб розшарювання через сервіс локал-тюнел і робота з командної строки. Гаряче рекомендую.

Спочатку все по стандартному: писав в редакторі, зберігав і в браузері оновлював сторінку, оцінював резалт і так 20 раз, але з часом виникла потреба в живій розробці, лінь жать Ф5 жеж! Плагін автооновлення браузеру з інтервалом - коряво так.. Ну рішення знайшлось досить швидко і на певний час ним став скріпт live.js - файна річ, такий собі вотчер, що піключається в хтмл код і слідкує за оновленням пов'язаних файлів, як-то цсс чи яваскріпт-файли і оновлює браузер.

Все б нічого, але з застосуванням препроцессорів цсс постала необхідність їх компіляції в режимі реального часу. Тут звісно Лесс виграв, завдяки його less.js, але скірпт-вотчер ніяк не бажав бачити зміни в лесс файлі і перезавантажувати сторінку.

Тут також після певних вишукувань знайшлось рішення - программи типу ЛівРелоад - відслідковують зміни в директорії проекту і оновлюють браузер. Плюс мають хист до компіляції Лесс, Сасс, Сцсс і тд.. - круто! Але, є одне але, звісно ж... і не одне. Деякі програми платні, я не проти платити, але безкоштовний варіант більш привабливий, дає неупередженість і можливість з простотою полишити подальше використання не оглядаючись на підписку/уплачені кошти/тощо. Друге - програми навідріз відмовлялись працювати з вебсервером. Вони запускали свої приблуди, тож статичні сайти йшли на-ура, навіміну від тих що мали генерований контент. Одним з чудових варіантів, який задовольняє мене і дозволяє працювати повною зв'язкою стала програма Коала.
Звісно, я дивився в сторону планувальника Грант, що дефакто є стандартом в галузі, але почати раджу з такого варіанту, щоб насолодитись плодами живої розробки "з коробки", ну а потім перейти в хард-режим і через консоль і конфіг-файли все налаштувати під свої потреби. А можливостей там ого-го))

Апдейт з майбутнього: Грант і Галп мега няшки, надзвичайно гнучкі можливості доступних модулів дозволяють інтегрувати їх з будь яким проектом і що саме цікаве - створювати скафолди - шаблони швидкого старту проекту. Ну і ніхто не заважає написати власне завдання під якісь екзотичні потреби.

Отже Коала! Після встановлення цієї кросплатформенної програми і вибору директорії можна сміливо працювати в звичному для вас оточенні: запущений вебсервер, браузер з відкритим проектом, ваш улюблений редактор, хтмл документ або шаблон Хамл\Джейд, звичні для вас стилі цсс або препроцессорни код і скріпт live.js Коала відслідковує зміни в робочій директорії, компілює файли перезаписуючи попередні.
В цей час скріпт Лів.джиес фіксує зміну і оновлює сторінку. Власне в налаштуваннях Коли можна встановити що потрібно робити: можна мініфікувати файли, встановити куди зберігати і як іменувати. Також варто відмітити гнучкість програми, що дозволяє підключати розширення, як наприклад підтримку Стілус чи цсс лінт(начебто).

Grunt
Grunt task runner

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


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям