* removed unwanted dependencies

* improved compression * Introduces Audio Player ✨ 🔥 🐎 ❄️ 💎
2018-08-14 11:05:32 +05:30
parent e1f9fdc2c8
commit ecc12b2ef3
5 changed files with 292 additions and 39 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,24 +6,24 @@ const uglify = require('gulp-uglify');
 const zip = require('gulp-vinyl-zip').zip;
 const size = require('gulp-size');
 const runSequence = require('run-sequence');
-const rollup = require('rollup-stream');
+const rlup = require('rollup');
 const del = require('del');
+const babel = require('rollup-plugin-babel');
+const terser = require('rollup-plugin-terser');

-
-const source = require('vinyl-source-stream');
 const libs = ['./node_modules/kontra/kontra.min.js', './node_modules/tinymusic/dist/TinyMusic.min.js'];
 const devLibs = ['./node_modules/jsfxr/jsfxr.js'];
 const libFolder = 'libs/';
 const outputTemp = 'temp/';

-gulp.task('serve', ['copylibs', 'copylibsDev', 'uglyfy_copy'], function () {
+gulp.task('serve', ['copylibs', 'copylibsDev', 'transpile'], function () {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

-    gulp.watch("src/js/**/*.js", { cwd: './' }, ['uglyfy_copy', 'reload'])
+    gulp.watch("src/js/**/*.js", { cwd: './' }, ['transpile', 'reload'])
    gulp.watch("./**/*.html", { cwd: './' }).on('change', browserSync.reload);

    browserSync.watch()
@@ -40,16 +40,11 @@ gulp.task('delete_folders', function(){
    });
 });

-gulp.task('uglyfy_copy', function () {
-    return rollup({
-        "format": "iife",
-        input: './src/js/main.js'
-    })
-    .pipe(source('main.js'))
-        .pipe(gulp.dest('public/js'));
+gulp.task('delete_map_files', function () {
+    return del(['temp/**/*.map']).then(function () {

    });
-
+});

 gulp.task('copylibs', function () {
    return gulp
@@ -81,5 +76,28 @@ gulp.task('prepare_dist_folder', function () {
 });

 gulp.task('release', function () {
-    runSequence('delete_folders','copylibs', 'copylibsDev', 'uglyfy_copy', 'prepare_dist_folder', 'zipFiles');
+    runSequence('delete_folders', 'copylibs', 'copylibsDev', 'transpile', 'prepare_dist_folder', 'delete_map_files', 'zipFiles');
+});
+
+gulp.task('transpile', async function () {
+
+    const bundle = await rlup.rollup({
+        input: './src/js/main.js',
+        output: {
+            format: 'iife'
+        },
+        plugins: [
+            babel({
+                exclude: 'node_modules/**'
+            }),
+            terser.terser()
+        ]
+    });
+
+    await bundle.write({
+        file: './public/js/main.js',
+        format: 'umd',
+        name: 'library',
+        sourcemap: true
+    });
 });
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,69 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-rc.1.tgz",
+      "integrity": "sha512-qhQo3GqwqMUv03SxxjcEkWtlkEDvFYrBKbJUn4Dtd9amC2cLkJ3me4iYUVSBbVXWbfbVRalEeVBHzX4aQYKnBg==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "7.0.0-rc.1"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-rc.1.tgz",
+      "integrity": "sha512-5PgPDV6F5s69XNznTcP0za3qH7qgBkr9DVQTXfZtpF+3iEyuIZB1Mjxu52F5CFxgzQUQJoBYHVxtH4Itdb5MgA==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.4.1",
+        "esutils": "2.0.2",
+        "js-tokens": "3.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.2"
+          }
+        },
+        "chalk": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.4.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.7.0.tgz",
+      "integrity": "sha512-dmYIvoQEZWnyQfgrwPCoxztv/93NYQGEiOoQhuI56rJahv9de6Q2apZl3bufV46YJ0OAXdaktIuw4RIRl4DTeA==",
+      "dev": true
+    },
    "accepts": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -3213,6 +3276,12 @@
          "integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=",
          "dev": true
        },
+        "rollup": {
+          "version": "0.54.1",
+          "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.54.1.tgz",
+          "integrity": "sha512-ebUUgUQ7K/sLn67CtO8Jj8H3RgKAoVWrpiJA7enOkwZPZzTCl8GC8CZ00g5jowjX80KgBmzs4Z1MV6cgglT86A==",
+          "dev": true
+        },
        "vinyl": {
          "version": "2.2.0",
          "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.0.tgz",
@@ -4590,6 +4659,15 @@
      "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=",
      "dev": true
    },
+    "magic-string": {
+      "version": "0.22.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
+      "integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==",
+      "dev": true,
+      "requires": {
+        "vlq": "0.2.3"
+      }
+    },
    "make-error": {
      "version": "1.3.4",
      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.4.tgz",
@@ -5557,10 +5635,14 @@
      }
    },
    "rollup": {
-      "version": "0.54.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.54.1.tgz",
-      "integrity": "sha512-ebUUgUQ7K/sLn67CtO8Jj8H3RgKAoVWrpiJA7enOkwZPZzTCl8GC8CZ00g5jowjX80KgBmzs4Z1MV6cgglT86A==",
-      "dev": true
+      "version": "0.64.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.64.1.tgz",
+      "integrity": "sha512-+ThdVXrvonJdOTzyybMBipP0uz605Z8AnzWVY3rf+cSGnLO7uNkJBlN+9jXqWOomkvumXfm/esmBpA5d53qm7g==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "@types/node": "10.7.0"
+      }
    },
    "rollup-plugin-babel": {
      "version": "3.0.7",
@@ -5571,12 +5653,142 @@
        "rollup-pluginutils": "1.5.2"
      }
    },
+    "rollup-plugin-commonjs": {
+      "version": "9.1.5",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.1.5.tgz",
+      "integrity": "sha512-Hy7KbvsSMNu6aCO2xabp8gBcWrTiS+EzfHkzWwZwMjrcAYuYfCLU7fP1nM4xM0FMye/13r8mzTkfb9AmDaZ1hQ==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "0.5.2",
+        "magic-string": "0.22.5",
+        "resolve": "1.8.1",
+        "rollup-pluginutils": "2.3.1"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+          "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "1.1.0"
+          }
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "braces": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+          "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+          "dev": true,
+          "requires": {
+            "expand-range": "1.8.2",
+            "preserve": "0.2.0",
+            "repeat-element": "1.1.2"
+          }
+        },
+        "estree-walker": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.5.2.tgz",
+          "integrity": "sha512-XpCnW/AE10ws/kDAs37cngSkvgIR8aN3G0MS85m7dUpuK2EREo9VJ00uvw6Dg/hXEpfsE1I1TvJOJr+Z+TL+ig==",
+          "dev": true
+        },
+        "expand-brackets": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+          "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+          "dev": true,
+          "requires": {
+            "is-posix-bracket": "0.1.1"
+          }
+        },
+        "extglob": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+          "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "1.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "1.1.6"
+          }
+        },
+        "micromatch": {
+          "version": "2.3.11",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+          "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "2.0.0",
+            "array-unique": "0.2.1",
+            "braces": "1.8.5",
+            "expand-brackets": "0.1.5",
+            "extglob": "0.3.2",
+            "filename-regex": "2.0.1",
+            "is-extglob": "1.0.0",
+            "is-glob": "2.0.1",
+            "kind-of": "3.2.2",
+            "normalize-path": "2.1.1",
+            "object.omit": "2.0.1",
+            "parse-glob": "3.0.4",
+            "regex-cache": "0.4.4"
+          }
+        },
+        "rollup-pluginutils": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.3.1.tgz",
+          "integrity": "sha512-JZS8aJMHEHhqmY2QVPMXwKP6lsD1ShkrcGYjhAIvqKKdXQyPHw/9NF0tl3On/xOJ4ACkxfeG7AF+chfCN1NpBg==",
+          "dev": true,
+          "requires": {
+            "estree-walker": "0.5.2",
+            "micromatch": "2.3.11"
+          }
+        }
+      }
+    },
    "rollup-plugin-hypothetical": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/rollup-plugin-hypothetical/-/rollup-plugin-hypothetical-2.1.0.tgz",
      "integrity": "sha512-MlxPQTkMtiRUtyhIJ7FpBvTzWtar8eFBA+V7/J6Deg9fSgIIHwL6bJKK1Wl1uWSWtOrWhOmtsMwb9F6aagP/Pg==",
      "dev": true
    },
+    "rollup-plugin-terser": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-1.0.1.tgz",
+      "integrity": "sha512-VC6chT7QnrV6JzdgkPE0hP/atRBxaa3CPbVXfZJ8nJLjcidSdWftOst098RasYRUTKxJWAgdaJN1+uiZM6iffA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.0.0-rc.1",
+        "terser": "3.8.1"
+      }
+    },
+    "rollup-plugin-uglify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-4.0.0.tgz",
+      "integrity": "sha512-f6W31EQLzxSEYfN3x6/lyljHqXSoCjXKcTsnwz3evQvHgU1+qTzU2SE0SIG7tbAvaCewp2UaZ5x3k6nYsxOP9A==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.0.0-rc.1",
+        "uglify-js": "3.4.7"
+      }
+    },
    "rollup-pluginutils": {
      "version": "1.5.2",
      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz",
@@ -6785,6 +6997,12 @@
        }
      }
    },
+    "vlq": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz",
+      "integrity": "sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==",
+      "dev": true
+    },
    "which": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -21,13 +21,12 @@
    "browser-sync": "^2.24.6",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
-    "gulp-rollup": "^2.16.2",
    "gulp-size": "^3.0.0",
    "gulp-uglify": "^3.0.1",
    "gulp-vinyl-zip": "^2.1.0",
+    "rollup": "^0.64.1",
    "rollup-plugin-babel": "^3.0.7",
-    "rollup-stream": "^1.24.1",
-    "run-sequence": "^2.2.1",
-    "vinyl-source-stream": "^2.0.0"
+    "rollup-plugin-terser": "^1.0.1",
+    "run-sequence": "^2.2.1"
  }
 }
--- a/src/js/AudioPlayer.js
+++ b/src/js/AudioPlayer.js
@@ -0,0 +1,25 @@
+export default class AudioPlayer{
+    constructor(){
+        this.audioPlayer = new Audio();
+        this.url =  window.URL || window.webkitURL;
+        this.soundURL = null;
+        this.attachEventListeners();
+    }
+
+    attachEventListeners(){
+        this.audioPlayer.addEventListener('error', (e)=> {
+            console.log("Error: " + e);
+          }, false);
+          this.audioPlayer.addEventListener('ended', (e)=> {
+            this.audioPlayer = null;
+            this.url.revokeObjectURL(this.soundURL);
+          }, false);
+    }
+
+    play(soundUrl){
+        this.soundURL = soundUrl;        
+        this.audioPlayer.src = this.soundURL;
+        this.audioPlayer.play();
+
+    }
+}
--- a/src/js/Game.js
+++ b/src/js/Game.js
@@ -1,9 +1,12 @@
+
+import AudioPlayer from "./AudioPlayer";
+
 export default class Game{
    constructor(){
-        this.url =  window.URL || window.webkitURL;
+       
        this.soundUrl = jsfxr([3,,0.3469,0.6652,0.2097,0.0671,,0.0916,,,,0.3062,0.8509,,,0.5633,0.0985,-0.0068,1,,,,,0.5]);
        this.player = new Audio();
-        this.player.on
+        console.log(kontra);
        this.init();
    }

@@ -16,7 +19,7 @@ export default class Game{
        let sprite = kontra.sprite({
            x: 100,        // starting x,y position of the sprite
            y: 80,
-            color: 'blue',  // fill color of the sprite rectangle
+            color: 'white',  // fill color of the sprite rectangle
            width: 20,     // width and height of the sprite rectangle
            height: 40,
            dx: 2          // move the sprite 2px to the right every frame
@@ -33,17 +36,7 @@ export default class Game{
              }
    
              if(kontra.keys.pressed('space')){
-
-                this.player.addEventListener('error', (e)=> {
-                  console.log("Error: " + player.error.code);
-                }, false);
-                this.player.addEventListener('ended', (e)=> {
-                  this.url.revokeObjectURL(this.soundURL);
-                }, false);
-                this.player.pause();
-                this.player.src = this.soundUrl;
-                let play = this.player.play();
-                console.log(play)
+                (new AudioPlayer()).play(this.soundUrl);
              }
            },
            render: ()=> {        // render the game state