在 Windows 和 Linux 中使用 Kit 语言

在上一篇文章中，我们讨论了Kit，一种非常简单的 HTML 模板语言。如果你一直在关注这个，你应该会发现能够将 Kit 编译成浏览器兼容的 HTML 格式的 GUI 应用程序是Codekit。

不幸的是，Codekit 仅适用于 OS X，目前还没有支持 Kit 的适用于 Windows 和 Linux 的类似应用程序。

如果你在 Windows 和 Linux 机器上工作，但又想使用 Kit，你可以使用 Grunt 作为替代。Grunt 拥有大量插件，由世界各地慷慨的开发人员贡献——这包括编译 Kit 语言的插件grunt-codekit。让我们来看看。

注意：尽管以下提示主要是为了向 Windows 和 Linux 用户展示 Codekit 的替代方案，但 OS X 用户也可以使用它。

入门

首先，我们将为我们的项目创建一个目录。让我们启动终端或命令提示符，然后键入以下命令行：

mkdir kit-grunt
cd kit-grunt

我们创建了一个名为kit-grunt的新目录；第二行让我们输入它。但如果您之前已经创建了一个项目目录，您可以跳过第一行，并立即使用命令在终端中导航到您自己的目录cd。

在项目目录中，我们创建一个名为kit的新文件夹，我们将在其中放置.kit文件。在下面键入此命令：

mkdir kit

然后，我们还使用这些命令安装 Grunt 和插件。请注意，您必须先在系统中安装 Node.js。

npm install grunt --save-dev
npm install grunt-codekit --save-dev

该过程完成后，您会发现一个新文件夹 node_modules，其中包含我们已安装的模块。

配置

在项目目录下新建一个名为 Gruntfile.js 的文件，并放入以下代码。这段代码是一个Grunt Wrapper，我们将在其中注册、配置和执行 Grunt 任务。如果您使用的是 Sublime Text，则可以使用Grunt Snippets轻松插入此代码。

1个
2个
3个
4个
5个

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

然后我们codekit在中定义任务grunt.initConfig，就像这样。

1个
2个
3个
4个
5个
6个
7
8个
9
10
11

module.exports = function(grunt) {
grunt.initConfig({
codekit: {
your_target: {
files : {
'index.html' : 'kit/index.kit',
}
},
},
}); 
}

这个配置会将 index.kit 编译成 index.html。为了尝试这一点，我们可以将其添加到 index.kit 中。

<!-- @var = This is the variable -->
<p><!-- @var --></p>

…并在终端中运行grunt codekit。

index.html 已成功生成，如下所示，变量的值也已成功应用到段落标记中。

文件包含

正如我们在之前的帖子中提到的，我们可以将文件包含/导入到 Kit 文件中。鉴于我们有 header.kit、sidebar.kit 和 footer.kit（我假设我们已经在这些文件中添加了相应的内容），我们可以像这样将它们包含到 index.kit 中。

<!-- @include inc/header.kit -->
<div class="container">
<div class="header row">
<h1>This is the header</h1>
</div>
<div class="row">
<div class="col-md-8">
<p>This is the content</p>
</div>
<!-- @include inc/sidebar.kit -->
</div>
</div>
<!-- @include inc/footer.kit -->

让我们grunt codekit在终端中再次运行该命令。现在我们开始！这些文件的内容被放在 index.html 中。好的！

结论

Grunt 是许多 Web 开发工具的绝佳替代品，包括编译 Kit 文件。我希望这个技巧有用，特别是对于想要掌握 Kit 语言的 Windows 和 Linux 用户。