buildHtmlSite.js 是什么？

是一个自定义生成静态html站点的命令行工具。可以在当前目录下，根据配置文件。对当前的ejs模版可以生成一批html页面。

功能

1. 支持：可配置拷贝的文件夹。
2. 支持：可配置注入模版的全局变量，并支持自定义接口请求返回的变量。
3. 支持：可配置根据接口生成纯静态翻页列表和纯详情页面。

安装

# 全局安装
npm install buildhtmlsite -g
# 局部安装
npm install  buildhtmlsite -D

入门

1. 初始化项目

# 新建一个空目录
mkdir htmlSite
# 进入这个目录
cd htmlSite
# 初始化模版
build-html-site init=test
# 安装node依赖
npm i

2. 搭建模拟接口

mockapi文件夹下是项目测试用的请求接口数据。需要在当前目录下启动一个http服务，并能通过以下地址可以访问：1.全局变量：http://localhost:8080/global.json 2.新闻列表：http://localhost:8080/newspage.json 3.新闻详情：http://localhost:8080/details.json http服务推荐使用：http-server 详细使用方法，自行百度。 注：如果启动的服务地址不是：http://localhost:8080/ 请修改config.js里的：let apiHost="http://localhost:8080/"

# 以http-server为例，如果没有安装，请用命令先安装：npm install --global http-server
# 保存当前命令行处在上一步的htmlSite内
http-server -c-1 -o

3. 生成

# 运行这条命令，会在当前目录中出现build文件，里面就是生成的静态文件了。
build-html-site

4. 本地调试

# 生成静态命令
npm run build
# 启动本地调试服务器
npm run server

详细参数

格式：build-html-site 参数名1=值 参数名2=值 参数名3=值 ...

1. env=dev/tes/prod 设置当前环境
2. init=test 初始化模版，注：目前只支持test,合期会支持更多。
3. init-list=1 列出支持的模版
4. watcher=1 开启监控模式
5. copy=0 关闭拷贝
6. clrbuild=0 关闭清空build文件
7. config=xxx 配置文件路径，默认在当前目录config.js
8. page=xx.html 指定只生成某一个html文件

高级用法

1. 部分接口数据直接返回本地自定义数据。自定义配置文件中的属性：requestApi

requestApin属性作用：自定义自定义的接口请求方法，默认为：axios.create().request 注：自定义需要返回一个promise

# 一个例子，不需请求接口，运行命令指定另一个配置文件试试：
build-html-site config=./config_ext.js

如何运行和本地调试这个工具源代码。

# 配置npm全局使用淘宝镜像源
npm config set registry https://registry.npm.taobao.org
# 配置npm全局恢复官方镜像源
npm config set registry https://registry.npmjs.org

#npm项目根目录运行终端命令：(该npm包放进了本地npm缓存里)
npm link
#在其他项目里引用调试（与测试npm包关联）
npm link 包名
#取消与测试npm包关联
npm unlink 包名

工程重新构建清缓存

$ rm -rf node_modules
$ rm -rf package-lock.json
$ npm cache clear --force
$ npm install

资源参考

1. npm包发布详细教程
2. 生成全局命令,配置命令脚本npm link
3. nodejs漏洞华丽变身webshell实现持久化
4. EJS
5. http-server
6. axios
7. Node.js文档
8. fs-extra
9. fullPage.js
10. fullPage.js实例
11. ejs-loader
12. 如何设置nodejs命令行文字颜色
13. Node.js 控制台动画，绘制跨年祝福
14. 用node.js怎样做命令行游戏？实现原理是什么？
15. 那些制作CLI可能用到的轮子
16. layer 弹出层组件
17. 免费cdn加速
18. 如何生成webp动图 img2webp
19. 二维码
20. js、css、html压缩与混淆汇总
21. html-minifier HTMLMinifier中文说明

特效参考

1. canvas波浪效果网页动画
2. svg波浪动画特效代码
3. 图片多种移入动效
4. jquery-touchswipe
5. jquery swiper
6. jQuery延迟加载(懒加载)插件
7. animista