html5-cli

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

• 更详细的介绍，请访问官网。
• 如果希望项目开发目录能清爽一些（不需要安装项目依赖、没有node_modules目录）的话，请移步classic-cli。
• 日常开发常用的函数就那么些，不想每个项目里都重写一遍？您可以试试utils-daily。
• 特别鸣谢开发者：峰间的云。
• 阿里云服务器折扣场：点我进入。
• 阿里云爆款特惠：点我领取。
• 阿里云最新特惠：点我领取。
• 腾讯云云产品限时秒杀：爆款1核2G云服务器，首年74元。
• 腾讯云：境外1核2G服务器低至2折，半价续费券限量免费领取！。

为何你需要html5-cli

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

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

使用html5-cli创建模板项目就是为了减少这些重复性工作。

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

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

使用

第一次使用前的准备

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

npm install -g html5-cli

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

创建项目

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

安装项目依赖

进入项目后，安装起来

npm install

# 如果依赖安装较慢，可以使用淘宝镜像来安装
npm i --registry=https://registry.npm.taobao.org

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

本地开发

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

npm run start

构建产物

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

npm run build

部署上线

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

npm deploy

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

移动端开发注意事项

以下是一些比较常见的item，完整列表点此查看。

📚 rem布局注意事项

反馈意见、贡献代码

📚 反馈意见

📚 贡献代码

License

本项目采用MIT协议。