Skip to content

Instantly share code, notes, and snippets.

@krusynth
Last active April 28, 2019 02:05
Show Gist options
  • Save krusynth/473ea15b8ba64724c715988126597d54 to your computer and use it in GitHub Desktop.
Save krusynth/473ea15b8ba64724c715988126597d54 to your computer and use it in GitHub Desktop.
RPG Maker MV JavaScript bundling via Gulp
'use strict'
const gulp = require('gulp');
const imageResize = require('gulp-image-resize');
const path = require('path');
const del = require('del');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify-es').default;
const replace = require('gulp-replace');
const clean = require('gulp-clean');
const paths = {
src: 'img-16/',
dist: 'img/'
};
function processImages(files) {
files.pipe(imageResize({
height: '300%',
width: '300%',
upscale: true
}))
.pipe(gulp.dest(paths.dist));
}
gulp.task('image-resize', done => {
processImages(gulp.src(`${paths.src}**/*.png`));
done();
});
gulp.task('watch-images', done => {
let watcher = gulp.watch('img-16/**/*.png', gulp.series(['image-resize']));
watcher.on('unlink', file => {
let filePathFromSrc = path.relative(path.resolve(paths.src), file);
let destFilePath = path.resolve(paths.dist, filePathFromSrc);
del.sync(destFilePath);
});
});
gulp.task('package', function () {
gulp.src('dist', {read: false})
.pipe(clean());
let time = Buffer.from([Date.now()]).toString('base64').replace(/==$/, '');
let name = 'bundle.' + time + '.js';
gulp.src([
'js/libs/pixi.js',
'js/libs/pixi-tilemap.js',
'js/libs/pixi-picture.js',
'js/libs/fpsmeter.js',
'js/libs/lz-string.js',
'js/rpg_core.js',
'js/rpg_managers.js',
'js/rpg_objects.js',
'js/rpg_scenes.js',
'js/rpg_sprites.js',
'js/rpg_windows.js',
'js/plugins.js',
'js/main.js'
])
.pipe(concat(name))
.pipe(uglify())
.pipe(gulp.dest('dist'));
return gulp.src('index.html', {base: './'})
.pipe(replace(/bundle\.([a-zA-Z0-9]+)\.js/g, name))
.pipe(gulp.dest('./'));
});
{
"name": "Your Game",
"main": "index.html",
"js-flags": "--expose-gc",
"window": {
"title": "",
"toolbar": false,
"width": 816,
"height": 624,
"icon": "icon/icon.png"
},
"version": "1.0.0",
"scripts": {
"start": "./node_modules/.bin/http-server -p 8000 -a 0.0.0.0",
"test": "echo \"Error: no test specified\" && exit 1",
"package": "./node_modules/.bin/gulp package",
"image-resize": "./node_modules/.bin/gulp image-resize",
"watch-images": "./node_modules/.bin/gulp watch-images"
},
"author": "krues8dr",
"license": "UNLICENSED",
"description": "",
"devDependencies": {
"del": "^3.0.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean": "^0.4.0",
"gulp-concat": "^2.6.1",
"gulp-dest": "^0.2.3",
"gulp-image-resize": "^0.13.0",
"gulp-replace": "^1.0.0",
"gulp-uglify-es": "^1.0.4",
"http-server": "^0.11.1",
"napa": "^3.0.0"
},
"dependencies": {}
}
@krusynth
Copy link
Author

krusynth commented Apr 28, 2019

Installation

  1. yarn install or npm install
  2. Replace the generated index.html with the content below:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="user-scalable=no">
  <link rel="icon" href="icon/icon.png" type="image/png">
  <link rel="apple-touch-icon" href="icon/icon.png">
  <link rel="stylesheet" type="text/css" href="fonts/gamefont.css">
  <title>Your Game Name</title>
</head>
<body style="background-color: black;">
  <script type="text/javascript" src="dist/bundle.QQ.js"></script>
</body>
</html>

Usage

npm run package – creates the bundled JavaScript file in the dist directory.

@krusynth
Copy link
Author

krusynth commented Apr 28, 2019

TODO

  • Bundle plugins - right now, only core libraries are bundled.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment