7

从我发现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
4

2 回答 2

3

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

在 0.4.1 版本中添加社区测试

自述文件显示了两个（可选）感兴趣的选项：

tests（大批）

定义要隐式包含的任何测试。测试名称是小写的，用下划线分隔（如果需要）。在此处查看全套测试选项。

和：

matchCommunityTests（布尔）

当parseFiles=时true，将此布尔值设置为 true 将尝试匹配用户贡献的测试。在此处查看完整的社区测试集

您会注意到可以添加到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数组设置为 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']
}

目前，grunt-modernizr版本为 0.5.2。OP 的一个重大变化是该Modernizr任务现在是一个multi-task。

在 0.5.2 中添加社区测试

自述文件仍然提供两个（可选）感兴趣的选项：

tests（大批）

定义要隐式包含的任何测试。测试名称是小写的，用下划线分隔（如果需要）。在此处查看全套测试选项。

和：

matchCommunityTests（布尔）

当parseFiles=时true，将此布尔值设置为 true 将尝试匹配用户贡献的测试。在此处查看完整的社区测试集

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

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
));

生成一个包含对、和的测试的自定义构建cookiescorsgamepad：下载链接。

于 2014-07-23T00:43:14.687 回答
3

你可以，在这里查看stu cox的答案

本质上，

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

于 2013-12-20T04:03:19.907 回答