can-compile

Compile CanJS Mustache and EJS views for lightning fast production apps

npm install can-compile
5 downloads in the last day
72 downloads in the last week
417 downloads in the last month

can-compile

Build Status

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

With NodeJS installed, just run NPM:

npm install can-compile -g

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 using CanJS version 1.1.2, write it to views.production.js:

can-compile todo.ejs --can 1.1.2

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. Just npm install can-compile in you project folder (or add it as a development dependency). 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({
    cancompile: {
      dist: {
        src: ['**/*.ejs', '**/*.mustache'],
        out: 'production/views.production.js',
        wrapper: '!function() { {{{content}}} }();',
        tags: ['editor', 'my-component']
      },
      legacy: {
        src: ['**/*.ejs', '**/*.mustache'],
        out: 'production/views.production.js',
        version: '1.1.2'
      }
    },
    concat: {
      dist: {
        src: [
          '../resources/js/can.jquery.js',
          '../resources/js/can.view.mustache.js',
          'js/app.js', // You app
          '<%= cancompile.dist.out %>' // The compiled views
        ],
        dest: 'production/production.js'
      }
    },
    uglify: {
      dist: {
        files: {
          'production/production.min.js': ['<%= concat.dist.dest %>']
        }
      }
    }
  });

  // Default task.
  grunt.registerTask('default', ['cancompile', 'concat', 'uglify']);

  grunt.loadNpmTasks('can-compile');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
};

Gulp task

It is also quite easy to get this up and running with your production build using Gulp. By placing the following example in your gulpfile.js, all mustache templates in the client/app directory will be compiled into a file at public/assets/views.production.js.


var gulp = require('gulp'),
    compilerGulp = require('can-compile/gulp.js');

var options = {
  src: ['client/app/**/*.mustache'],
  out: 'public/assets/views.production.js',
  tags: ['editor', 'my-component']
};

// Creates a task called 'app-views'.  Must pass in same gulp instance.
compilerGulp.task('app-views', options, gulp);
// Creates a task called 'app-views-watch'. Optional, but convenient.
compilerGulp.watch('app-views', options, gulp);

// The default task (called when you run `gulp` from cli)
gulp.task('default', [
    'app-views',
    'app-views-watch'
]);

You'll need gulp installed globally and locally:

sudo npm install gulp -g
npm install gulp

And a local copy of can-compile

npm install can-compile

Run gulp in the command line to build.

Programmatically

You can compile individual files directly like this:

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

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

Passing an object as the first parameter allows you the following configuration options:

  • filename {String}: The name of the file to be compiled
  • version {String} (default: latest): The CanJS version to be used
  • log {Function}: A logger function (e..g console.log.bind(console))
  • normalizer {Function}: A Function that returns the normalized path name
  • tags {Array}: A list of all your can.Component tags. They need to be registered in order to pre-compile views properly.
compiler.compile({
  filename: 'file.ejs',
  log: console.log.bind(console),
  normalizer: function(filename) {
    return path.relative(__dirname, filename);
  },
  version: '1.1.6'
}, function(error, output) {
  output // -> compiled `file.ejs`
});

Loading with RequireJS

To use your pre-compile views with RequireJS just add a custom wrapper in the options that uses the AMD definition to load can/view/mustache and/or can/view/ejs (depending on what you are using). In a Grunt task:

module.exports = function (grunt) {
  // Project configuration.
  grunt.initConfig({
    cancompile: {
      dist: {
        src: ['**/*.mustache'],
        out: 'production/views.production.js',
        wrapper: 'define(["can/view/mustache"], function(can) { {{{content}}} });'
      }
    }
  });
}

To load the generated files only when running the RequireJS optimizer r.js define an empty module in development like:

define('views', function() {});

And require('views'); in your main application file.

When running the optimizer map this module to the production build file:

paths: {
  views: 'views.production'
}

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

Changelog

0.6.0:

0.5.0:

  • Merged #11: Implement can.Component/tag-support

0.4.1:

  • Merged #10: Allow for setting a custom normalizer

0.4.0:

  • Verify CanJS 2.0.0 compatbility, load can.EJS which isn't in the core anymore

0.3.2:

  • Custom wrapper option uses Handlebars because Underscore templates are useless in Grunt files

0.3.1:

0.3.0:

  • Allows compilation for different CanJS versions

0.2.1:

  • Switched to plain JSDom
  • Update to CanJS 1.1.5
  • Verified Node 0.10 compatibility

0.2.0:

  • Grunt 0.4.0 compatibility
  • Added Travis CI

0.1.0:

  • Initial release
npm loves you