-
Notifications
You must be signed in to change notification settings - Fork 5
/
gulpfile.js
288 lines (251 loc) · 9.57 KB
/
gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
// -----------------------------------------------------------------------------
// Imports
// -----------------------------------------------------------------------------
const advpng = require('imagemin-advpng');
const chalk = require('chalk');
const childProcess = require('child_process');
const fs = require('fs');
const gulp = require('gulp');
const log = require('fancy-log');
const rollup = require('rollup');
const AsepriteCli = require('./tools/aseprite-cli');
const ImageDataParser = require('./tools/image-data-parser');
const MapDataParser = require('./tools/map-data-parser');
// -----------------------------------------------------------------------------
// Gulp Plugins
// -----------------------------------------------------------------------------
const advzip = require('gulp-advzip');
const concat = require('gulp-concat');
const cleancss = require('gulp-clean-css');
const htmlmin = require('gulp-htmlmin');
const imagemin = require('gulp-imagemin');
const rename = require('gulp-rename');
const size = require('gulp-size');
const sourcemaps = require('gulp-sourcemaps');
const template = require('gulp-template');
const terser = require('gulp-terser');
const zip = require('gulp-zip');
// -----------------------------------------------------------------------------
// Flags
// -----------------------------------------------------------------------------
let watching = false;
let fast = process.argv.includes('--fast');
// -----------------------------------------------------------------------------
// JS Build
// -----------------------------------------------------------------------------
async function compileBuild() {
try {
const bundle = await rollup.rollup({
input: 'src/js/index.js',
onwarn: (warning, rollupWarn) => {
// Suppress circular dependency spam.
if (warning.code !== 'CIRCULAR_DEPENDENCY') {
rollupWarn(warning);
}
}
});
await bundle.write({
file: 'dist/temp/app.js',
format: 'iife',
name: 'app'
});
} catch (error) {
// Use rollup's error output
require('rollup/dist/shared/loadConfigFile').handleError(error, true);
throw error;
}
}
function minifyBuild() {
// Fast Mode Shortcut
if (fast) return Promise.resolve();
let cache = {};
return gulp.src('dist/temp/app.js')
//.pipe(sourcemaps.init())
// Phase 1: Mangle all props except DOM & built-ins. (Reserved props are built-ins
// that terser doesn't know about yet, but which will break the game if they get mangled.)
.pipe(terser({
toplevel: true,
nameCache: cache,
mangle: {
properties: {
reserved: [
'imageSmoothingEnabled',
'KeyW',
'KeyA',
'KeyS',
'KeyD',
'ArrowUp',
'ArrowLeft',
'ArrowDown',
'ArrowRight',
'Escape',
'OS13kMusic,Wizard with a Shotgun - Oblique Mystique'
]
}
}
}))
// Phase 2: Specifically target properties we know match builtins but that
// we can still safely mangle (because we don't refer to the builtin).
.pipe(terser({
nameCache: cache,
mangle: {
properties: {
builtins: true,
regex: /^(behavior|direction|frame|reset|update|anchor|DEAD|canvas|entities|history|pressed|page|paused|resize|reload|pages|pattern|pause|unpause|sheet|state|init|play|text)$/
}
}
}))
//.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/temp'));
}
const buildJs = gulp.series(compileBuild, minifyBuild);
// -----------------------------------------------------------------------------
// CSS Build
// -----------------------------------------------------------------------------
function buildCss() {
return gulp.src('src/css/*.css')
.pipe(concat('app.css'))
.pipe(cleancss())
.pipe(gulp.dest('dist/temp'));
}
// -----------------------------------------------------------------------------
// Assets Build
// -----------------------------------------------------------------------------
async function exportSpriteSheet() {
// Exporting the sprite sheet is the first step - using Aseprite, we take as input
// all of our source aseprite files, and spit out a single spritesheet PNG and a JSON
// file containing the x/y/w/h coordinates of the sprites in the spritesheet.
let src = 'src/assets/*.aseprite';
let png = 'src/assets/spritesheet-gen.png';
let data = 'src/assets/spritesheet-gen.json';
try {
await AsepriteCli.exec(`--batch ${src} --sheet-type rows --sheet ${png} --data ${data} --format json-array`);
} catch (e) {
log.error(e);
log.warn(chalk.red('Failed to update sprite sheet, but building anyway...'));
}
}
async function generateSpriteSheetData() {
// After exporting the sprite sheet, we use the JSON data to update a source file used by
// our asset loader in the game. This way we can freely update images without ever
// hand-edting any coordinate data or worrying about the composition of the spritesheet.
let data = 'src/assets/spritesheet-gen.json';
let image = 'dist/temp/sprites.png';
let output = 'src/js/SpriteSheet-gen.js';
await ImageDataParser.parse(data, image, output);
}
function copyAssets() {
let pipeline = gulp.src('src/assets/spritesheet-gen.png')
.pipe(size({ title: 'spritesheet pre' }));
// Fast Mode Shortcut
if (!fast) {
pipeline = pipeline
.pipe(imagemin())
.pipe(imagemin([
advpng({ optimizationLevel: 4, iterations: 20 })
]));
}
return pipeline
.pipe(size({ title: 'spritesheet post' }))
.pipe(rename('sprites.png'))
.pipe(gulp.dest('dist/temp'));
}
async function pngoutAssets() {
// This step relies on a new tool "pngout", comment out if not available.
// This saves me an extra 20 bytes on the spritesheet.
childProcess.execSync('pngout dist/temp/sprites.png');
}
async function generateMapData() {
let data = 'src/maps/map.aseprite';
let output = 'src/js/Map-gen.js';
await MapDataParser.parse(data, output);
}
function copyFinalSprites() {
return gulp.src('dist/temp/sprites.png')
.pipe(gulp.dest('dist/final'));
}
const buildAssets = gulp.series(
exportSpriteSheet,
copyAssets,
pngoutAssets,
generateSpriteSheetData,
generateMapData,
copyFinalSprites
);
// -----------------------------------------------------------------------------
// HTML Build
// -----------------------------------------------------------------------------
function buildHtml() {
const cssContent = fs.readFileSync('dist/temp/app.css');
const jsContent = fs.readFileSync('dist/temp/app.js');
return gulp.src('src/index.html')
.pipe(template({ css: cssContent, js: jsContent }))
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.src('dist/temp/app.js.map'))
.pipe(gulp.dest('dist/build'));
}
// -----------------------------------------------------------------------------
// ZIP Build
// -----------------------------------------------------------------------------
function buildZip() {
let s;
// Fast Mode Shortcut
if (fast) return Promise.resolve();
return gulp.src(['dist/build/*', '!dist/build/*.map'])
.pipe(size())
.pipe(zip('js13k-2020-wizard-with-a-shotgun.zip'))
.pipe(advzip({ optimizationLevel: 4, iterations: 200 }))
.pipe(s = size({ title: 'zip' }))
.pipe(gulp.dest('dist/final'))
.on('end', () => {
let remaining = (13 * 1024) - s.size;
if (remaining < 0) {
log.warn(chalk.red(`${-remaining} bytes over`));
} else {
log.info(chalk.green(`${remaining} bytes remaining`));
}
});
}
// -----------------------------------------------------------------------------
// Build
// -----------------------------------------------------------------------------
async function ready() {
if (watching) {
childProcess.exec('say OK');
}
}
const build = gulp.series(
buildAssets,
buildJs,
buildCss,
buildHtml,
ready,
buildZip
);
// -----------------------------------------------------------------------------
// Watch
// -----------------------------------------------------------------------------
function watch() {
watching = true;
// The watch task watches for any file changes in the src/ folder, _except_ for
// edits to generated files (called blah-gen by convention).
gulp.watch(['src/**', '!src/**/*-gen*'], build);
}
// -----------------------------------------------------------------------------
// Task List
// -----------------------------------------------------------------------------
module.exports = {
// Potentially useful subtasks
compileBuild,
minifyBuild,
// Core build steps
buildJs,
buildCss,
buildAssets,
buildHtml,
buildZip,
// Primary entry points
build,
watch,
default: gulp.series(build, watch)
};