How to make grunt watch subfolder for handlebars t

Question

When you create an ember app with Yeoman, it create a handlebars templates folder for you (.hbs).

The yeoman config is set that way :

watch: {
        ember_templates: {
          files: '<%= yeoman.app %>/templates/**/*.hbs',
          tasks: ['ember_templates', 'livereload']
        },

• When a template is in the folder root, it works
• When a template is in a subfolder template/mySubfolder the template is not rendered (no html is returned)
• When a template is missing, ember throw an error

So when the template is in a subfolder, it is somewhat detected... but why not rendered

I tried various expressions is the Gruntfile.js but it did not improve it.

watch: {
        ember_templates: {
          files: '<%= yeoman.app %>/templates/{,*/}*.hbs',
          tasks: ['ember_templates', 'livereload']
        },

---

@Mishik (too long for a comment)

The whole "watch" part :

    watch: {
        ember_templates: {
          files: '<%= yeoman.app %>/templates/**/*.hbs',
          tasks: ['ember_templates', 'livereload']
        },
        coffee: {
            files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
            tasks: ['coffee:dist']
        },
        coffeeTest: {
            files: ['test/spec/{,*/}*.coffee'],
            tasks: ['coffee:test']
        },
        compass: {
            files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
            tasks: ['compass:server']
        },
        neuter: {
          files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
          tasks: ['neuter', 'livereload']
        },
        livereload: {
            files: [
                '<%= yeoman.app %>/*.html',
                '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
                '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
            ],
            tasks: ['livereload']
        }
    }

And something I did not see first time :

    ember_templates: {
        options: {
            templateName: function (sourceFile) {
                var templatePath = yeomanConfig.app + '/templates/';
                return sourceFile.replace(templatePath, '');
            }
        },
        dist: {
            files: {
                '.tmp/scripts/compiled-templates.js': '<%= yeoman.app %>/templates/{,*/}*.hbs'
            }
        }
    }

Is it the part I should modify ? I tried a few things, it did not work out.

Answer 1

As noted by mishik, templates/**/*.hbs is perfectly valid. If we are talking about Yeoman please note that you will need to change the value in 2 places:

1. Inside the watch task (which is what you already have tried)
2. Further below inside the handlebars task.

This should solve your problem.

Answer 2

I got the same issue, but I found it was the replace issue and '/templates/**' does not work for me.

Here is my example:

       templateName: function (sourceFile) {
                var templatePath = yeomanConfig.app + '/templates/web/';
                    sourceFile= sourceFile.replace(templatePath, '');
                templatePath = yeomanConfig.app + '/templates/mobile/';
                    sourceFile= sourceFile.replace(templatePath, '');
                templatePath = yeomanConfig.app + '/templates/tablet/';
                    sourceFile= sourceFile.replace(templatePath, '');
                return sourceFile;
            }