在 web 开发领域中，静态网站生成器是一个非常流行的工具。它们可以生成静态网站，这使得网站更快、更安全、更易于维护。Create-static 是一个基于 Node.js 的静态网站生成器，拥有出色的性能和易用性。
本篇文章，我们将会深入的介绍 create-static 的使用方法，它不只适用于静态网站生成器，还可以用于构建简单的 HTML 页面或者用于自动化文档生成工具。
安装 create-static
Create-static 是一个 npm 包，可以直接使用 npm 或者 yarn 安装。
--- ------- -------------
或者
---- --- -------------
使用 create-static
开始使用 create-static 前，建议先新建一个空文件夹，并在其中建立好文件结构（如下）。
- --- --- - --- ---------- - --- ------ - --- --- - --- ------ --- ----- --- ------------ --- --------- --- ----------
src文件夹存放网站源代码；index.html是网站的入口文件，assets目录存放相关的资源文件；build文件夹用于存放静态资源的生成结果；package.json用于定义项目的相关信息与依赖包；.gitignore是 Git 版本控制的忽略配置文件。
步骤一：设置环境参数
create-static 包提供了一个在终端中直接运行的可执行文件 create-static，运行它时，需要指定环境变量参数。下面是一些常用的环境变量参数：
--config: 指定自定义的配置文件--input-dir: 指定输入文件夹--output-dir: 指定输出文件夹--clean: 清除输出文件夹--skip: 忽略一些静态文件
通过环境变量参数，可以自定义 create-static 生成静态资源的方式，下面是一些示例：
- ------ ------------- - ---- ------------- ---------- - ------------- ------------- ----------------- -------------------- - ------- ------------- ------- - -------- ------------- ------------------------------------
步骤二：创建自定义配置文件
create-static 支持在命令行中配置参数，但有时也需要在配置文件中指定一些配置。这些配置可以通过 JSON 或者 YAML 格式的文件来完成。
在项目根目录下创建一个名叫 .create-static.yaml 的文件。
--------- ----- ---------- -------
上述配置可以使用 --config 指定，在命令行中打开。
------------- ----------------------------
步骤三：配置 build 脚本
在 package.json 文件中，定义一个 build 脚本，为了提高静态资源的生成效率，建议使用 npm-run-all 包并行执行多个命令。
-
---------- -
-------- ------------ ---------- ---------
------------- ---------------
--
--------------- -
---------------- ---------
-------------- --------
-
-在终端中执行以下命令，即可开始生成静态资源。
--- --- -----
步骤四：网站构建
在 src 目录下，创建一个 index.html 文件，并添加一些基本的 HTML 标记。
--------- -----
----- -------------
------
----- ----------------
------------- --------------
-------
------
---------- -----------
-------
-------现在，我们可以运行 npm run build 命令来生成静态资源。在 build 目录下，就会生成一个带有资源文件的 HTML 文件。可以将这些静态资源部署到任何基于 HTML 文件的 web 服务器上。
总结
在本篇文章中，我们详细介绍了如何使用 create-static 包，从创建项目到构建，呈递给读者一个完整的流程。除此之外，本文还提供了丰富的示例代码，使读者能够更快的理解和掌握 create-static 的使用方法，帮助读者在项目中应用 webpack 提高前端项目的效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/63631