Custom grunt-modernizr with non-core detects

Question

Since the day I discovered yeoman, I use it for all my front-end projects.

It includes grunt-modernizr that - at least I think - download the library and compiles it on the fly when I call the build task

grunt build

But I have a small problem : by defaults, it does not include the "non-core detects" that we can see online here : modernizr custom builder

Here is my grunt-modernizr task config (part of the Gruntfile.js file) :

modernizr: {
    devFile: '<%= yeoman.app %>/components/modernizr/modernizr.js',
    outputFile: '<%= yeoman.dist %>/components/modernizr/modernizr.js',
    extra: {
        'shiv' : true,
        'printshiv' : false,
        'load' : true,
        'mq' : false,
        'cssclasses' : true
    },
    extensibility: {
        'addtest': true,
        'prefixed': false,
        'teststyles': false,
        'testprops': false,
        'testallprops': false,
        'hasevents': false,
        'prefixes': false,
        'domprefixes': false
    },
    files: [
        '<%= yeoman.dist %>/scripts/{,*/}*.js',
        '<%= yeoman.dist %>/styles/{,*/}*.css',
        '!<%= yeoman.dist %>/scripts/vendor/*'
    ],
    uglify: true
}

In fact I would like to use Modernizr.getusermedia, but as a non-core feature, it is not defined... Because the grunt-modernizr config does not seem to allow the non-core detects inclusion.

Any idea about this point?

EDIT: the modernizr task does not work anymore ; even when I remove the "extra" and "extensibility" properties...

Running "modernizr" task

Enabled Extras
>> shiv
>> load
>> cssclasses

Looking for Modernizr references

in dist/styles/main.min.css
>> svg
>> input

Downloading source files
cache modernizr-latest.js
cache modernizr.load.1.5.4.js

>> Generating a custom Modernizr build
Fatal error: Invalid regular expression: /TEST__flexbox']=function(){return testPropsAll('flexWrap');};tests['flexboxlegacy__/: Unterminated character class

Answer 1

You can, check out stu cox's answer here

essentially,

either use the matchCommunityTests config flag to let grunt-modernizr find references to non-core tests in your code, or name them explicitly in your tests config

Answer 2

At the time this question was asked, the most recent version of grunt-modernizr would have been 0.4.1. Assuming that the OP was using the most recent version:

Adding community tests in version 0.4.1

The README shows two (optional) options of interest:

tests (Array)

Define any tests you want to implicitly include. Test names are lowercased, separated by underscores (if needed). Check out the full set of test options here.

And:

matchCommunityTests (Boolean)

When parseFiles = true, setting this boolean to true will attempt to match user-contributed tests. Check out the full set of community tests here

You will notice that the list of available tests that one can add to the tests array includes both core and community tests. Thus, if you want to explicitly include particular community tests, you can enumerate them in the tests array option. For example:

// This would be in a larger config file
tests: ["a_download", "css_remunit"]

But if you have parseFiles set to true and want grunt-modernizr to detect any community tests that you have, you can set matchCommunityTests to true.

The posted config for grunt-modernizr does not included either of the options, and if the OP wanted to use Modernizr.getusermedia, they could simply set the tests array to include "getusermedia":

modernizr: {
    devFile: '<%= yeoman.app %>/components/modernizr/modernizr.js',
    outputFile: '<%= yeoman.dist %>/components/modernizr/modernizr.js',
    extra: {
        'shiv' : true,
        'printshiv' : false,
        'load' : true,
        'mq' : false,
        'cssclasses' : true
    },
    extensibility: {
        'addtest': true,
        'prefixed': false,
        'teststyles': false,
        'testprops': false,
        'testallprops': false,
        'hasevents': false,
        'prefixes': false,
        'domprefixes': false
    },
    files: [
        '<%= yeoman.dist %>/scripts/{,*/}*.js',
        '<%= yeoman.dist %>/styles/{,*/}*.css',
        '!<%= yeoman.dist %>/scripts/vendor/*'
    ],
    uglify: true,
    // Explicitly include the `getusermedia` test
    tests: ['getusermedia']
}

---

Currently, grunt-modernizr is at version 0.5.2. One significant change from the OP is that the Modernizr task is now a multi-task.

Adding community tests in 0.5.2

The README still offers two (optional) options of interest:

tests (Array)

Define any tests you want to implicitly include. Test names are lowercased, separated by underscores (if needed). Check out the full set of test options here.

And:

matchCommunityTests (Boolean)

When parseFiles = true, setting this boolean to true will attempt to match user-contributed tests. Check out the full set of community tests here

With this information, we know that we can define the task as follows:

modernizr: {
    dist: {
        devFile: '<%= yeoman.app %>/components/modernizr/modernizr.js',
        outputFile: '<%= yeoman.dist %>/components/modernizr/modernizr.js',
        extra: {
            'shiv' : true,
            'printshiv' : false,
            'load' : true,
            'mq' : false,
            'cssclasses' : true
        },
        extensibility: {
            'addtest': true,
            'prefixed': false,
            'teststyles': false,
            'testprops': false,
            'testallprops': false,
            'hasevents': false,
            'prefixes': false,
            'domprefixes': false
        },
        uglify: true,
        tests: ['getusermedia']
    }
}

Where setting the tests array to include 'getusermedia' will always include the community getusermedia test.

Automatically detecting community tests

(See #67, #85, #86, #87, and #88.)

Automatic detection of community tests is buggy. It seems that regardless of what matchCommunityTests is set to, false or true, community tests that exist will be downloaded and included in the custom build. For example, this basic task config:

modernizr: {
    dist: {
        devFile: 'vendor/modernizr/modernizr.js',
        outputFile: 'js/modernizr.custom.js',
        uglify: false,
        files: {
            src: ['js/src/**/*.js']
        }
    }
}

And this simple JS file:

;(function (
    window,
    document,
    Modernizr
) {
    if (Modernizr.touch) {}
    if (Modernizr.cookies && Modernizr.cors && Modernizr.gamepad) {}
}(
    window,
    window.document
    Modernizr
));

Results in a custom build that does include tests for cookies, cors, and gamepad: download link.