Using grunt-html-build

Question

I am getting an error Warning: undefined is not a function Use --force to continue. when trying to run html-grunt-build. Below is some more information, any help would be greatly appreciated:

$ grunt htmlbuild  --verbose
Initializing
Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ build, default

Running tasks: htmlbuild

Loading "grunt-html-build" plugin

Registering "/home/path/node_modules/grunt-html-build/tasks" tasks.
Loading "build-html.js" tasks...OK
+ htmlbuild

Running "htmlbuild" task

Running "htmlbuild:dist" (htmlbuild) task
Verifying property htmlbuild.dist exists in config...OK
Files: path/to/css/css.html -> path/to/css/css.html
Options: beautify=false, logOptionals=false, relative, scripts={}, styles={"critical":"path/to/css/critical.css"}, sections={}, data={}, parseTag="build"
Reading path/to/css/css.html...OK
Reading path/to/css/critical.css...OK
Warning: undefined is not a function Use --force to continue.

Aborted due to warnings.

My Grunt config (I am using load-grunt-config so this is stored in a separate file):

module.exports = function(grunt, options) {
    return {
        dist: {
            src: 'path/to/css/css.html',
            dest: 'path/to/css/css.html',
            options: {
                styles: {
                    critical: 'path/to/css/critical.css'
                }
            }
        }
    };
};

More detailed error:

TypeError: undefined is not a function
    at Object.validators.validate (/home/node_modules/grunt-html-build/tasks/build-html.js:196:44)
    at /home/node_modules/grunt-html-build/tasks/build-html.js:245:39
    at Array.forEach (native)
    at transformContent (/home/node_modules/grunt-html-build/tasks/build-html.js:242:14)
    at /home/node_modules/grunt-html-build/tasks/build-html.js:306:27
    at Array.forEach (native)
    at /home/node_modules/grunt-html-build/tasks/build-html.js:295:22
    at Array.forEach (native)
    at Object.<anonymous> (/home/node_modules/grunt-html-build/tasks/build-html.js:291:20)
    at Object.<anonymous> (/home/node_modules/grunt/lib/grunt/task.js:264:15)

Answer 1

So the problem was that I was using grunt-usemin and grunt-html-build in the same HTML file.

grunt-html-build was seeing my build tags:

<!-- build:css path/to/css/ie8.min.css -->
    <link rel="stylesheet" href="path/to/css/ie8.css"> 
    <link rel="stylesheet" href="path/to/css/print-new.css" media="print">
<!-- endbuild --> 

And it did not know how to deal with build:css

To solve this issue I have separated out the two files into different HTML includes so the tasks can run separately.