我使用can-compile NodeJS模块将CanJS EJS视图编译成单个JavaScript文件,用于我项目中的快速生产应用程序。 (我使用canjs,requirejs,ejs.js作为模板):
我按照这些说明设置了我的grunt任务https://github.com/daffl/can-compile
我的Gruntfile.js:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
cancompile: {
options: {
version: '1.1.8',
wrapper: 'define(["can/view/ejs"], function(can) { {{{content}}} });'
},
dist: {
src: ['**/*.ejs', '!node_modules/**/*.ejs', '!www-built/**/*.ejs'],
dest: 'www-built/js/views.production.js'
}
},
uglify: {
//configuracion uglify
options: {
mangle: false,
compress: {
drop_console: true
},
preserveComments : false
},
js: {
files: [{
cwd: 'www-built/js/', // ruta de nuestro javascript fuente
expand: false, // ingresar a las subcarpetas
src: 'views.production.js', // patrón relativo a cwd
dest: 'www-built/js/' // destino de los archivos compresos
}]
}
}
});
/*carichiamo i moduli*/
grunt.loadNpmTasks('can-compile');
grunt.loadNpmTasks('grunt-contrib-uglify');
/*registriamo il task*/
grunt.registerTask('default', ['cancompile']);
};
grunt任务工作,它创建了编译的单个js文件,但是当我运行require构建时,它不包含生成的文件和生产中的视图。
我收到了这个错误:
can.view: No template or empty emplate:js/app/common/calendar/views/init.ejs
我创建了一个文件views.production.js到我的项目目录中,内容为:
define('views', function() {});
然后在我的build.js文件应用程序中我把它:
"paths" : {
"app" : "../app",
"tools" : "../../../tools",
"jquery" : "jquery-2.0.3.min",
"jquery-ui" : "plugins/jquery-ui-1.10.4.custom.min",
"jquery-ui-touch-punch" : "plugins/jquery.ui.touch-punch.min",
"bootstrap" : "bootstrap.min",
"underscore" : "underscore.min",
"can" : "can",
"aria" : "aria",
"models" : "../app/common/models",
//folder directory for documentation
"doc" : "../doc",
"async" : "require/async",
"goog" : "require/goog",
"propertyParser" : "require/propertyParser",
"google-api" : "aria/google_api/google-api-engine",
"google-maps" : "aria/google_api/google-maps-engine",
"collaboration" : "../app/collaboration",
"swipe" : "plugins/swipe2",
"animend-transend" : "plugins/jquery.animend.transend",
"jquery-validate" : "plugins/jquery.validate.min",
"jcrop" : "plugins/jcrop/js/jquery.Jcrop.min",
"spin" : "plugins/spin",
"ftscroller" : "plugins/ftscroller",
"owl-carousel" : "plugins/owl.carousel.min",
'shared_resource' : '../shared_resource',
'views' : '../views.production'
}
然后在应用程序的commons.js文件中我提出了一个要求:
require([
'jquery',
'aria',
'app/common/error_handler',
'app/common/vocal',
'views'
], function (jQuery, AriaTouch) {
我的应用程序尝试调用ejs文件:
GET http://local.bst.prod/js/app/timeline/sidebar/bookmark/views/submenuBookmark.ejs 404 (Not Found)
common.js:4 Uncaught can.view: No template or empty
template:js/app/timeline/sidebar/bookmark/views/submenuBookmark.ejs