跳至正文

在 Windows 和 Linux 中使用 Kit 语言

在 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 用户也可以使用它。

入门

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

1个
2个
mkdir kit-grunt
cd kit-grunt

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

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

1个
mkdir kit

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

1个
2个
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 中。

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

…并在终端中运行grunt codekit

咕噜咕噜跑

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

变量标签

文件包含

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

1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
<!-- @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 用户。

标签: