Is it possible to compile the templates individually?

[TheSisb]

I have over 40 templates that I am conditionally loading using requirejs. I was wondering if this would allow to find all *.hbs files and compile them separately so I can only load the ones my page needs rather than all my templates in a single file.

Thanks

[mattacular]

Hmm... I'm not sure actually. Could you share the way you've set up the task?

[TheSisb]

Hey thanks for responding :)

Previously I was playing with loading them all into a single templates.js file. I am now wondering if instead of specifying a dest file, I can specify a dest folder so it does a 1to1 mapping.

 /*
     * The handlebars command Task
     */
    handlebars: {
      all: {
        options: {
          knownHelpers: ['each', 'if', 'unless'],
        },
        files: {
          // Destination                            Source
          "htdocs/js/app/templates/templates.js": ["htdocs/jsSource/app/templates/*.hbs", "htdocs/jsSource/app/templates/**/*.hbs"]
        }
      }
    },

[mattacular]

You can try specifying dest as a folder "htdocs/js/app/templates/" instead but I'm not sure if that will work. Another thing to try is using an expanded target:

files: [{
    expand: true,
    src: ["htdocs/jsSource/app/templates/*.hbs", "htdocs/jsSource/app/templates/**/*.hbs"],
    ext: '.hbs'
}]

I've used that style to act on files "in place" rather than into a concatenated package before using other tasks with success. Never tried it on my own handlebars compiler plugin but this is an out-of-the-box Grunt feature extended to all multitasks as far as I know.

Let me know if that doesn't work and I can build it into the next version of the plugin.

[TheSisb]

The in-place style worked.

I needed to create a task to copy the files over to the dest folder, then run my handlebars task like this:

    /*
     * The handlebars command Task
     */
    handlebars: {
      all: {
        options: {
          knownHelpers: ['each', 'if', 'unless'],
          exportAMD: true,
          pathToHandlebars: 'common/'
        },
        files: [{
          expand: true,
          src: ["htdocs/js/app/templates/*.hbs", "htdocs/js/app/templates/**/*.hbs"],
          ext: '.hbs'
        }]
      }
    },

And then I run uglifyjs2 over all the files individually (slow but w/e). My watcher then continues to monitor changes and individually updates templates on change.

It would be cool if this one plugin handled the 1-to-1 compilation and move step by just providing a directory instead of a dest file, but it's no big deal. Thanks a lot for the help man, super appreciated! (Surprised this has so few stars, I use this on a huge production environment)

[TheSisb]

Actually, that files array also accepts a "dest" parameter.

files: [{
          expand: true,
          src: ["htdocs/jsSource/app/templates/*.hbs", "htdocs/jsSource/app/templates/**/*.hbs"],
          ext: '.hbs',
          dest: 'htdocs/js/app/templates/'
        }]

But the outcome isn't what you'd expect: http://puu.sh/7W5VU.png It moves to the right destination folder, but it maintained the source file path / directory structure. I'm sure there's something small I'm missing here.

---

[EDIT] Solved!

    /*
     * The handlebars command Task
     */
    handlebars: {
      all: {
        options: {
          knownHelpers: ['each', 'if', 'unless'],
          exportAMD: true,
          pathToHandlebars: 'common/'
        },
        files: [{
          expand: true,
          // To enable dynamic expansion.
          cwd: 'htdocs/jsSource/app/templates/',
          // Src matches are relative to CWD.
          src: ["*.hbs", "**/*.hbs"],
          // Destination path prefix.
          dest: 'htdocs/js/app/templates/',
          // Destination file extension
          ext: '.js',
        }]
      }
    },