Что нового в Codekit 2

Codekit 2 была выпущена несколько недель назад, и, как и ожидалось, в этой новой версии произошли большие изменения. Для тех из вас, кто только что услышал об этом, Codekit – это приложение, которое объединяет ряд современных инструментов веб-разработки, включая пререкаться, МЕНЬШЕ, Jade, Kit, JavaScript Mangler (Uglify.js) и JavaScript пуха (JSLint а также JSHint).

Благодаря обновленному дизайну пользовательского интерфейса и новому значку, Codekit 2 также содержит множество новых функций. Мы добрались до него и покажем, как Codekit 2 может помочь вашему процессу веб-разработки, сделав его более эффективным. Давайте проверим это.

Рекомендуемое чтение: взгляд на язык набора

Встроенный сервер

Codekit может автоматически перезагрузить страницу в браузере; поэтому, как только вы внесете изменения в файлы вашего проекта, вы сразу увидите результат, предоставив вам опыт живого редактирования.

Но есть одна проблема в Codekit 1, с которой я всегда сталкивался. Если вы не настроите параметры должным образом, вы можете в итоге заставить Codekit обновить страницу, включая другие страницы, которые не являются частью вашего проекта.

Это нарушает другие действия, которые вы выполняете на других страницах, потому что Codekit обновил все открытые страницы.

В версии 2 Codekit решает эту проблему, представляя встроенный сервер. Когда вы запустите его, вы увидите зеленый индикатор в правом верхнем углу окна приложения, показывающий, что сервер «включен». Нажмите на него, и вы увидите информацию о сервере, такую ​​как: номер порта и адрес для доступа к вашему проекту через сервер.

Вы можете использовать адрес для доступа к своему проекту на любом устройстве в той же сети. Есть два заданных формата адреса; один с хорошим именем, а другой с форматом IP-адреса вашей сети, который вы можете использовать на устройствах (скорее всего, на Android), которые не поддерживают Bonjour.

Итак, теперь вы должны обслуживать свои страницы в браузере по этому адресу, вот так.

Смотрите следующее видео для более подробной информации.

Совет: измените адрес
Формат nice-name-address определяется по имени вашего компьютера. Итак, если ваш компьютер называется «Macbook Джона Доу», вы, скорее всего, получите длинный адрес взамен, например, http: //john-doe-macbook.local: 5757. Чтобы изменить его, перейдите в «Системные настройки OSX»> «Общий доступ», затем измените Имя компьютера на более короткое.

Бауэр Компоненты

Вторая особенность, которую мы собираемся рассмотреть, – это компонент Bower. Беседка это менеджер пакетов для веб-разработки – он похож на Homebrew для менеджера пакетов OSX. Есть несколько пакетов, которые вы можете найти через Бауэр реестр включая Bootstrap, jQuery и Normalize.css.

В Codekit 2 теперь вы можете устанавливать пакеты Bower напрямую через него. Перейдите в меню «Ресурсы» (расположено в левой части меню «Сервер»). Автор Codekit перечислил несколько выбранных пакетов на вкладке «Избранное».

Полный список можно найти на вкладке «Компоненты», а все установленные компоненты перейдут на вкладку «Установленные».

Это было бы очень полезно, чтобы начать новый проект. Если вам нужен, например, Normalize.css, вы можете установить его через Codekit, а затем импортировать его, используя правило @import из ваших таблиц стилей, вот так.

@import (inline) “bower_components / normalize-css / normalize.css”;

Если для него доступна новая версия, вы можете просто обновить ее через Codekit, например, так.

Проект Zurb Foundation

Фонд является одной из самых популярных адаптивных сред, что делает его своего рода претендентом на Bootstrap. В Codekit 1 вы можете легко настроить проект Compass с помощью нескольких щелчков мыши, но настройка проекта Foundation может быть немного хлопотной, поскольку он использует настроенный двоичный файл Sass / Compass.

В версии 2 это упрощено. Вы можете просто зайти в File> New Zurb Foundation Project и все готово.

Читайте также: Адаптируемую среду Look Into Foundation 4

Последняя мысль

Эти новые функции делают Codekit 2 превосходным приложением для веб-разработки, и Codekit 1 теперь выглядит устаревшим в сравнении. Обратите внимание, что Codekit – это приложение только для OSX. Если вы работаете на компьютере с Windows, вы можете попробовать Prepros, который также предлагает аналогичные функции (за исключением поддержки языка Kit, я думаю). Кроме того, вы также можете попробовать GruntJS, Препрос или Коала, пока они выполняют свою работу.