can-compile

can-compile

NodeJS module that compiles CanJS EJS and Mustache views into a single JavaScript file for lightning fast production apps.

Command line

The can-compile command line tool takes a list of files (by default all *.ejs and *.mustache files in the current folder) or a list of filename patterns and writes the compiled views into an out file (default: views.production.js).

Examples:

Compile all EJS and Mustache files in the current folder and write them to views.combined.js:

can-compile --out views.combined.js

Compile todo.ejs, write it to views.production.js:

can-compile todo.ejs

Compile all EJS files in the current directory and all subdirectories and mustache/test.mustache. Write the result to views.combined.js:

can-compile **/*.ejs mustache/test.mustache --out views.combined.js

Grunt task

can-compile also comes with a Grunt task so you can easily make it part of your production build. The following example shows a Gruntfile that compiles all Mustache views and then builds a concatenated and minified production.js of a CanJS application:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    meta: {
      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
        '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
        ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
    },
    cancompile : {
      dist : {
        // Compile all mustache files
        src : '**/*.mustache',
        // Save to views.production.js
        out : 'views.production.js'
      }
    },
    concat: {
      dist: {
        src: [
          '<banner:meta.banner>', // Banner
          'can.jquery.js' // CanJS jQuery ditributable
          '<config:cancompile.dist.src>', // The compiled views
          'app.js' // Your CanJS application file
        ],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    min: {
      dist: {
        src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
        dest: 'dist/<%= pkg.name %>.min.js'
      }
    }
  });

  // Default task.
  grunt.registerTask('default', 'cancompile concat min');

};

Programmatically

You can compie files directly like this:

var compiler = require('can-compile');

compiler.compile('file.ejs', function(error, output) {
  output // -> compiled `file.ejs`
});

Note

Always make sure that the output file is in the same folder as the root level for the views that are being loaded. So if your CanJS applications HTML file is in the app folder within the current directory use a filename within that folder as the output file:

can-compile --out app/views.production.js