Robert Mosolgo

To my knowledge, batman.js is not maintained. For that reason, I don't suggest that you use it for a new project!

Using Gulp.js to Build Batman.js Apps Without Rails

If the batman-rails gem isn’t an option, gulp.js is a good candidate for compiling batman.js apps for production.

To prepare your app for production, you need to:

  • compile your CoffeeScript files into a JavaScript file
  • preload your HTML into Batman.View.store.

These can both be accomplished with gulp.js tasks.

Setup

Let’s assume your batman.js project has the folder structure:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
my_app/
├── batman/
|   ├── my_app.coffee
|   ├── models/
|   |   └── my_model.coffee
|   ├── controllers/
|   |   └── my_models_controller.cofee
|   ├── views/
|   |   └── my_models/
|   |       └── my_models_show_view.coffee
|   └── html/
|       └── my_models/
|           ├── show.jade
|           └── index.jade
├── javascripts/
|   └── batman.js
└── Gulpfile.js

Notice that the html folder actually contains .jade files. We’ll use gulp.js to compile those, but you can skip that step if you’re using plain HTML.

Install gulp with npm install -g gulp. All gulp plugins required below must also be installed “by hand” with npm install <gulp-plugin>

Compiling your application code

Here’s a gulp.js task that takes the batman/ directory above and compiles it to one Javascript file, javascripts/application.js:

Gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');

// include top-level .coffee files (`my_app.coffee`) first:
var appSources = ["./batman/*.coffee", "./batman/*/*.coffee"]

gulp.task("build", function(){
  gulp.src(appSources)
    .pipe(concat("application.coffee")) // so CoffeeScript will compile all together
    .pipe(coffee())
    .pipe(concat("application.js"))
    .pipe(gulp.dest("./javascripts/"))
})

Now, you can run:

Gulpfile.js
1
gulp build

Preloading your templates

Batman.js’s fetch-html-as-needed approach is great for develoment, but not for production. Here’s a task that will load files from the html/ directory, convert them from jade to HTML, then inline them as JavaScript code that preloads the app with the HTML it needs.

Gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp');
var concat = require('gulp-concat');
var jade = require('gulp-jade');
var batmanTemplates = require("gulp-batman-templates")

gulp.task("html", function(){
  gulp.src(["./batman/html/**/*.jade"])
    .pipe(jade())
    .pipe(batmanTemplates())
    .pipe(concat('templates.js'))
    .pipe(gulp.dest("./javascripts/"))
})

Finishing Up

Let’s join the to javascript files together:

Gulpfile.js
1
2
3
4
5
gulp.task("finalize", function() {
  gulp.src(["./javascripts/application.js", "./javascripts/templates.js"])
    .pipe(concat("application.js"))
    .pipe(gulp.dest("./javascripts/"))
});

And make our default gulp task to watch the project and build whenever it changes:

Gulpfile.js
1
2
3
gulp.task('default', function(){
  gulp.watch('./batman/**/*', ["build", "html", "finalize"])
});

So now, all we need to do is:

Gulpfile.js
1
gulp

And in the layout:

1
2
  <script src='/javascripts/batman.js'></script>
  <script src='/javascripts/application.js'></script>

Voila! Your app is compiled and HTML will be preloaded!