[build] added html5 task

build/client.js

@@ -1,10 +1,15 @@
 const gulp = require('gulp');
+const concat = require('gulp-concat');
+const uglify = require('gulp-uglify');
+const babel = require('gulp-babel');
+const template = require('gulp-template');
 const yargs = require('yargs');
 const Haxe = require('../tasks/haxe');
 const FlashPlayer = require('../tasks/flashplayer');
 const version = require('./version');
 const prepare = require('./prepare');
 const debug = require('../tasks/debug');
+const webserver = require('gulp-webserver');
 
 
 const generate = () => function generate() {
@@ -13,26 +18,67 @@ const generate = () => function generate() {
     ]);
 };
 
-const build = () => function build() {
+const build = (platform) => function build() {
     const argv = yargs.argv;
     return gulp.src('.')
             .pipe(new Haxe().openfl({
                 command: 'build',
-                platform: 'flash',
+                platform: platform,
                 version: version,
-                outputFile: 'tankz.swf',
                 debug: argv.dev,
             }))
-            .pipe(gulp.dest('target'));
+            .pipe(gulp.dest(`target/${platform}`));
 };
 
-const test = (build) => function test() {
+const flashIndex = function() {
+    return gulp.src('src/client/html/index.html')
+        .pipe(template({
+            scripts: ['app.min.js'],
+            swf: 'tankz.swf'
+        }))
+        .pipe(gulp.dest('target/flash'))
+};
+
+const flashJs = function() {
+    const src = [
+        'src/client/html/js/*.js'
+    ];
+    return gulp.src(src)
+        .pipe(babel({presets: ['es2015']}))
+        .pipe(uglify())
+        .pipe(concat('app.min.js'))
+        .pipe(gulp.dest('target/flash'))
+};
+
+const webapp = function () {
+    return gulp.src('src/webapp/*').pipe(gulp.dest('target'));
+};
+
+exports['client:flash:html'] = gulp.parallel(flashIndex, flashJs);
+exports['client:flash'] = gulp.series(prepare(Haxe.ID), generate(), build('flash'), exports['client:flash:html']);
+exports['client:html5'] = gulp.series(prepare(Haxe.ID), generate(), build('html5'));
+exports['client:webapp'] = webapp;
+exports['client'] = gulp.series(prepare(Haxe.ID), generate(), gulp.parallel(build('flash'), build('html5')), exports['client:flash:html'], webapp);
+
+
+
+const testFlash = function() {
     const argv = yargs.argv;
-    return build()
+    return build('flash')
-            .pipe(new FlashPlayer().run(argv.dev))
+        .pipe(new FlashPlayer().run(argv.dev))
-            .pipe(debug());
+        .pipe(debug());
 };
 
+const testHtml5 = function() {
+    return gulp.series(build('html5'), () => gulp.src('target/html5').pipe(webserver({
+        host: 'localhost', port: 3000,
+        open: true,
+        fallback: 'index.html'
+    })))();
+};
+
+exports['client:flash:test'] = gulp.series(prepare(Haxe.ID, FlashPlayer.ID), testFlash);
+exports['client:html5:test'] = gulp.series(prepare(Haxe.ID), testHtml5);
+exports['client:test'] = exports['client:flash:test'];
+
 
-exports['client'] = gulp.series(prepare(Haxe.ID), generate(), build());
-exports['client:test'] = gulp.series(prepare(Haxe.ID, FlashPlayer.ID), test(build()));

build/webapp.js

@@ -1,28 +0,0 @@
-const gulp = require('gulp');
-const concat = require('gulp-concat');
-const uglify = require('gulp-uglify');
-const babel = require('gulp-babel');
-const template = require('gulp-template');
-
-
-const index = () => function index() {
-    return gulp.src('src/webapp/index.html')
-        .pipe(template({
-            scripts: ['app.min.js'],
-            swf: 'tankz.swf'
-        }))
-        .pipe(gulp.dest('target'))
-};
-
-const js = () => function js() {
-    const src = [
-        'src/webapp/js/*.js'
-    ];
-    return gulp.src(src)
-        .pipe(babel({presets: ['es2015']}))
-        .pipe(uglify())
-        .pipe(concat('app.min.js'))
-        .pipe(gulp.dest('target'))
-};
-
-exports['webapp'] = gulp.parallel(index(), js());

gulpfile.js

@@ -30,6 +30,6 @@ exports.update = prepare.update;
 merge('./build/prepare');
 merge('./build/client');
 merge('./build/server');
-merge('./build/webapp');
 
-exports.default = gulp.series(exports.clean, exports.client, exports.webapp);
+
+exports.default = gulp.series(exports.clean, exports.client);

package.json

@@ -17,12 +17,14 @@
     "gulp-concat": "^2.6.1",
     "gulp-template": "^5.0.0",
     "gulp-uglify": "^3.0.0",
+    "gulp-webserver": "^0.9.1",
     "plugin-error": "^0.1.2",
     "progress": "^2.0.0",
     "promise-streams": "^2.1.1",
     "tar": "^4.2.0",
     "tmp-file": "^2.0.1",
     "unzip-stream": "^0.2.1",
+    "vinyl-fs": "^3.0.1",
     "yargs": "^10.0.3"
   }
 }

project.xml

@@ -9,7 +9,7 @@
   <haxelib name="openfl"/>
   <haxelib name="protohx"/>
   <haxelib name="haxework" version="git"/>
-  <window width="760" height="600"/>
+  <!--<window width="760" height="600"/>-->
   <haxeflag name="-D" value="swf-gpu"/>
   <haxeflag name="-D" value="native-trace"/>
   <!--<haxeflag name="-D" value="proto_debug"/>-->

src/client/html/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Tank'z</title>
+    <% scripts.forEach(function(script) { %>
+    <script type="text/javascript" src="<%-script%>"></script>
+    <% }); %>
+    <style type="text/css">
+        html, body, #container {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <div id="container"></div>
+    <script type="text/javascript">
+        new Swf(
+            document.getElementById('container'),
+            '<%-swf%>',
+        );
+    </script>
+</body>
+</html>

src/client/html/js/swf.js

@@ -1,15 +1,3 @@
-const typeOf = (item) => {
-    if (item == null) return "null";
-    if (item.nodeName) {
-        if (item.nodeType == 1) return "element";
-        if (item.nodeType == 3) return (/\S/).test(item.nodeValue) ? "textnode" : "whitespace";
-    } else if (typeof item.length == "number") {
-        if (item.callee) return "arguments";
-    }
-    return typeof item;
-};
-
-
 class Swf {
 
     constructor(element, swf, options) {
@@ -50,7 +38,7 @@ class Swf {
             var value = object[key];
             if (base) key = base + ":" + key;
             var result;
-            switch (typeOf(value)) {
+            switch (typeof value) {
                 case "object":
                     result = this.toFlashVars(value, key);
                     break;

src/webapp/index.html

@@ -3,26 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <title>Tank'z</title>
-    <% scripts.forEach(function(script) { %>
-    <script type="text/javascript" src="<%-script%>"></script>
-    <% }); %>
     <style type="text/css">
-        html, body, #container {
+        html, body {
             width: 100%;
             height: 100%;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
+        ul {
+            position: absolute;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+        }
+        ul > li {
+            display: inline-block;
+        }
     </style>
 </head>
 <body>
-    <div id="container"></div>
+<div>
-    <script type="text/javascript">
+    <ul>
-        new Swf(
+        <li onclick="content.src='flash/index.html'"><button>Flash</button></li>
-            document.getElementById('container'),
+        <li onclick="content.src='html5/index.html'"><button>Html5</button></li>
-            '<%-swf%>',
+    </ul>
-        );
+</div>
-    </script>
+<iframe id="content" frameborder="0" width="100%" height="100%" src="flash/index.html"></iframe>
 </body>
 </html>

tasks/haxe.js

@@ -1,3 +1,4 @@
+const os = require('os');
 const fs = require('fs');
 const path = require('path');
 const tmp = require('tmp-file');
@@ -9,6 +10,7 @@ const Vinyl = require('vinyl');
 const PluginError = require('plugin-error');
 const colors = require('ansi-colors');
 const log = require('fancy-log');
+const vfs = require('vinyl-fs');
 
 
 class Haxe extends Sdk {
@@ -136,7 +138,7 @@ class Haxe extends Sdk {
         };
 
         const endStream = (callback) => {
-            log(this.tag, colors.cyan("openfl", params.command, params.platform), '=>', colors.magenta(params.outputFile));
+            log(this.tag, colors.cyan(`openfl ${params.command} ${params.platform}`));
             const args = ['-cwd', files[0].path, 'run', 'openfl', params.command, params.platform];
             if (params.values) for (let key of Object.keys(params.values)) {
                 const value = params.values[key];
@@ -146,11 +148,11 @@ class Haxe extends Sdk {
                     args.push(`-D${key}="${value}"`);
                 }
             }
-            const tmpFile = tmp.generateFile();
+            const buildDir = path.join(os.tmpdir(), 'build');
-            const dir = path.dirname(tmpFile.path);
+            args.push(`--app-path=${buildDir}`);
-            const name = path.basename(tmpFile.path);
+            if (params.outputFile) {
-            args.push(`--app-path=${dir}`);
+                args.push(`--app-file=${params.outputFile}`);
-            args.push(`--app-file=${name}`);
+            }
             if (params.version) args.push(`--meta-version=${params.version}`);
             //if (params.build) args.push(`--haxedef=BUILD="${params.build}"`);
             args.push(`--haxeflag="--macro CompilationOption.set('build','${params.build}')"`);
@@ -166,14 +168,19 @@ class Haxe extends Sdk {
             }
             //console.log('haxelib', args.join(' '));
             this.haxelib(args).then(() => {
-                const out = new Vinyl({
+                const result = {
-                    path: params.outputFile,
+                    'flash': `${buildDir}/flash/bin/*.swf`,
-                    //contents: fs.createReadStream(`${dir}/flash/bin/${name}.swf`),
+                    'html5': `${buildDir}/html5/bin/**/*`,
-                    contents: fs.readFileSync(`${dir}/flash/bin/${name}.swf`),
+                }[params.platform];
-                });
+                vfs.src(result).pipe(through.obj((file, enc, cb) => {
-                out.debug = debug;
+                    file.debug = debug;
-                stream.push(out);
+                    stream.push(file);
-                callback();
+                    cb();
+                }, (cb) => {
+                    callback();
+                    cb();
+                }));
+                //callback();
             }).catch((error) => {
                 stream.emit('error', new PluginError({plugin: this.name, message: error}));
                 callback();