From ecc12b2ef3b058ddd8bf9612afd7c9276f0386f9 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Tue, 14 Aug 2018 11:05:32 +0530 Subject: * removed unwanted dependencies * improved compression * Introduces Audio Player :sparkles: :fire: :racehorse: :snowflake: :gem: --- gulpfile.js | 52 ++++++++---- package-lock.json | 226 +++++++++++++++++++++++++++++++++++++++++++++++++- package.json | 7 +- src/js/AudioPlayer.js | 25 ++++++ src/js/Game.js | 21 ++--- 5 files changed, 292 insertions(+), 39 deletions(-) create mode 100644 src/js/AudioPlayer.js diff --git a/gulpfile.js b/gulpfile.js index 2fc8d42..f474ff0 100644 --- 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() @@ -34,23 +34,18 @@ gulp.task('reload', function () { browserSync.reload(); }); -gulp.task('delete_folders', function(){ - return del(['libs/','public/','temp/','dist/']).then(function(paths){ - console.log('Deleted Files & folders ',paths); +gulp.task('delete_folders', function () { + return del(['libs/', 'public/', 'temp/', 'dist/']).then(function (paths) { + console.log('Deleted Files & folders ', paths); }); }); -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 .src(libs) @@ -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 + }); }); diff --git a/package-lock.json b/package-lock.json index f500980..5a135fb 100644 --- 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", diff --git a/package.json b/package.json index 490f5eb..99a17cf 100644 --- 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" } } diff --git a/src/js/AudioPlayer.js b/src/js/AudioPlayer.js new file mode 100644 index 0000000..952f487 --- /dev/null +++ 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(); + + } +} \ No newline at end of file diff --git a/src/js/Game.js b/src/js/Game.js index 01b5356..a419496 100644 --- 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 -- cgit v1.2.3