grunt-contrib-html-build

[Grunt][grunt] HTML Builder - Appends scripts and styles, Removes debug parts, append html partials, Template options

Getting Started

Install this grunt plugin next to your project's gruntfile with: npm install grunt-contrib-html-build --save-dev

Then add this line to your project's Gruntfile.js :

``javascript
grunt.loadNpmTasks('grunt-contrib-html-build');
`

Then specify your config: ([more informations][doc-options])

`javascript
grunt.initConfig({
fixturesPath: "fixtures",

components : Object.keys(grunt.file.readJSON('./bower.json').dependencies).map(
function(prodComponent) {
return "source/polymer/"+prodComponent+"/"+prodComponent+".html";
}
),

htmlbuild: {
dist: {
src: 'index.html',
dest: 'samples/',
options: {
beautify: true,
prefix: '//some-cdn',
relative: true,
scripts: {
bundle: [
'<%= fixturesPath %>/scripts/*.js',
'!**/main.js',
],
main: '<%= fixturesPath %>/scripts/main.js'
},
styles: {
bundle: [
'<%= fixturesPath %>/css/libs.css',
'<%= fixturesPath %>/css/dev.css'
],
test: '<%= fixturesPath %>/css/inline.css'
},
components: {
bundle: ['<%= components %>',
'source/polymer/font-roboto/roboto.html']
},
sections: {
views: '<%= fixturesPath %>/views/*/.html',
templates: '<%= fixturesPath %>/templates/*/.html',
layout: {
header: '<%= fixturesPath %>/layout/header.html',
footer: '<%= fixturesPath %>/layout/footer.html'
}
},
data: {
// Data to pass to templates
version: "0.1.0",
title: "test",
},
}
}
}
});
`

Using the configuration above, consider the following example html to see it in action:

`html






















































`

After running the grunt task it will be stored on the dist folder as

`html

...

...

...

...

`

There 5 types of processors:

* [script][doc-scripts-styles]
* append script reference from configuration to dest file.
* [style][doc-scripts-styles]
* append style reference from configuration to dest file.
* [section][doc-sections]
* append partials from configuration to dest file.
* [process][doc-process]
* process grunt template on the block.
* [remove][doc-remove]
* it will erase the whole block.

[grunt]: https://github.com/gruntjs/grunt
[doc-options]: https://github.com/techfano/grunt-html-build/wiki/Task-Options
[doc-scripts-styles]: https://github.com/techfano/grunt-html-build/wiki/Linking-Scripts-and-Styles
[doc-sections]: https://github.com/techfano/grunt-html-build/wiki/Creating-HTML-Sections
[doc-process]: https://github.com/techfano/grunt-html-build/wiki/Using-HTML-as-Template
[doc-remove]: https://github.com/techfano/grunt-html-build/wiki/Removing-parts
[doc-reuse]: https://github.com/techfano/grunt-html-build/wiki/Creating-reusable-HTML-Layout-Template

Release History

* 0.1.0 Initial Release
* 0.1.1 Cleaning, adding optional tags, using js-beautify
* 0.1.2 Adding expand options to tags paths and write docs
* 0.1.3 Fixing nodejs dependencies
* 0.1.4 Fixing nodejs dependencies
* 0.1.5 Optimize src loop / Fix js-beautify options
* 0.1.6 Allow build tag customization
* 0.2.0
* Fix and optimisation
* Allow replacing src file by built file
* Allow filename in dest path
* Allow prefixing src files
* 0.2.1 Allow non relative file names + per file tag parameter
* 0.2.2 Fix issue in options.relative
* 0.3.0
* Fix issue when building multiple html files using custom file globbing
* Allow sub parameters in all options paths
* 0.3.1
* Fix issue when using prefix on Windows environment
* 0.3.2
* Update js-beautify dependency to 1.4.2
* Remove peerDependencies to avoid versions conflict
* 0.4.0
* Fix bug in prefix option
* Allow recursive build using section processor
* 0.4.1
* Fix prefix's ability to contain //, as in https://
* Add a new recursive option which can be added to section tag.
* 0.4.2
* Fix relative path error since 0.4.0
* Add noprocess option to tags to avoid underscore processing issues.
* 0.4.3
* Allow remove task to be configured by using current target.
* 0.5.0
* Avoid javascript when parsing unknown tags.
* Add an allowUnknownTags option to ignore unknown tags without failing the task.
* Allow to specify attributes on script and styles tags.
* Allow http,https or // links to be processed as links.
* Automatically adapt generated link` tag for less files.
*0.5.1
* Adding automatically generation link import tag for polymerJS dependencies.