Codekit for Windows

При работе с вебстраницами в последнее время использую Codekit. Уникальная программа, значительно упрощающая работу вебдизайнера, тут и поддержка compass/less и оптимизация изображений и просмотр страниц в реальном времени.

Но пришлось как-то поработать в системе Windows, стал рассматривать альтернативы. Нашел несколько вариантов, типа Prepros, но как оказалось, локальный веб-сервер использует довольно странную логику и для того, чтобы страницы корректно работали, приходилось менять адресса ссылок. То есть для реальной работы Prepros уже не годиться.

И тут увидел в твиттере сообщение о том, что Grunt заменил кому-то Codekit.

Grunt

Только спустя некоторое время мне удалось добраться до Grunt и попробовать его в работе. но то что я увидел, мне очень понравилось!

Хотел бы сразу уточнить, что рассматриваемые далее технологии потребуют от вас навыков работы в консоли и не предполагает наличия графических оболочек. Но в любом случае, все будет довольно просто.

Для того, чтобы установить Grunt, потребуется предварительно установить Node.JS, для этого достаточно скачать со страницы nodejs.org/download программу установки под требуемую систему и установить. Предлагаемые по умолчанию опции предлагаю оставить как есть, без изменений.

Теперь запускаем терминал (Пуск-Выполнить и набираем команду cmd) и в нем устанавливаем необходимые нам модули:

> npm install -g yo bower grunt-cli generator-webapp

Все готово для начала работы! Выполняем следующие команды для создания шаблона в директории:

> mkdir testweb
> cd testweb
> yo webapp

Имя директории, которое использовалось в примере (testweb) выбрано произвольно и может меняться. А вот при создании шаблона (команда yo webapp) параметр должен прописываться без изменений, это имя генератора, что мы установили чуть ранее. При этом будут заданы три вопроса, на которые необходимо будет ответить да/нет, в зависимости от того, какие именно технологии мы планируем использовать в своей работе. В любом случае созданное вебприложение будет использовать технологию compass/sass для создания стилей сайта.

Теперь в директории testweb/app/ будет располагаться стандартный шаблон html5 boilerplate, который оптимально использовать в своей работе. И все что нам остается, это дать команду на запуск Grunt:

> grunt server

Автоматически запустится браузер со страницей из нашей директории. Теперь содержимое директории testweb/app открываем в любимом редакторе и приступаем к работе. Любые изменения файлов будут тут же отражаться изменениями в браузере. Просто и удобно.

А для того, чтобы получить готовый сайт, достаточно будет в той же коммандной строке дать команду:

> grunt build

Рядом с директорией app будет создана директория dist в которой будут располагаться все готовые файлы, то есть sass-файлы будут уже откомпилированы, все изображения будут сжаты. Останется только загрузить эти файлы на свой хостинг.

Мы совершили минимум действий по установке, использовали беспланую программу, но в итоге получили уникальный по удобству инструмент.