A Yeoman generator to generate h5 games with phaser.js or not, based on Gulp!

Usage no npm install needed!

<script type="module">
  import generatorPhaserH5 from '';



npm version Travis CI Build Status dependencies status devDependencies status codecov Downloads

Translations: 简体中文

generator-phaser-h5 is a Yeoman plugin that makes starting up Phaser h5 projects simple, quick and easy.

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'

Not only for Phaser, Add Dependencies you want.

ECMAScript version ES5

Also Support ECMAScript version ES6

Bower manages the things — frameworks, libraries, assets, and utilities.

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 manages plugins

npm manages plugins.

devDependencies are for the development-related scripts, e.g. unit testing, packaging scripts, documentation generation, etc.

dependencies are required for production use, and assumed required for dev as well.

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"

Frontend environments evolve rapidly nowadays, modern browsers have already implemented a great deal of DOM/BOM APIs which are good enough. So You-Dont-Need-jQuery


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.
  • jshint for Static Code Analysis Tool
  • babelify for Babel browserify transform


Note: npm install <packages>


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

Use the following ways Sometime:

  • Cdn jsDelivr, cdnjs, bootcdn :

    <script src=""></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>

Directory Structure

In development, run gulp:

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

In production, run gulp build:

    ├── assets
    │   ├── img
    │   ├── media
    │   ├── css
    │   │   ├── libs
    │   │   │	 └── *.css 	   # libs css e.g. animate.min.css, swiper.min.css, etc.
    │   │   └── css.min.css
    │   └── js
    │       ├── libs
    │       │    └── libs.js
    │       └── main.min.js
    └── index.html



Only for Phaser


Not only for Phaser , Add Dependencies you want , Without Bower


Rebuild Directory Structure


Refactor Generator , Fix tests


Yeoman Generator API


创建 Yeoman Generator 简单教程

开发自己的 yeoman 脚手架(generator-reactpackage)




MIT License