简介
simple-html-project-generator 是一个可以帮助前端开发者快速创建基于 HTML、CSS 和 JavaScript 的简单 Web 项目的 npm 包。这个包提供的工具和模板可以让你轻松创建一个包含各种 Web 开发必需的基本结构的项目，并且可定制化度高，可以让你根据自己的需要添加或删除一些组件和文件。
安装
你可以像安装其他 npm 包一样，使用以下命令来安装：
npm install -g simple-html-project-generator
使用方法
创建一个新项目
要创建一个新项目，你可以运行以下命令：
shpg create my-project
这个命令将会创建一个名为 my-project 的目录，并在其中生成一个基本的 HTML 文件以及其它 Web 开发必需的文件和目录：
-- -------------------- ---- ------- ----------- --- ---------- --- ---- - --- --------- --- --- - --- ------- - --- -------- - --- ------------- - --- ------------- --- ---- --- -----------
根据模板创建一个新项目
simple-html-project-generator 为不同的 Web 项目类型提供了不同的模板。你可以指定要使用哪种模板来创建你的项目，例如：
shpg create my-project --template basic
这个命令将会创建一个名为 my-project 的目录，其中包含一个基础模板中的所有文件，例如：
my-project/ ├── index.html ├── css/ │ ├── style.css ├── js/ │ └── main.js └── img/
你可以将 template 指定为下列之一：
basic：包含一个基础的 HTML、CSS 和 JavaScript 文件。这是一个适合用于快速原型开发的基础模板。bootstrap：包含一个基于 Bootstrap3 的 HTML、CSS 和 JavaScript 文件。这是一个适合用于创建兼容性较好的 Web 项目的模板。jquery：包含一个基础的 jQuery 插件和相应的 HTML、CSS 和 JavaScript 文件。这是一个适合用于创建 jQuery 插件和较大的 Web 项目的模板。
你也可以使用 --verbose 标志来显示更多的详细信息。
添加支持库
simple-html-project-generator 包含了一些常用的支持库，如 jQuery 和 Lodash ，但如果你需要添加自己的支持库，则可以运行以下命令：
shpg add jquery-ui 1.12.1
这个命令会安装指定版本的 jQuery UI 库，并在你的项目中添加 js/vendors/jquery-ui.min.js 和 js/vendors/jquery-ui.min.css 文件以及相关资源文件。你可以使用 --verbose 标志来获取更多的详细信息。
更改项目配置
如果你需要更改项目的配置，比如更改 HTML 和 CSS 的模板，或者更改支持库的版本号，你可以编辑项目中的 config.json 文件。
构建和部署
simple-html-project-generator 带有一个内置的 Grunt 构建和部署脚本，你可以使用以下命令来运行构建脚本：
shpg build
这个命令将会压缩和合并所有的 JavaScript 和 CSS 文件，以及压缩和优化所有的图片，并在 dist 目录下生成一个完整的、可部署的项目。你可以使用 --verbose 标志来获取更多的详细信息。
结束语
simple-html-project-generator 是一个非常有用的 npm 包，可以帮助前端开发者快速创建一个基本的 Web 项目，并且还提供了灵活的定制化配置选项。我希望这篇文章能够帮助你了解并使用 simple-html-project-generator 这个工具。如果你有任何建议或意见，请在下面的评论中分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681c81e8991b448e43e5