一、概述

快速创建针对移动端的初始模板，方便快速开发，适用于移动端日常专题/活动页、常规wap应用的开发。

项目源码：https://gitee.com/bulls-cows/html5-cli。

二、为何你需要html5-cli？

公司是不是有一堆移动端的专题活动页要开发？

是不是为了创建这些项目，都需要重复一些编写/复制webpack配置文件、编译命令等工作？

通过脚手架创建模板项目就是为了减少这些重复性工作。

html5-cli官方模板的主要特点有：

🎄 使用常见的react，没有新的学习成本；
📲 内置rem响应式支持（默认1rem = 100px，750px宽的设计稿对应7.5rem宽度）；
🌐 修改文件时自动刷新浏览器，方便查看效果；
🙈 支持转发本地请求，避免跨域问题；
💪 自动添加CSS浏览器厂商前缀；
🔥 使用webpack4，支持js文件模块化开发；
👫 支持使用ES6+新特性；
🏇 自动压缩js、css，加快页面加载速度；
🏏 编译产物目录名根据项目名动态生成(如”cjhd1903春节活动” => “cjhd1903”)；
🚑 eslint代码风格检测（开启自动修复功能）；
🛠 支持配置化渲染页面，方便深度定制；
🚀 对于支持SFTP协议的服务器，支持命令行直接发布本地编译产物；
🥤 集成支持按需加载的UI组件库：Ant design mobile（可选）；
🐢 支持将代码按路由进行分割，支持懒加载；

三、使用方法

3.1、第一次使用前的准备

第一次使用前，需要先全局安装html5-cli（后面再创建项目时不需要再执行这个命令了）：

npm install -g html5-cli

然后，你就可以在你的终端中使用html5命令，或者使用别名h5了。

3.2、创建项目

# 将<project-name>替换成实际项目名（这里`h5`也可以换成`html5`，作用相同，看你喜欢用哪个命令）
h5 init <project-name>

3.3、安装项目依赖

进入项目目录后，安装依赖：

npm install

如果依赖安装较慢，可以使用淘宝镜像来安装依赖：

npm i --registry=https://registry.npm.taobao.org

说明：项目模板中提供了一个.npmrc文件，其中已经将registry设置为淘宝镜像，并且设置了sass_binnary_site（默认模板中没用到sass，预留给打算装sass来写项目的同学）。

3.4、本地开发

进入到<project-name>模板项目根目录，通过下面的命令进行本地开发（渲染模版文件时，可以直接读取到src/site.data.config.js文件中的配置内容）：

npm run start

3.5、构建正式产物

开发完毕后，可以通过下面的命令构建正式编译产物：

npm run build

3.6、部署上线

如果目标服务器支持通过SSH协议进行文件部署，则可通过下面的命令进行部署（需要先依据build/deploy-example.js的内容写一个build/deploy.js文件）：

npm run deploy

注：如果不想每次都敲npm run build和 npm run deploy 命令，可以直接执行 npm run buildAndDeploy 命令， npm run buildAndDeploy 命令会先编译产物然后直接发布，跟分开执行 npm run build 和 npm run deploy 效果是等价的。

四、协议

本项目采用MIT协议。

html5-cli