Minify-ing custom babylon.max.js

I am using a slightly modified version of babylon.max.js for my project, but want to use the mini-fied babylon.js as recommended.

I have tried following the instructions using gulp, but as far as I can tell, this is generating the babylon.max.js file, not merely using it to create the minified version.

Is there a way to accomplish this?

Welcome aboard!

I guess the instructions at Babylon.js/Tools/Gulp at master · BabylonJS/Babylon.js · GitHub should work.

If installing the repo by following the instructions here and doing a gulp typescript in the Tool/Gulp directory will produce the max/minified version of Babylon in dist/preview release/. Note that the minified version of Babylon is not named Babylon.min.js, it is simply Babylon.js (whereas the max version is Babylon.max.js).


Thanks Evgeni, I had not come across those instructions before, they were really helpful.

Regarding the following section:

Edit Code
Once the test task (npm run start) has been launched, any saved changes in the Typescript or shader files will automatically rebuild the associated Javascript files. Simply refresh your browser to see the changes in effect and begin to debug your new code.

Am I right in thinking that the babylon.max.js file is generated from a Typescript file somewhere, and that if I edit this file, it will update my babylon.max.js and babylon.js files?

No, what you linked to refer to the fact you can change a .ts file (in VSCode for eg) and the changes will be immediately visible in the browser if you are browsing the page you changed (after you refresh the page). This happens in memory and is handled by the webpack server (I think), no .js files are generated on disk (or maybe in a .temp/ directory but it should not matter to you).

The generation of the packages (maxified/minifed) must be done explicitely by issueing a gulp typescript or similar command as this takes a little time.

1 Like

Ahhh, I see, thanks for clearing that up.

I guess my issue is then that I have an edited babylon.max.js file, which I want to deploy, but when I use gulp typescript-libraries it overwrites my file. I expected it to use my file to generate the mini-fied babylon.js.

Is my solution then to manually edit the babylon.js file that I want to deploy?

You could of course use a ‘minifier’ on your babylon.max.js. You can find several on the web though I would not know what to recommend.

The alternative, as @Evgeni_Popov suggested, is to modify the appropriate .ts files and use gulp to generate your versions or both babylon.max.js and the minified version babylon.js


I think applying the minification process is one of the step that occurs during a gulp command but I don’t know how it works, maybe @sebavan could help.

Also, you could simply use a js minification tool, I think you can find a lot by searching with Google.


Yup our webpack process called via gulp takes car of bundling with webpack both a min and max version of babylon. It internally relies on the webpack terser plugin.

1 Like