Grunt rule to compile any html inside javascript it matches any files that ends in .element.html, so if you have for example x-foo.element.html it generates x-foo.js Really useful for using the declarative element syntax, eg: http://jsfiddle.net/kentaromiura/uJqy9/ instead of the register api. Requires: grunt, btoa.

Gruntfile.js

module.exports = function(grunt) {

    var log = function(){
            grunt.log.write(Array.prototype.slice.apply(arguments).join('') + '\n')
        },
        btoa = require('btoa')

    // Project configuration.
    grunt.initConfig({

    });

    // Default task(s).
    grunt.registerTask('default', 'from element templates to javascript', function(){
        var allfiles = grunt.file.expand('**/*.element.html')
        for(var i = 0, max = allfiles.length;i<max;i++){
            var filename = allfiles[i];
            var tojs = filename.replace('.element.html','.js')

            var content = grunt.file.read(filename)


            var output = ['var fragment = document.createElement("span");\n',
                'fragment.innerHTML=atob("',btoa(content),'");\n',
                'document.documentElement.appendChild(fragment.firstChild);\n'
            ];

            if(grunt.file.exists(tojs)){
                //todo: delete the file
                grunt.file.delete(tojs)
            }
            grunt.file.write(tojs, output.join(''))
            log("file ", tojs, " has been created")

        }
        grunt.log.write('All xtags elements has been processed ').ok()
    } );
};