# Codekit for Windows

При работе с вебстраницами в последнее время использую [Codekit](http://incident57.com/codekit/ "Codekit – The Mac App For Webdevelopers"). Уникальная программа, значительно упрощающая работу вебдизайнера, тут и поддержка compass/less и оптимизация изображений и просмотр страниц в реальном времени.

Но пришлось как-то поработать в системе Windows, стал рассматривать альтернативы. Нашел несколько вариантов, типа [Prepros](http://alphapixels.com/prepros/), но как оказалось, локальный веб-сервер использует довольно странную логику и для того, чтобы страницы корректно работали, приходилось менять адресса ссылок. То есть для реальной работы Prepros уже не годиться.

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

## Grunt

Только спустя некоторое время мне удалось добраться до [Grunt](http://gruntjs.com/ "GRUNT The JavaScript Task Runner") и попробовать его в работе. но то что я увидел, мне очень понравилось!

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

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

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

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

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

```shell
> mkdir testweb
> cd testweb
> yo webapp
```

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

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

```shell
> grunt server
```

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

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

```shell
> grunt build
```

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

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