Custom grunt-modernizr with non-core detection features

Question

Since I discovered yeoman , I have been using it for all of my front-end projects.

It includes grunt-modernizr, which, at least I think, loads the library and compiles it on the fly when I invoke the build task

grunt build 

But I have a small problem: by default, it does not include the "minor detection", which we can see here: modernizr custom builder

Here is my grunt-modernizr task configuration (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 } 

Actually, I would like to use Modernizr.getusermedia, but it is not defined as a non-core function ... Since the configuration of grunt-modernizr does not seem to allow the inclusion of non-black detection functions. Any idea on this?

EDIT : modernizr task no longer works; 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 stu cox answer here

essentially

either use the matchCommunityTests configuration flag to allow grunt-modernizr to find links to non-core tests in your code or to name them explicitly in your test configurations

Answer 2

At the time this question was asked, the latest version of grunt-modernizr would be 0.4.1. Assuming OP is using the latest version:

Adding community tests in version 0.4.1

README shows two (optional) options of interest:

tests (array)

Identify the tests that you want to indirectly include. Test names are listed below, separated by underscores (if necessary). Check out the full set of testing options here .

and

matchCommunityTests (Boolean)

When parseFiles = true , setting this boolean to true will try to run tests performed by users. Check out our full community test suite here.

You will notice that the list of available tests that can be added to the tests array includes both kernel tests and communities. Thus, if you want to explicitly specify specific community tests, you can list them in the tests 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 grunt-modernizr is required to detect any community tests you have, you can set matchCommunityTests to true.

The published configuration for grunt-modernizr does not include any of the options, and if the OP wanted to use Modernizr.getusermedia , they could just set up the tests array to enable "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'] } 

---

grunt-modernizr is currently in version 0.5.2. One major change from the OP is that the Modernizr task is now a multi-task .

Adding community tests in 0.5.2

README still offers two (optional) options:

tests (array)

Identify the tests that you want to indirectly include. Test names are listed below, separated by underscores (if necessary). Check out the full set of testing options here .

and

matchCommunityTests (Boolean)

When parseFiles = true , setting this boolean to true will try to run tests performed by users. Check out our full community test suite here.

With this information, we know that we can define the problem 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'] } } 

If setting up the tests array to enable 'getusermedia' will always include the getusermedia community getusermedia .

Auto detect community tests

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

Automatically detecting community tests is a bug. It seems that regardless of whether matchCommunityTests set to false or true , existing community tests will be loaded and included in the custom assembly. For example, this basic config task:

 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 assembly, which includes tests for cookies , cors and gamepad : download link .