grunt-plugin-angular-template-inline

Inlines AngularJS templates into an HTML file

Getting Started

If you haven't used grunt before, be sure to check out the Getting Started guide.

From the same directory as your project's Gruntfile and package.json, install this plugin with the following command:

npm install grunt-plugin-angular-template-inline --save-dev

Once that's done, add this line to your project's Gruntfile:

grunt.loadNpmTasks('grunt-plugin-angular-template-inline');

If the plugin has been installed correctly, running grunt --help at the command line should list the newly-installed plugin's task or tasks. In addition, the plugin should be listed in package.json as a devDependency, which ensures that it will be installed whenever the npm install command is run.

Buster task

Run this task with the grunt angularTemplateInline command.

This task is a multi task so any targets, files and options should be specified according to the multi task documentation.

This task inlines AngularJS templates into a single HTML file. It does this by creating <script type="text/ng-template" id="<file-name>"> blocks in the header of the target file. The id of the <script/> tags matches the name of each file, relative to the base file that the others are being inlined into. Therefore, all code that works before being inlined, will continue to work after it is inlined.

Usage Examples

Typical

Typical configuration is simply to identify a mapping between the a destination file and the files to be inlined. By convention, the first file in the collection is the base files that all others will be inlined into.

angularTemplateInline: {
    app: {
        files: {
            'build/index.html': ['src/**/*.html']
        }
    }
},