Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
can-compile
Advanced tools
Compile CanJS Mustache and EJS views for lightning fast production apps
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
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
using version 2.1.0:
can-compile --out views.combined.js --can 2.1.0
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 --can 2.0.0
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: {
options: {
version: '2.1.1'
},
dist: {
options: {
wrapper: '!function() { {{{content}}} }();',
tags: ['editor', 'my-component']
},
src: ['**/*.ejs', '**/*.mustache'],
dest: 'production/views.production.js'
},
legacy: {
src: ['**/*.ejs', '**/*.mustache'],
dest: 'production/views.production.js',
options: {
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.dest %>' // 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');
};
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');
var compilerGulp = require('can-compile/gulp.js');
var options = {
version: '2.2.7'
};
gulp.task("app-views", function () {
return gulp.src('client/app/**/*.mustache')
.pipe( compilerGulp('views.production.js', options) )
.pipe( gulp.dest('public/assets') );
});
Or you can use available helpers to create your task and watch your files:
var gulp = require('gulp');
var compilerGulp = require('can-compile/gulp.js');
var options = {
version: '2.2.7',
src: ['client/app/**/*.mustache'],
out: 'public/assets/views.production.js',
tags: ['editor', 'my-component']
};
// Creates a task called 'app-views'.
// You must pass in the same gulp instance.
// You may also pass optional task dependencies (ex. 'clean')
compilerGulp.task('app-views', options, gulp, ['clean']);
// 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.
You can compile individual files directly like this:
var compiler = require('can-compile');
var options = {
filename: 'file.ejs',
version: '2.0.1'
};
compiler.compile(options, function(error, output) {
output // -> compiled `file.ejs`
});
The options object allows the following configuration options:
filename
{String}: The name of the file to be compiledversion
{String}: The CanJS version to be usedlog
{Function}: A logger function (e..g console.log.bind(console)
)normalizer
{Function}: A Function that returns the normalized path nametags
{Array}: A list of all your can.Component tags. They need to be registered in order to pre-compile views properly.extensions
{Object}: An object to map custom file extensions to the standard extension (e.g. { 'mst' : 'mustache' }
)viewAttributes
{Array}: A list of attribute names (RegExp or String), used for additional behavior for an attribute in a view (can.view.attr)paths
an object with ejs
, mustache
or stache
and a jquery
property pointing to files of existing versions or CanJS and jQuery instead of the CDN links.compiler.compile({
filename: 'file.ejs',
log: console.log.bind(console),
normalizer: function(filename) {
return path.relative(__dirname, filename);
},
version: '2.0.7'
}, function(error, output) {
output // -> compiled `file.ejs`
});
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:
Mustache:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
options: {
wrapper: 'define(["can/view/mustache"], function(can) { {{{content}}} });'
},
cancompile: {
dist: {
src: ['**/*.mustache', '!node_modules/**/*.mustache'],
dest: 'production/views.production.js',
}
}
});
}
Stache:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
options: {
wrapper: 'define(["can", "can/view/stache"], function(can) { {{{content}}} });'
},
cancompile: {
dist: {
src: ['**/*.stache', '!node_modules/**/*.stache'],
dest: 'production/views.production.js',
}
}
});
}
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'
}
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 --can 2.0.0
0.10.0:
0.9.0:
0.8.0:
0.7.1:
0.7.0:
version
flag mandatory (caused unexpected behaviour after CanJS updates)0.6.0:
0.5.0:
0.4.1:
0.4.0:
0.3.2:
wrapper
option uses Handlebars because Underscore templates are useless in Grunt files0.3.1:
wrapper
option (uses _.template).0.3.0:
0.2.1:
0.2.0:
0.1.0:
Copyright (C) 2014 David Luecke daff@neyeon.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
FAQs
Compile CanJS Mustache and EJS views for lightning fast production apps
The npm package can-compile receives a total of 21 weekly downloads. As such, can-compile popularity was classified as not popular.
We found that can-compile demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.