只是另外一个 PIXIJS 项目

内容基本参考 https://kurozael.github.io/typescript-pixi-gulp-tutorial/ ，有所修改。

安装 Node

从 node.js 官网 https://nodejs.org 下载并安装，不再赘述。

开始项目

随便在哪里建一个文件夹，就叫 demo 吧，然后在文件夹中打开终端，首先需要修改 npm 的源，不然速度会很慢。可以使用淘宝的数据源：

1	npm config set registry https://registry.npm.taobao.org

然后输入npm init 启动项目即可。

安装依赖

首先安装 gulp： npm install -g gulp

安装完成后，使用 npm install --save <package name> 安装依赖包，由于我们用 ts 构建项目，推荐安装以下包：

@types/node
vinyl-source-stream
vinyl-buffer
gulp-typescript
typescript
browserify
browser-sync
fast-glob
pixi.js
fs

TS配置

在根目录建立一个 tsconfig.js 文件，内容如下：

{
  "compilerOptions": {
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "commonjs",
  },
}

项目结构

在根目录创建 src, build, release 三个文件夹（也可以任意命名），分别存放 ts 源码文件，编译后的 js 文件，以及最终打包的文件。

配置gulp

在根目录创建 gulpfile.js 文件，填入以下内容：

var gulp = require("gulp");
var tsc = require("gulp-typescript");
var fs = require("fs");

var project = tsc.createProject("tsconfig.json");

gulp.task("build", function(done) {
    var gameSrc = ["src/**/**.ts"];
    var builder = gulp.src(gameSrc)
    .pipe(project())
    .js
    .pipe(gulp.dest("build/"));
    return builder;
});

var browserify = require("browserify");
var source = require("vinyl-source-stream");
var buffer = require("vinyl-buffer");

gulp.task("bundle", gulp.series("build", function(done) {
    var outputFolder = "release/";
    var outputFileName = "js/app.js";
    var mainTsFilePath = "build/main.js";

    var bundler = browserify({
        paths: ["./build"],
        debug: false,
        standalone: outputFileName
    });

    var output = bundler.add(mainTsFilePath).bundle()
    .pipe(source(outputFileName))
    .pipe(buffer())
    .pipe(gulp.dest(outputFolder));
    return output;
}));

var browserSync = require("browser-sync");

gulp.task("serve", gulp.series("bundle", function(done) {
    var outputFolder = "release/";
    browserSync.init({
        server: {
            baseDir: outputFolder
        },
        codeSync: false,
        online: true,
        cors: true
    });
    done();
}));

然后就可以在根目录通过 gulp build 命令编译 src 中的 ts 文件；通过gulp bundle打包编译后的 js 到 release 文件夹；通过gulp serve 开启本地服务器测试项目。（ps. bundle 命令会先执行 build, serve 命令会先执行 build 和 bundle）

开始写Demo

在 src 目录下新建一个ts文件 main.ts；写入如下代码：

// 引入 pixi 包
import * as PIXI from 'pixi.js';

//新建 app
const app = new PIXI.Application({width: 1280, height: 720});

//将 pixi 元素添加到页面
window.onload = () => {
    document.body.appendChild(app.view as HTMLCanvasElement);
    //讲app对象添加到窗口属性，方面调试，
    (<any>window).app = app;
};

//随便画个什么，看看效果
let t = new PIXI.Text('测试', { fontSize: 24, fill: 0x0x4caf50});
app.view.addChild(t);

保存后在终端执行 gulp serve 就可以看到效果了。