Grunt plugins used
grunt-link-html grunt-contrib-copy
Instructions for running
grunt build-prod // to build for production
grunt build-dev // to build for development
| module.exports = function(grunt) { | |
| grunt.initConfig({ | |
| /* | |
| copy header-template.html which will have placeholders for injecting css,js | |
| */ | |
| copy: { | |
| main: { | |
| files: [ | |
| { | |
| src: ['header-template.html'], | |
| dest: 'header.html' | |
| } | |
| ] | |
| } | |
| }, | |
| link_html: { | |
| // dev target to which will copy normal uncompressed files used for development | |
| dev: { | |
| jsFiles: ['public/default.js'], // path to dev js files | |
| cssFiles: ['public/style.css'], // path to dev css files | |
| targetHtml: ['header.html'] | |
| }, | |
| // prod target to which will copy normal uncompressed files used for production | |
| prod: { | |
| jsFiles: ['public/default.min.js'], // path to prod js files | |
| cssFiles: ['public/style.min.css'], // path to prod css files | |
| targetHtml: ['header.html'] | |
| } | |
| }, | |
| }); // end of configuring the grunt task | |
| grunt.loadNpmTasks('grunt-contrib-copy'); | |
| grunt.loadNpmTasks('grunt-link-html'); | |
| // this task can be run with "grunt build-prod" | |
| grunt.registerTask('build-prod', 'Production', function() { | |
| //copy template which has placeholders for js,css injection | |
| grunt.task.run('copy'); | |
| // run link_html task which will replace our placeholders by js,css files supplied | |
| grunt.task.run('link_html:prod'); | |
| }); | |
| // this task can be run with "grunt build-prod" | |
| grunt.registerTask('build-dev', 'Development', function() { | |
| grunt.task.run('copy'); | |
| grunt.task.run('link_html:dev'); | |
| }); | |
| }; |
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- begin:css --> | |
| <!-- end:css --> | |
| </head> | |
| <body> | |
| <!-- begin:js --> | |
| <!-- end:js --> | |
| </body> | |
| </html> |