README.zh-CN.md

基于Gulp的前端h5项目快速生成器

Translations: English

h5 ≠ <h5></h5> , h5 ≠ html5, h5 ≠ car haval5.

h5 = Web page or Web app etc.

How do you think of some Chinese call HTML5 'H5'

起初是基于phaser的。若不使用phaser，仍可利用Gulp自动化构建工具。

支持ECMAScript version ES5 ，还支持 ECMAScript version ES6

利用Bower添加所要用的插件eg. threejs, pixijs

Note:...psst! While Bower is maintained, we recommend yarn and webpack for new front-end projects!

安装

Note: Install Node.js, Gulp, Bower First

• Get Yeoman and generator-phaser-h5 via npm.

  npm install --global yo                    # Install Yeoman if you don't have it yet.
  npm install --global generator-phaser-h5   # Install generator-phaser-h5

使用

1. Create a directory to keep your project contents and go into it.

   mkdir myproject
   cd myproject

2. Create your new game project.

   yo phaser-h5

3. Launch it!

   gulp          # Launches the server and opens the page for live development.
   gulp build    # Prepare the h5 release for distribution.

The result in dist/

常用插件

Bower管理插件

通过npm管理插件，devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

Note: Please do not put test harnesses, transpilers or latest "Matches latest version", * "Matches any version" in your dependencies object!

Recommend: version "Specifying version", ^version "Compatible with version"

前端发展很快，现代浏览器原生 API 已经足够好用，是时候抛弃jQuery了。You-Dont-Need-jQuery

devDependencies:

Note: npm install <packages> --save-dev

• browserify for bundling up all of your dependencies
• gulp-plugins for 'clean', 'copy', 'concatlibs', 'compile', 'autoprefixer', 'minifycss', 'processhtml', 'minifyhtml', 'rev', etc.
  • gulp-sass for converting to css (Optional)
• jshint for Static Code Analysis Tool
• babelify for Babel browserify transform

dependencies:

Note: npm install <packages>

• phaser-ce for HTML5 games and 2d canvas
• howler.js for audio
• jquery ajax for ajax
• Gsap for javascript animation
• animate.css for CSS animation style

others:

Note: Read Documentation For a Getting started guide, Usage , API docs, etc. check out or docs!

• better-picker for address picker
• Swiper for slider
• Chart.js for chart
• tracking.js for tracking face etc.
• AlloyImage for image processing lib
• Stats for JavaScript Performance Monitor

Use the following ways Sometime:

• Cdn jsDelivr, cdnjs, bootcdn :

  <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.10.5/phaser.js"></script>

• browserify Make file available from outside the bundle with require(file) (Also with import(file) because of babelify)

• browserify-shim Make CommonJS-Incompatible Files Browserifyable

• Local In gulpfile.js Write Libs paths and Run gulp concatlibs task:

  <script src="/assets/js/lib/libs.js"></script>

  ​

文档目录结构

开发时目录结构 gulp

    .
    ├── dist
    ├── src
    │   └── assets
    │       ├── img
    │       ├── media         # video audio resources
    │       ├── css
    │       │   ├── css.css
    │       │   └── sass.scss
    │       └── js
    │           ├── entities
    │           ├── states    # phaser state
    │           │
    │           └── main.js    
    │
    ├── node_modules
    ├── README.md
    ├── LICENSE
    ├── index.html
    ├── package.json
    ├── gulpfile.js
    └── .jshintrc   

打包后目录结构 gulp build

   dist
    ├── assets
    │   ├── img
    │   ├── media
    │   ├── css
    │   │   ├── libs
    │   │   │	 └── *.css 	   # libs css such as animate.min.css, swiper.min.css
    │   │   └── css.min.css
    │   └── js
    │       ├── libs
    │       │    └── libs.js
    │       └── main.min.js
    │
    └── index.html

版本

1.x.x

仅支持Phaser插件

2.x.x

支持更多插件，去除Bower

3.x.x

重构项目结构

4.x.x

重构生成器，修改测试用例

参考链接

Yeoman Generator API

generator-phaser-plus

创建 Yeoman Generator 简单教程

开发自己的 yeoman 脚手架（generator-reactpackage）

前端模块及依赖管理的新选择：Browserify

gulp-rev：项目部署缓存解决方案

协议

MIT License