介绍
generator-static-html 是一款基于 Yeoman 平台的前端开发工具，可快速生成一个静态 HTML 模板项目，有利于前端开发人员更高效地开发静态页面。
安装
在命令行中输入以下命令进行安装：
npm install -g yo npm install -g generator-static-html
使用
输入以下命令生成项目：
yo static-html
然后会提示你填写必要的项目信息，包括项目名称、作者、描述信息等。填写完成后，即可生成一个基于 HTML/CSS/JS 的静态页面模板。
添加依赖
通过 generator-static-html 可以自动初始化一个基本的静态 HTML 项目，但是一般情况下我们在开发中会用到一些第三方的库，因此需要手动添加依赖包。
在命令行中进入项目目录，输入以下命令添加对应的依赖：
npm install <package_name> --save
开发
在项目目录中有一个 src 目录，存放的是开发中的源代码，包括 HTML 文件、CSS 样式文件、JavaScript 代码等。
在开启开发模式之前，我们需要先安装依赖：
npm install
开发模式下，我们可以通过以下命令启动项目的本地服务器，实时预览页面效果：
npm run serve
打包
在开发过程中，我们通过命令行启动的本地服务器是用来测试和预览页面的，而打包后的文件才是用来部署到服务器的。
通过以下命令可以将项目打包为部署文件：
npm run build
打包完成后，会在项目目录的 dist 目录下生成一个压缩文件。
示例代码
以下是一个简单的 HTML 页面示例，通过 generator-static-html 可以快速生成对应的模板，方便开发：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------- ------ --- ------------
---- -- --- -- ---
----- ---------------- ---------------------
----- ---------------- ---------------------
-------
------
--------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---------
---- ------------------
----------- -- -- ------ --- ---------
------- -- - ------ ---------- ----- ----- ----- --- ----- ----------- ---------- ----- ------ -- ----------- ----- ----- -- ------- ------ --- --------- ------- ------- ------ - --- --- --- ------- -------- --- -- ---------
------
--------
--------- ---- -- ------ --- --------
---------
---- -- -- -- ---
------- --------------------------
-------
-------结论
通过使用 npm 包 generator-static-html，我们可以快速创建一个静态 HTML 模板项目，大大提高了前端开发过程中的效率。同时，也可以手动添加依赖，并通过命令行进行开发和打包，便于项目的部署和发布。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd32d