使用Grunt编译把手模板

时间:2015-01-08 08:55:47

标签: javascript gruntjs handlebars.js

我正在尝试使用Grunt编译我的手柄模板,如下所述。没关系,但它将所有的hbs文件编译成一个不太好的文件。我想为Menu1和Menu2目录分别创建一个文件。如果我能以某种方式为每个目录单独完成一项任务,那我真的很棒。 但是,由于我还在学习这些东西,我无法找到更好的方法让它发挥作用。
或者,如果我能以某种方式使Handlebars单独编译每个文件。

项目结构:

    /js/:
     ->/app/
        app_init.js
     ->/templates/
       -> /Menu1/
           template1.hbs
           template2.hbs
       -> /Menu2/
           template1.hbs
           template2.hbs

Gruntfile.js

module.exports = function(grunt) {

    var TEMPLATES_LOCATION        = "./js/templates/",
        TEMPLATES_EXTENSION       = ".hbs",
        TEMPLATES_OUTPUT_LOCATION = TEMPLATES_LOCATION,    
        TEMPLATES_OUTPUT_FILENAME = "compiled_templates.js";  

    grunt.initConfig({
        watch: {
            handlebars: {
                files: [TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION],
                tasks: ['handlebars:compile']
            }
        },
        handlebars: {
            compile: {
                src: TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION,
                dest: TEMPLATES_OUTPUT_LOCATION + TEMPLATES_OUTPUT_FILENAME,
                options: {
                    amd: true,
                    namespace: "templates"
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-handlebars');
    grunt.loadNpmTasks('grunt-contrib-watch');
}

任何人都可以提出建议吗?

1 个答案:

答案 0 :(得分:0)

我想出了一个小小的解决方法。不确定这是否是最好的方法,但它有效..

handlebars: { compile_Menu1: { src: TEMPLATES_LOCATION + '/Menu1/*' + TEMPLATES_EXTENSION, dest: TEMPLATES_OUTPUT_LOCATION+"Menu1"+TEMPLATES_OUTPUT_EXTENSION, options: { amd: true, namespace: "M1_templates" } }, compile_Menu2: { src: TEMPLATES_LOCATION + '/Menu2/*' + TEMPLATES_EXTENSION, dest: TEMPLATES_OUTPUT_LOCATION+"Menu2"+TEMPLATES_OUTPUT_EXTENSION, options: { amd: true, namespace: "M2_templates" } } }