Использование Kit Language в Windows и Linux
В предыдущем посте мы говорили о Kit, очень простом языке шаблонов HTML. Если вы следовали этому, вы должны обнаружить, что приложение с графическим интерфейсом, способное компилировать Kit в HTML-совместимый браузер формат, Codekit,
К сожалению, Codekit доступен только для OS X, в настоящее время нет аналогичных приложений для Windows и Linux, которые поддерживают Kit.
Если вы работаете на Windows и Linux, но хотите использовать Kit, вы можете использовать Grunt в качестве альтернативы. Grunt имеет обширную коллекцию плагинов, предоставленных щедрыми разработчиками по всему миру, включая плагин для компиляции языка Kit, Грунт-codekit, Давайте проверим это.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Рекомендуемое чтение: 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>
Давайте снова запустим команду grunt codekit в Терминале. И здесь мы идем! Содержимое этих файлов помещается в index.html. Ницца!
Заключение
Grunt — отличная альтернатива многим инструментам веб-разработки, включая компиляцию файла Kit. Я надеюсь, что этот совет будет полезен, особенно для пользователей Windows и Linux, которые хотят освоить язык Kit.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)