用于构建静态网站的模块化工具包
Stakit 是一个框架,可帮助您轻松构建静态网站的强大构建管道。它是最小的和模块化的,使用流,并且 Stakit 工具包有很多您可以使用的插件和转换。
Stakit 仍处于开发早期,但您可以使用它来看看是否应该关心它。
与框架无关:适用于任何可以输出字符串的框架
模块化:你永远不会拥有不需要的东西,但你可以npm install它
小 api :它只有 7 个核心方法,只有 3 个是你必须使用的
无限制:您永远不会受到静态站点生成器的功能和模板的限制
快速、内存高效:大量使用流
npm i stakit
var stakit = require('stakit')var { 渲染, 水合物 } = require('stakit-choo')var app = require('.')var kit = stakit()
.routes(函数 (状态) {return [ '/' ]
})
.渲染(渲染(应用程序))
.transform(水合物)kit.output(stakit.writeFiles('./public'))一般来说,生成静态站点时需要做两件事:
用一些内容填充您的应用程序
复制静态文件
有许多模块化(且可爱的)工具可用于捆绑 Javascript 或转换 CSS,Stakit 是类似的工具,但适用于完整站点,并且特别关注 HTML 文件。
您必须处理应用程序的捆绑,并包含捆绑包(如果您需要的话)。遵循 Choo 的理念,它体积小、易于理解且易于使用。它被设计为主要与 Choo 一起使用,但它也应该与其他同构框架一起使用。
Stakit 以编程方式调用,而不是从命令行调用,因此您需要一个 Javascript 文件(如build.js )。之后,您可以使用stakit()初始化套件,然后链接几个方法。
管道中必须出现两个方法:
routes(fn)
render(fn)
所有其他方法都是可选的,并按以下顺序调用:
kit.use()应用的所有中间件
应用的routesReducer函数
对于每条路线:
对应用的renderer一次调用
所有transform调用
使用kit.output()结束管道。
本节提供有关 Stakit 中每个函数如何工作的文档。它旨在作为技术参考。
kit = stakit()初始化一个新的kit实例。
kit.html(template, selector)设置起始 HTML 模板和选择器。
kit.use(fn(context))将中间件/插件推送到中间件列表,通用功能在路由生成之前运行。您可以以任何您想要的方式修改上下文,从更改state到安装transform 。
套件.use(函数(ctx){
ctx._transforms.push(变换)})有关更多信息,请参阅中间件。
kit.routes(routeReducer(state)) routeReducer是一个获取context.state作为参数并返回字符串/路由Array的函数。这些是 Stakit 将调用render的路由。
kit.routes(函数(状态){
返回 Object.keys(状态.内容)
// 或静态地
返回 ['/', '/about', '/blog']})kit.render(renderer(route, state))设置构建的渲染器。这就是奇迹发生的地方。将为routes返回的每个路由调用renderer 。
它必须返回一个具有以下值的对象:
{
html: string, // 渲染结果
state: object // 渲染后的状态(可选)}转换将接收此处返回的更新状态。
kit.transform(transformFn, opts)将转换推送到转换列表。 Stakit 使用documentify和 Streams 来构建 HTML。
在 HTML 中替换呈现的内容后调用它们。
有关详细信息,请参阅变换。
kit.output(writerObject)启动构建管道并通过将所有路由传递给writerObject.write({ destination, stream })来结束构建管道。返回一个Promise ,等待所有文件(路由和静态)完全写入。
默认情况下,它使用 Writer 将站点输出到./public目录。
请参阅作家了解更多信息。
内置中间件:
stakit.state(extendState)帮助您向context.state添加值的实用程序
kit.use(stakit.state({ message: '早上好!' }))stakit.copy(files)用于将文件复制到输出目录的中间件。
// 将文件复制到同一位置kit.use(stakit.copy([ 'robots.txt' ]))// 将文件复制到输出路径中的不同位置kit.use(stakit.copy({
'机器人.txt': '机器人.txt',
'sitemap.xml': 'sitemaps/sitemap.xml'}))Documentify非常强大并且可以轻松模块化。 Stakit 变换的一般格式为:
// 包装在函数中 function lang (context) {
// 返回文档化转换
return function (lang) {// 返回一个转换流return hstream({ html: { lang: lang } })
}}注: hstream是一个很好的朋友!
documentify转换包装在一个函数中,因此我们可以在需要时获取context ,而不会干扰documentify的 API。如果你想绕过这个,你可以简单地从函数返回documentify转换。
在transforms/readme.md中查看 Stakit 附带的转换。
编写器输出生成的、转换后的静态文件。这可能会有所不同,从输出到文件系统到将它们放入 Dat 存档中。
作者必须实现一个方法: write 。对于每个文件,包括生成的页面+添加到context._files文件, writer.write将使用文件对象调用。它应该返回一个Promise ,该 Promise 在管道被刷新(文件被完全写入)后返回。
文件对象如下所示:
{
source: null | string,
destination: string,
stream: Stream
}建议在每次构建之前清理输出目录。
以内置stakit.writeFiles方法为例。
这就是作家的全部。
choo - 坚固的 4kb 前端框架
documentify - 模块化 HTML 捆绑器
jalla - 闪电般快速的 Web 编译器和服务器合二为一(也感谢大量代码片段!)