6 Травень 2016
515
Рубрика: програми

CodeKit — огляд програми

Сьогодні я розкажу про чудову програму, яка є майже незамінною. Вона однаково буде зручною як для початківця-фронтендера, так і для невеликих проектів, коли не потрібно або немає сенсу піднімати повністю все оточення, як-то Gulp чи Grunt.

Ім’я цій програмі — CodeKit. Вона платна і працює лише на Mac OS, це можна віднести до мінуса і особливості. Якщо маєте гроші і комп’ютер з Mac OS, тоді поїхали розбиратись з цим витвором програмного мистецтва.

Тому якщо ви працюєте на Win або Linux, раджу використовувати Koala, про яку я теж писав огляд. Вона має менше функцій, зате безкоштовна і кросплатформова.

Про CodeKit

CodeKit — це набір інструментів для розробки проекту для фронт-енду. До нього входять препроцесори, бібліотеки, “збірник” проекту, утиліта для автоматичного оновлення сторінки при зміні файлів. Всього в програмі можна використовувати більше 6.000 компонентів, з яких традиційно використовуються близько 20.

Можливості

Компіляція відбувається автоматично, не треба лізти до терміналу та інсталювати бібліотеки і програми, все це CodeKit зробить за вас.

Компілятор працює з такими типами файлів:

  • LessSass та Stylus;
  • CoffeeScript, Typescript і звичайний JavaScript;
  • Jade, Haml, Slim;
  • Markdown.

Окрім іншого програма вміє стискати графічні файли за допомогою все тих же вбудованих утиліт, а також перевіряти синтаксис і проводити стиснення чи об’єднання файлів.

Інтерфейс

Налаштування програми

Програма на разі не має україномовного інтерфейсу, тому все працює англійською. У вкладці General налаштовується поведінка і зовнішний вигляд застосунку.

codekit основні налаштування

У вкладці Browser можна вибрати, в якій програмі показувати превʼю. Тут можна знайти цікаву функцію Browser Sync.

codekit браузери

Як вона працює: після того, як ви відкрили прев’ю вашого сайту на декількох пристроях одночасно, ця функція буде дублювати всі події, що відбуваються на будь-якому девайсі, також і на усіх інших. Наприклад, якщо ви клікаєте на елемент <a> в Safari, той самий елемент буде натиснуто і на вашому iPhone. Якщо ви заповнюєте форму в браузері на андроїді, той самий текст буде відображатись у вас в Firefox на вашому комп’ютері і так далі…

codekit компілятори

У вкладці Compilers є список компіляторів, які відповідають за роботу з препроцесорами. У більшості випадків ці налаштування міняти не треба. Виключення становить хіба що ситуація, коли потрібно протестувати роботу препроцесора з конкретною версією компілятора. Тоді замість стандартного потрібно буде вибрати свій компілятор. Але навряд чи вам подібне знадобиться.

Це і всі головні налштування програми, основна магія відбувається у налаштуваннях проекту.

Створення проекту

Головне вікно програми відображає файлову систему вашого проекту. Щоб створити новий проект, треба натиснути на випадний список біля імені поточного проекту, клацнути + і вибрати Add project.

codekit створити проект

Після створення проекту ви можете починати роботу над ним: створювати файли, писати код і т.д. За мірою появи файлів, вони автоматично оновлюватимуться в списку файлів в вікні проекту.

codekit файли

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

Цей розділ поділено на дві вкладки: власне, налаштування і імпорти (справа). В Imports ви можете перетягувати файли, які повинні додаватись до вибраного файлу. Наприклад, це може бути об’єднання *.js– або *.scss-файлів.

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

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

Налаштування Sass

  • Output Style. Тут можна вибрати стиль компресії CSS-файлу, що ви отримаєте в результаті (nested, expanded, compact і compressed)
  • Debug Info. Ця функція дозволяє вибрати, чи додати source map до скомпільованих файлів, чи проводити компіляцію без них.
  • Libsass compiler. Це експериментальна функція, вона дозволяє компілювати Sass не класичним Ruby-компілятором, а однойменною бібліотекою. Це працює в десятки разів швидше (що добре видно на прикладі великих проектів) але, на жаль, досі підтримує не всі функції. Тому користуйтесь на власний розсуд.
  • Run Bless on CSS file. Ця функція для занадто великих файлів. Якщо ваш файл стилів містить більш ніж 4.095 селекторів, його буде поділено на два (або більше) файлів і їх буде підключено у вигляді імпортів. Сам HTML при цьому міняти не знадобиться, як і до цього треба буде підключити один CSS-файл.
  • Run Autoprefixer. Це зручний інструмент для тих, хто досі підтримує роботу із застарілими версіями браузерів. Префікси для CSS-правил за вас додасть Codekit.
  • Output. Якщо цей чекбокс відмічено, код документу буде генеруватись в вихідний, в даному випадку, CSS-файл. Якщо прибрати чекбокс, генерації не буде, це потрібно для тих випадків, коли треба перевірити синтаксис, але сам файл використовуватиметься для інклудів.

codekit налаштування файлу

Налаштування проекту

Щоб відкрити налаштування проекту, клацніть на коліщатко під його назвою.

codekit налаштування проекту

У вікні налаштувать можна міняти назву проекту, вказати типи файлів, які будуть ігноруватись, а також основні розширення, які в ньому використано. Якщо ви хочете додатково використовувати свою папку із компонентами bower, вкажіть її адресу у відповідному полі.

У вкладці Browser refreshing можна вказати частоту або умови оновлення браузера. Якщо ви використовуєте зовнішній сервер (наприклад, MAMP), його адресу можна також вказати, і програма зможе автоматично оновлювати відповідні сторінки.

codekit автоматичне оновнення

Окрему увагу варто приділити налаштуванням Sass.

codekit налаштування sass

Тут можна вибирати тип стиснення, інформацію для дебаґу і налаштування генерації CSS-файлів. Раджу передивитись всі налаштування, що тут є, це значно спростить вам подальшу розробку.

Аналогічні налаштування є для HTML-препроцесорів і JavaScript. Для останнього, наприклад, можна вибрати бібліотеку для перевірки синтаксису, тип і налаштування імені вихідного файлу. Окрім іншого, навіть ці бібліотеки можна налаштувати під свої потреби у вкладці Syntax checkers.

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

В результаті

Програма буде безумовно дуже зручною для невеликих проектів, коли немає потреби встановлювати повне оточення. Також, якщо ви не досить досвічені в роботі з Gulp, Grunt чи іншими “збірниками”, CodeKit допоможе почати працювати над проектом без додаткових знань термінальних команд. Достатньо встановити програму, створити проект і почати писати код. Все останнє буде зроблено за вас.

CodeKit не вміє автоматично завантажувати написаний код на сервер, але цього від нього і не вимагають. Це дуже зручний і багатофункціональний засіб для локальної розробки проектів будь-якого розміру. І підійде як початківцям, так і професіоналам.

Програма на разі коштує 35$. На питання, чи воно того варте, відповідь однозначна — так. Раджу принаймні спробувати.

Тепер я хочу бачити коментарі 0