[build] added html5 task

2018-01-09 22:22:03 +03:00
parent d3294a04f5
commit 729798bc25
9 changed files with 145 additions and 95 deletions
--- a/build/client.js
+++ b/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(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()));
--- a/build/webapp.js
+++ b/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());
--- a/gulpfile.js
+++ b/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);
--- a/package.json
+++ b/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"
  }
 }
--- a/project.xml
+++ b/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"/>-->
--- a/src/client/html/index.html
+++ b/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>
--- a/src/client/html/js/swf.js
+++ b/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;
--- a/src/webapp/index.html
+++ b/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>
-    <script type="text/javascript">
-        new Swf(
-            document.getElementById('container'),
-            '<%-swf%>',
-        );
-    </script>
+<div>
+    <ul>
+        <li onclick="content.src='flash/index.html'"><button>Flash</button></li>
+        <li onclick="content.src='html5/index.html'"><button>Html5</button></li>
+    </ul>
+</div>
+<iframe id="content" frameborder="0" width="100%" height="100%" src="flash/index.html"></iframe>
 </body>
 </html>
--- a/tasks/haxe.js
+++ b/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 dir = path.dirname(tmpFile.path);
-            const name = path.basename(tmpFile.path);
-            args.push(`--app-path=${dir}`);
-            args.push(`--app-file=${name}`);
+            const buildDir = path.join(os.tmpdir(), 'build');
+            args.push(`--app-path=${buildDir}`);
+            if (params.outputFile) {
+                args.push(`--app-file=${params.outputFile}`);
+            }
            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({
-                    path: params.outputFile,
-                    //contents: fs.createReadStream(`${dir}/flash/bin/${name}.swf`),
-                    contents: fs.readFileSync(`${dir}/flash/bin/${name}.swf`),
-                });
-                out.debug = debug;
-                stream.push(out);
+                const result = {
+                    'flash': `${buildDir}/flash/bin/*.swf`,
+                    'html5': `${buildDir}/html5/bin/**/*`,
+                }[params.platform];
+                vfs.src(result).pipe(through.obj((file, enc, cb) => {
+                    file.debug = debug;
+                    stream.push(file);
+                    cb();
+                }, (cb) => {
                    callback();
+                    cb();
+                }));
+                //callback();
            }).catch((error) => {
                stream.emit('error', new PluginError({plugin: this.name, message: error}));
                callback();