/generator-html5

A HTML5 publicity page generator

Primary LanguageJavaScriptMIT LicenseMIT

HTML5 Slide Webapp Generator

npm version

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

功能

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

安装

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

[sudo] npm install -g yo bower

然后就可以安装本工具了

[sudo] npm install -g generator-html5

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

在所有文件生成完后你就可以通过 gulp serve 来预览你的项目了。

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

使用

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

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

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

然后我们来开始开发,脚手架工具已经给出示例代码,你可以参照示例代码,按照如下步骤来开发你的项目:

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

项目结构

FAQ