Question

从我发现yeoman的那天起，我就将它用于我的所有前端项目。

它包括grunt-modernizr - 至少我认为 - 下载库并在我调用构建任务时动态编译它

grunt build

但我遇到一个小问题：默认情况下，它不包括我们在网上可以看到的“非核心检测”：modernizr custom builder

这是我的grunt-modernizr任务配置（Gruntfile.js文件的一部分）：

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
}

实际上我想使用Modernizr.getusermedia，但作为非核心功能，它没有定义...... 因为grunt-modernizr配置似乎不允许非核心检测到包含。关于这一点的任何想法？

编辑：modernizr任务不再有效;即使我删除了“额外”和“可扩展性”属性......

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

您可以查看stu cox的回答here

基本上，

使用matchCommunityTests配置标志让grunt-modernizr 在代码中查找对非核心测试的引用，或者命名它们显式在你的测试配置

Answer 2

在提出此问题时，grunt-modernizr的最新版本为0.4.1。假设OP使用的是最新版本：

在版本0.4.1中添加社区测试

README显示两个（可选）感兴趣的选项：

tests（数组）

定义要隐式包含的任何测试。测试名称是小写的，由下划线分隔（如果需要）。查看完整的测试选项here。

和

matchCommunityTests（布尔）

当parseFiles = true时，将此布尔值设置为true将尝试匹配用户提供的测试。查看完整的社区测试here

您会注意到，可以添加到tests阵列的可用测试列表包括核心测试和社区测试。因此，如果要明确包含特定的社区测试，可以在tests数组选项中枚举它们。例如：

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

但如果您将parseFiles设置为true并希望grunt-modernizr检测到您拥有的任何社区测试，则可以将matchCommunityTests设置为true。

grunt-modernizr的已发布配置未包含任何选项，如果OP想要使用Modernizr.getusermedia，则他们只需设置tests数组即可包含"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版本为0.5.2。与OP的一个重大变化是Modernizr任务现在是multi-task。

在0.5.2

中添加社区测试

README仍提供两个（可选）感兴趣的选项：

tests（数组）

定义要隐式包含的任何测试。测试名称是小写的，由下划线分隔（如果需要）。查看完整的测试选项here。

和

matchCommunityTests（布尔）

当parseFiles = true时，将此布尔值设置为true将尝试匹配用户提供的测试。查看完整的社区测试here

有了这些信息，我们知道我们可以按如下方式定义任务：

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']
    }
}

将tests数组设置为包含'getusermedia'的位置始终包含社区getusermedia测试。

自动检测社区测试

（请参阅#67，#85，#86，#87和#88。）

自动检测社区测试是错误的。似乎无论matchCommunityTests设置为false还是true，所以存在的社区测试将被下载并包含在自定义构建中。例如，这个基本任务配置：

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

这个简单的JS文件：

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

结果为custom build that does include tests for cookies, cors, and gamepad：download link。

自定义grunt-modernizr与非核心检测

2 个答案:

在版本0.4.1中添加社区测试

在0.5.2

自动检测社区测试