在 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 用户。