В предыдущем посте мы говорили о Kit, очень простом языке шаблонов HTML. Если вы следовали этому, вы должны обнаружить, что приложение с графическим интерфейсом, способное компилировать Kit в HTML-совместимый браузер формат, Codekit,

К сожалению, Codekit доступен только для OS X, в настоящее время нет аналогичных приложений для Windows и Linux, которые поддерживают Kit.

Если вы работаете на Windows и Linux, но хотите использовать Kit, вы можете использовать Grunt в качестве альтернативы. Grunt имеет обширную коллекцию плагинов, предоставленных щедрыми разработчиками по всему миру, включая плагин для компиляции языка Kit, Грунт-codekit, Давайте проверим это.

Рекомендуемое чтение: 5 последних инструментов веб-разработки, которые вы должны знать

Примечание. Несмотря на то, что следующий совет в первую очередь предназначен для того, чтобы показать пользователям Windows и Linux альтернативу Codekit, пользователь OS X также может использовать его.
Начиная
Сначала мы создадим каталог для нашего проекта. Давайте запустим терминал или командную строку и введите следующие командные строки:

МакДир Кит-Грунт
cd kit-grunt

Мы создали новый каталог с именем kit-grunt; вторая строка позволяет нам ввести его. Но если вы ранее создали каталог проекта, вы можете пропустить первую строку и сразу же перейти в свой собственный каталог в терминале с помощью команды cd.

В каталоге проекта мы создаем новую папку с именем kit, в которую мы будем помещать файлы .kit. Введите эту команду ниже:

комплект Mkdir

Затем мы также устанавливаем Grunt и плагин с этими командами. Обратите внимание, что сначала вы должны установить Node.js в вашей системе.

npm установить grunt —save-dev
npm установить grunt-codekit —save-dev

После завершения процесса вы найдете новую папку, node_modules, содержащую модули, которые мы установили.
конфигурация
Создайте новый файл с именем Gruntfile.js в каталоге проекта и вставьте следующий код. Этот код Grunt Wrapper где мы будем регистрировать, настраивать и выполнять задачу Grunt. Если вы используете Sublime Text, вы можете легко вставить этот код, используя Грунт Сниппетс,

module.exports = function (grunt) {
grunt.initConfig ({

});
}

Затем мы определяем задачу codekit в grunt.initConfig, вот так.

module.exports = function (grunt) {
grunt.initConfig ({
кодекит: {
your_target: {
файлы: {
‘index.html’: ‘kit / index.kit’,
}
},
},
});
}

Эта конфигурация скомпилирует index.kit в index.html. Чтобы попробовать это, мы можем добавить это в index.kit.

… И запусти в Терминале ворчливый кодекет.
Index.html успешно создан, и, как вы можете видеть ниже, значение переменной также успешно применяется в теге абзаца.
Включение файлов
Как мы упоминали в нашем предыдущем посте, мы можем включать / импортировать файлы в файл Kit. Учитывая, что у нас есть header.kit, sidebar.kit и footer.kit (я предполагаю, что мы добавили соответствующий контент в эти файлы), мы можем включить их в index.kit, вот так.

    </div>
    <!-- @include inc/sidebar.kit -->       
</div>