gruntjs / grunt-contrib-jst

Compile underscore templates to JST file.
http://gruntjs.com/
MIT License
113 stars 45 forks source link

Template Destination Path and File Extension #47

Open ghost opened 10 years ago

ghost commented 10 years ago

I am working on using grunt with a backbone/cordova (phonegap)...

It would be nice to have a "dest_path" and "include_ext" options so you could set the destination folder of the template and whether or not to include the extension of the file name in the template name.

Example:

jst: {
     compile: {
         options: {
             prettify: true
         },
         files: {
             "www/javascripts/templates.js": ["www/javascripts/templates/*.jst.ejs"]
         }
     }
}

The end result is that each template has "www/javascripts/templates/" before each templat name:

 this["JST"]["www/javascripts/templates/modal_message.jst.ejs"] = function...

The new option would like look like:

jst: {
     compile: {
         options: {
             dest_path: "templates",
             include_ext: false,
             prettify: true
         },
         files: {
             "www/javascripts/templates.js": ["www/javascripts/templates/*.jst.ejs"]
         }
     }
}

and the end results would be:

this["JST"]["templates/modal_message"] = function...

So in backbone I can refer to the templates as such:

 this.template = JST["templates/modal_message"];

Clear as mud?

BTW, thanks for the work on this. It is going to save me a bunch of time. :+1:

traviswimer commented 10 years ago

I find this inconvenient as well. I'm surprised no one else has commented on this.

traviswimer commented 10 years ago

In case anyone is looking for a quick workaround for this, I decided to just use this plugin to fix the paths: https://github.com/erickrdch/grunt-string-replace

So you just run the string-replace plugin after the JST plugin. Going with @jcochran 's example, you just do something like this:

'string-replace': {
    jst: {
        files: {
            'www/javascripts/templates.js': 'www/javascripts/templates.js'
        },
        options: {
            replacements: [{
                pattern: /www\/javascripts\/templates/ig,
                replacement: 'templates'
            }]
        }
    }
},
ghost commented 10 years ago

Yes, I went with something very similar.

Sent from my iPhone

On Sep 15, 2014, at 12:06 PM, "Travis Wimer" notifications@github.com<mailto:notifications@github.com> wrote:

In case anyone is looking for a quick workaround for this, I decided to just use this plugin to fix the paths: https://github.com/erickrdch/grunt-string-replace

So you just run the string-replace plugin after the JST plugin. Going with @jcochranhttps://github.com/jcochran 's example, you just do something like this:

'string-replace': { jst: { files: { 'www/javascripts/templates.js': 'www/javascripts/templates.js' }, options: { replacements: [{ pattern: /www\/javascripts\/templates/ig, replacement: 'templates' }] } } },

— Reply to this email directly or view it on GitHubhttps://github.com/gruntjs/grunt-contrib-jst/issues/47#issuecomment-55622788.

rogierborst commented 10 years ago

You don't need a separate plugin for this. There is an option built right into this one, called processName. So you can do

jst: {
    compile: {
        options: {
            processName: function(thatHugeFilepath){
                return thatHugeFilepath.replace('/www/javascripts/templates/', 'templates');
            }
        }
    }
}

Of course, you can just as easily use any other string function to transform your template names.

traviswimer commented 10 years ago

Thanks for explaining. That works perfectly.

I actually saw that option in the README, but it I found it rather unclear. The description mentions the JST namespace, so I thought it was basically an alternative to the namespace option that allowed you to use a function.

Rereading it now, it does make sense, but the wording could probably be clearer.