Gulp and Pixi.js - ReferenceError: window is not defined

Question

I've recently switched to gulp and thought I'd try out pixi.js, I've been using the cdn of pixi but now I want pixi-timer to delay certain functions.

So I thought, why not start bundling all of it with gulp?

However I run into the following error:

ReferenceError: window is not defined

I thought that the newest versions of pixi.js supported gulp and even browserify, however it fails as soon as I try to require pixi.js.

Got any pointers?

My gulp file:

var gulp = require('gulp');
var concat = require('gulp-concat');
 var PIXI = require('pixi.js');
// var timer = require('pixi-timer');
var browserify = require('gulp-browserify');


gulp.task('game', function(){
    return gulp.src('interface/js/gamelogic/**/*.js')
    .pipe(concat('game.js'))
    .pipe(gulp.dest('Vamp.Website/Resources/'));
});

gulp.task('default', function(){
    gulp.watch('interface/js/gamelogic/**/*.js', ['game']);
});

Full error log:

D:\Stuff\Vamp\vamp\Vamp>gulp D:\Stuff\Vamp\vamp\Vamp\node_modules\pixi.js\src\polyfill\index.js:5 if(!window.ArrayBuffer){ ^

ReferenceError: window is not defined at Object. (D:\Stuff\Vamp\vamp\Vamp\node_modules\pixi.js\src\polyfill\index.js:5:5) at Module._compile (module.js:413:34) at Object.Module._extensions..js (module.js:422:10) at Module.load (module.js:357:32) at Function.Module._load (module.js:314:12) at Module.require (module.js:367:17) at require (internal/module.js:16:19) at Object. (D:\Stuff\Vamp\vamp\Vamp\node_modules\pixi.js\src\index.js:2:1) at Module._compile (module.js:413:34) at Object.Module._extensions..js (module.js:422:10)

D:\Stuff\Vamp\vamp\Vamp>

Sven Schoenung Sven Schoenung · Accepted Answer · 2016-09-19T15:00:36

You need to remove this line:

var PIXI = require('pixi.js');

Here you are requiring pixi.js during your gulp build. That's wrong for several reasons.

You are not actually doing anything with PIXI anywhere in your gulpfile. So why are you requiring it?
PixiJs is a WebGL renderer that's targeting browsers. Your gulp build runs in node.js which doesn't have a window object. That's why you're getting that error.
You want to bundle pixi.js and other files into a single game.js file. You don't need to require pixi.js for that. You just need to pass the path of your pixi.js installation to gulp.src() like this:

gulp.task('game', function(){
  return gulp.src([
    'node_modules/pixi.js/bin/pixi.js',
    'interface/js/gamelogic/**/*.js'
  ])
  .pipe(concat('game.js'))
  .pipe(gulp.dest('Vamp.Website/Resources/'));
});

Gulp and Pixi.js - ReferenceError: window is not defined

1 Answers