run the npm vue-template-compiler on html files to compile them to render functions to improve FE performance
npm install grunt-vue-template-compilerThis task runs the vue-template-validator, vue-template-compiler and then vue-template-es2015-compiler on Vue HTML files to produce the pre-compile JS functions. These functions can then be substituted for import: template from ./template.html!text in the JS files and builder will then merge these into the build.js file, avoiding the need to compile the HTML files at run time.
~0.4.5If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
``shell`
npm install grunt-vue-template-compiler --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js`
grunt.loadNpmTasks('grunt-vue-template-compiler');
to the data object passed into grunt.initConfig().`Simple Example
grunt.initConfig({
vue_template_compiler: {
options: {
validate: true, //default is true
validateOnly: false, //default is false
es2015: true //default is true
},
your_target: {
files : {
'app/js//*.js' : 'app/js//template.html' //note that JS files will be named output as render.js
}
},
},
});
`$3
#### options.validate
Type:
Boolean
Default value: trueThis option tells the task to run the html files through the vue-template-validator.
#### options.validateOnly
Type:
Boolean
Default value: falseThis option tells the task to run the html files through vue-template-validator only and not run the compile steps.
#### options.es2015
Type:
Boolean
Default value: true`This option tells the task to take the complied HTML files and run them through vue-template-es2015-compiler to take advantage of es2015 features and, more importantly, remove the with(this) inside the render function to make it strict compliant.
You'll also be able to replace vue.min.js with vue.runtime.min.js in production.
0.4.0 Big read me update
0.3.1 Updated the readme with extra details and a usage example.
0.3.0 Added Vue template validator and the ES2015 compiler steps to the task
0.1.1 Minor update
0.1.0 First version