Generator-html5 NPM

HTML5 Slide Webapp Generator

这是一款面HTML5推广展示webapp的快速项目生成工具，让开发者只需关心页面本身的逻辑，并且只需要写很少的的代码，就能快速完成。

专注于做HTML5展示页面的生成工具，能快速生成页面所需的框架代码，并且已经将页面切换，兼容不同分辨率展示等的逻辑封装起来了，让使用者只需关注每一页的动作（动画）执行序列的控制
提供了CSS Autoprefix
图片压缩
通过gulp提供了文件编译、打包的功能
能方便地使用bower安装各种插件，并且能在页面中自动生成bower包的依赖关系

首先需要通过如下命令安装yeoman和bower，推荐使用node版本管理工具nvm或n，这样不仅可以很方便地切换node版本，而且全局安装时候也不用加sudo了。

[sudo] npm install -g yo bower

然后就可以安装本工具了

[sudo] npm install -g generator-html5

在安装完成后，执行yo html5来生成你的项目，请根据提示一步一步来操作，不用担心，步骤非常少。

在所有文件都生成完后，会默认执行npm install && bower install来安装项目依赖的插件，由于依赖的插件较丰富，这一步会耗时比较长，请耐心等待一会儿。

依赖安装完后你就可以通过执行gulp serve来预览示例页面了，脚手架工具默认给出了2页的示例，并给出了4张示例图片的展示，你可以通过滑动或滚动鼠标切换展示。

然后我们来开始开发，在开发前需要重点关注这几个文件：

app/index.html
app/styles/style.css是页面所有样式的所在
app/scripts/base.js中是页面的核心逻辑，里面包括了一些基础工具方法的定义，页面滑动组件swiper.js的初始化，对于较简单的需求这个文件一般不太需要修改
app/scripts/index.js供开发人员自己的定制，可以定义想要进行预加载的图片，设置每一页的动做序列

目前脚手架工具已经给出示例代码，你可以参照示例代码，按照如下步骤来开发你的项目：

在app/index.html中添加你自己的元素或者是增加页数
然后再app/styles/style.css中对元素进行布局，建议对所有元素使用绝对布局，本项目最佳UE图尺寸为720*1280，同时为了适配小屏幕手机，页面下部要适当留白，图片取出直接二倍缩放使用，并可以直接使用像素为单位进行布局
最后在app/scripts/index.js中根据范例完善你自己的动作序列

一般情况下，只需要修改以上三个文件即可满足需求，而不需要修改app/scripts/base.js。

最后你可以通过gulp命令来编译和生成你的最终项目文件。