grunt-dom-munger 

> Read and manipulate HTML documents using CSS selectors.

Use this task to read and transform your HTML documents. Typical use cases include:

* Read the references from your script or link tags and pass those to concat,uglify, etc automatically.
* Update HTML to remove script references or anything that is not intended for your production builds.
* Add, update, or remove any DOM elements for any reason.

Getting Started

This plugin requires Grunt ~1.1.0 and Node >=10.0.

``shell
npm install grunt-dom-munger --save-dev
`

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

`js
grunt.loadNpmTasks('grunt-dom-munger');
`

The "dom_munger" task

$3

The dom-munger reads one or more HTML files and performs one or more operations on them.

`js
grunt.initConfig({
dom_munger: {
your_target: {
options: {
//You typically would only specify one option per target but they may be combined
//All options (except callback) can be arrays
read: [
{selector:'link',attribute:'href',writeto:'myCssRefs',isPath:true},
{selector:'script[src]',attribute:'src',writeto:'myJsRefs',isPath:true}
],
remove: '#removeMe',
update: {selector:'html',attribute:'appmode', value:'production'},
prefix: {selector:'link',attribute:'href',value:'project-name/'},
suffix: {selector:'html',attribute:'version',value:'.0.1'},
append: {selector:'body',html:'

'},
prepend: {selector:'body',html:'Im being prepended'},
text: {selector:'title',text:'My App'},
callback: function($){
$('#sample2').text('Ive been updated via callback');
}
},
src: 'index.html', //could be an array of files
dest: 'dist/index.html' //optional, if not specified the src file will be overwritten
},
},
})
`

$3

Note: each option (except callback) requires a selector. This can be any valid CSS selector. Also, each option (except callback) can be a single object (or String for remove) or an array of objects/Strings. In this way, one target may perform multiple actions of the same type.

#### options.read

Extract the value of a given attribute from the set of matched elements then set the values into dom_munger.data.{writeto}. A typical use-case is to grab the script references from your html file and pass that to concat,uglify, or cssmin.

`js
grunt.initConfig({
dom_munger: {
your_target: {
options: {
read: {selector:'script',attribute:'src',writeto:'myJsRefs',isPath:true}
},
src: 'index.html'
},
},
uglify: {
dist: {
src:['other.js','<%= dom_munger.data.myJsRefs %>'],
dest: 'dist/app.min.js'
}
}
})
`

When isPath is true, the extracted values are assumed to be file references and their path is made relative to the Gruntfile.js rather than the file they're read from. This is usually necessary when passing the values to another grunt task like concat or uglify.

#### options.remove

Removes one or more matched elements.

`js
grunt.initConfig({
dom_munger: {
your_target: {
options: {
remove: '#removeMe' //remove an element with the id of removeMe
},
src: 'index.html',
dest: 'dist/index.html'
},
},
})
`

#### options.update

Updates the value of a given attribute for the set of matched elements.

`js
grunt.initConfig({
dom_munger: {
your_target: {
options: {
update: {selector:'html',attribute:'appmode', value:'production'}, //set a appmode="production" on
},
src: 'index.html',
dest: 'dist/index.html'
},
},
})
`

#### options.prefix

Prepends to the value of a given attribute for the set of matched elements.

`js
grunt.initConfig({
dom_munger: {
your_target: {
options: {
prefix: {selector:'link',attribute:'href', value:'project-name/'}, //prepend project-name to the href attribute, for example href="project-name/next/path" on
},
src: 'index.html',
dest: 'dist/index.html'
},
},
})
`

#### options.suffix

Appends to the value of a given attribute for the set of matched elements.

`js
grunt.initConfig({
dom_munger: {
your_target: {
options: {
suffix: {selector:'html',attribute:'version', value:'.0.1'}, //append .0.1 to the version attribute, for example version="1.0.1" on
},
src: 'index.html',
dest: 'dist/index.html'
},
},
})
`

#### options.append

Appends the content to each matched element.

`js
grunt.initConfig({
dom_munger: {
your_target: {
options: {
append: {selector:'body',html:'

'}
},
src: 'index.html',
dest: 'dist/index.html'
},
},
})
`

#### options.prepend

Prepends the content to each matched element.

`js
grunt.initConfig({
dom_munger: {
your_target: {
options: {
prepend: {selector:'body',html:'Im being prepended'}
},
src: 'index.html',
dest: 'dist/index.html'
},
},
})
`

#### options.text

Updates the text content of the matched elements.

`js
grunt.initConfig({
dom_munger: {
your_target: {
options: {
text: {selector:'title',text:'My App'} //Updates the