How to TypeScript + Babylon + Gulp + Sublime Text
-
Open Sublime Text, install Package Control (if you don’t have it already):
-
Install the official TypeScript package by pressing Ctrl+Shift+P, type Install, select “Package Control: Install”, select the TypeScript package.
-
Copy babylon.d.ts from the Babylon.js project folder into the same folder as your code.
-
Create a tsconfig.json file in the same directory as your typescript files. Here is mine:
{
"files": [
"babylon.2.5.d.ts",
"game.ts"
]
}-
Techemon has an example of a TypeScript game, you can see his folder layout and an example game written in TypeScript.
-
In Sublime Text, Ctrl+B will build your TypeScript file.
-
Here is a basic gulpfile.js that you can use to build a development build, or a distribution build:
'use strict';
var gulp = require('gulp');
var gsync = require('gulp-sync')(gulp); // easier synchronous tasks
var ts = require("gulp-typescript");
var clean = require('gulp-clean'); // safer cleaning
var pump = require('pump'); // preserve error handling messages in streams
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var paths = {
html: ['src/html/index.html'],
libs: ['src/libs/babylon.2.5.js'],
ts: [
'src/ts/babylon.2.5.d.ts',
'src/ts/sandbox.ts'],
distClean: ['dist'],
devClean: ['dev'],
};
gulp.task('copy-html', function () {
return gulp.src(paths.html)
.pipe(gulp.dest("dist"))
.pipe(gulp.dest("dev"));
});
gulp.task('copy-libs', function () {
return gulp.src(paths.libs)
.pipe(gulp.dest("dist/js/"))
.pipe(gulp.dest("dev/js/"));
});
gulp.task('clean-dist', function () {
return gulp.src(paths.distClean, {read: false})
.pipe(clean());
});
gulp.task('clean-dev', function () {
return gulp.src(paths.devClean, {read: false})
.pipe(clean());
});
gulp.task('build-dist', ['copy-html', 'copy-libs'], function (cb) {
pump([
gulp.src(paths.ts),
ts({
//noImplicitAny: true,
module: 'amd',
target: 'es5',
declaration: false,
sourceMap: false,
removeComments: true,
//out: 'output.js'
}),
uglify(),
concat('s6.js'),
gulp.dest('dist/js')
],
cb
);
});
gulp.task('build-dev', ['copy-html', 'copy-libs'], function (cb) {
pump([
gulp.src(paths.ts),
ts({
//noImplicitAny: true,
module: 'amd',
target: 'es5',
declaration: false,
sourceMap: true,
removeComments: false,
//out: 'out.js'
}),
sourcemaps.init({loadMaps: true}),
// add transform tasks to the pipeline here
//.on('error', gutil.log),
concat('s6.js'),
sourcemaps.write(),
gulp.dest('dev/js')
],
cb
);
});
gulp.task('dist', gsync.sync(['clean-dist', ['build-dist']]));
gulp.task('dev', gsync.sync(['clean-dev', ['build-dev']]));
gulp.task('default', ['dev']);Here is my package.json for this gulpfile:
{
"dependencies": {
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-sync": "^0.1.4",
"gulp-typescript": "^3.1.5",
"gulp-uglify": "^2.0.1",
"pump": "^1.0.2",
"typescript": "2.1.4"
}
}NOTICE that I specifed the exact version number of the typescript package, as the latest version at the time of writing this has a bug that prevents compiling the latest version of babylon.js.
