介绍
gulp-ssg是一款基于gulp的静态网站生成工具。它可以将多个Markdown文件转换为HTML文件，并将这些HTML文件组成一个静态网站。它支持多种模板引擎，并提供了丰富的功能（如自动生成菜单，组织文章，压缩图片等）来定制你的网站。
安装
你可以在命令行中通过npm安装gulp-ssg：
npm install --save-dev gulp-ssg
使用
首先，在你的项目中创建一个名为gulpfile.js的文件。然后，引入gulp和gulp-ssg模块：
const gulp = require('gulp');
const ssg = require('gulp-ssg');接着，你需要定义一个任务来使用gulp-ssg。以下是一个示例任务：
gulp.task('build', function() {
return gulp.src('src/**/*.md')
.pipe(ssg({
title: 'My Static Site',
dest: 'build'
}))
.pipe(gulp.dest('build'));
});在这个示例中，gulp.src('src/**/*.md')选择了所有.md文件作为输入。这些文件将被转换为HTML文件，并最终输出到build目录中。
ssg函数是gulp-ssg的核心，它接受一个配置对象作为参数。在这个示例中，我们定义了一个网站的标题为“ My Static Site”，并将输出目录设置为build。
配置
以下是gulp-ssg的配置选项：
title: 网站标题description: 网站描述author: 网站作者template: 模板引擎名（默认为nunjucks）root: 网站根目录highlight: 是否启用语法高亮minify: 是否压缩HTMLmenu: 是否生成菜单navigation: 是否生成导航permalink: 是否生成永久链接post: 是否支持文章pagination: 是否生成分页stripmeta: 是否去掉元数据draft: 是否将草稿发布marked: Marked选项swig: Swig选项
你可以在ssg函数中使用这些选项来定制你的网站。以下是一个使用自定义模板的示例：
-- -------------------- ---- -------
------------------ ---------- -
------ -----------------------
-----------
------ --- ------ ------
--------- -------------------
----- -------
---
--------------------------
---示例
让我们使用gulp-ssg来构建一个简单的博客网站。以下是我们的目标：
- 所有文章都在
src/posts目录中。 - 文章的元数据（日期和标题）存储在每个
.md文件的头部。 - 我们使用
nunjucks模板引擎来渲染我们的网站。 - 我们希望自动生成一个菜单来列出所有文章。
为了实现这个目标，我们需要做以下几步：
- 设置初始文件结构
首先，我们需要设置以下文件结构：
-- -------------------- ---- -------
--------
--- -----------
--- ------------
--- ----
--- ----------
--- ------
--- ---------
--- ---------
--- ---------- 安装依赖
然后，我们需要在命令行中安装所需的依赖：
npm install --save-dev gulp-ssg nunjucks
- 编写模板
接下来，我们需要创建一个模板文件来呈现我们的网站。在src/layout.njk中，我们可以添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ----- ----------
-------
------
------ ----- -------
-- -- ---- --
----
-- --- ---- -- ----- --
------ -------- --------- ------ ---------- -----------
-- ------ --
-----
-- ----- --
-- ----- ------- -- -- -------- --
-------
-------在这个模板中，我们使用了Nunjucks的语法来渲染网站的标题和菜单。我们还使用了一个content块，让子模板可以覆盖此处的内容。
- 写文章
接下来，我们需要编写一些Markdown文章。让我们在src/posts中添加三个.md文件。例如，post-1.md可以包含以下内容：
--- title: My First Post date: 2022-01-01 --- Hello, world! This is my first post.
注意，我们在头部中添加元数据（即标题和日期）。这些元数据将在构建过程中被用来生成菜单和日期存档。
- 配置gulpfile.js
最后，我们需要更新我们的gulpfile.js。以下是一个示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
----- -------- - --------------------
--------------------------
-------- ---------- -
------ -----------------------------
---------------------
---------------------
----------------
------- -------
-------- ----
---
----------------------
-------- --------------
----
-
------------------ ---------- -
------ ----------
-----------
----- -
------ --- ------
----- ----
--
----------- -
------- ----------------
-
---
---------------------------
---
------------------ ---------- -
------ ------------------------ ----------------------
---
-------------------- -------------------- ----------在这个示例中，我们创建了一个名为getPosts的函数来处理我们的文章。我们使用gulp.src选择所有文章，并通过ssg.metadata插件提取元数据。随后，我们将每个文件转换为Markdown，并使用ssg.sort插件按日期排序。最后，我们使用ssg.permalinks生成每篇文章的永久链接。
在gulp.task('build')中，我们使用getPosts来获取所有文章。我们还定义了网站的标题和菜单选项。最后，我们使用handlebars.layout来指定我们的layout.njk模板。
最终，我们可以通过运行以下命令来构建我们的网站：
gulp build
总结
gulp-ssg是一个强大的静态网站生成工具，它可以将多个Markdown文件转换为美观和可访问的HTML文件。使用gulp-ssg，你可以轻松地创建一个静态网站并定制它，以便满足你的特定需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcba5b5cbfe1ea0612643