javascript - Custom grunt-modernizr with non-core detects - Stack Overflow

admin管理员组

文章数量:1404332

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 piles 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 %>/ponents/modernizr/modernizr.js',
    outputFile: '<%= yeoman.dist %>/ponents/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

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 piles 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 %>/ponents/modernizr/modernizr.js',
    outputFile: '<%= yeoman.dist %>/ponents/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

• javascript
• gruntjs
• modernizr
• getusermedia

Share Improve this question Follow edited Oct 24, 2021 at 16:03 Whymarrh 13.6k1515 gold badges6161 silver badges110110 bronze badges asked Dec 19, 2013 at 17:49 Flo SchildFlo Schild 5,31444 gold badges4444 silver badges5656 bronze badges 1

• 1 unless you manually edited the modernizr file, you should open up a bug with the grunt-modernizr github issue tracker – Patrick Commented Dec 21, 2013 at 21:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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 munity 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 munity tests here

You will notice that the list of available tests that one can add to the tests array includes both core and munity tests. Thus, if you want to explicitly include particular munity 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 munity 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 %>/ponents/modernizr/modernizr.js',
    outputFile: '<%= yeoman.dist %>/ponents/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 munity 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 munity tests here

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

modernizr: {
    dist: {
        devFile: '<%= yeoman.app %>/ponents/modernizr/modernizr.js',
        outputFile: '<%= yeoman.dist %>/ponents/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 munity getusermedia test.

Automatically detecting munity tests

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

Automatic detection of munity tests is buggy. It seems that regardless of what matchCommunityTests is set to, false or true, munity 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.

本文标签： javascriptCustom gruntmodernizr with noncore detectsStack Overflow