寻找现代参考资料

Question

我正在尝试在我的项目中使用grunt-modernizr插件，但是当我运行任务时，我收到以下输出：

Running "modernizr:dist" (modernizr) task

>> Explicitly including these tests:
>> pointerevents

Looking for Modernizr references

我没有收到任何类型的错误，终端只是返回到我所在的目录，就像是放弃了一样。

这是我的grunt文件：

module.exports = function(grunt) {
    grunt.initConfig ({
    // Do grunt-related things in here
        pkg: grunt.file.readJSON('package.json'),

        modernizr: {
          dist: {
              "dest": "javascripts/modernizr-custom.js",
              "parseFiles": true,
              "customTests": [],
              "devFile": "javascripts/modernizr-custom.js",
              "outputFile": "javascripts/min/modernizr-custom.min.js",
              "tests": [
                  "pointerevents",
                  "css/pointerevents"
              ],
              "extensibility": [
                  "setClasses"
              ],
              "uglify": false
          }
        },

        cssmin: {
          target: {
            files: {
                'css/min/bootstrap.min.css': ['css/bootstrap.css']
            }
          }
        },              
    });
    grunt.loadNpmTasks("grunt-modernizr");
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default',['modernizr', 'cssmin']);
};

运行grunt --verbose的输出：

Initializing
Command-line options: --verbose

Reading "gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK

Registering "grunt-modernizr" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Loading "modernizr.js" tasks...OK
+ modernizr

Registering "grunt-contrib-cssmin" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Loading "cssmin.js" tasks...OK
+ cssmin
Loading "gruntfile.js" tasks...OK
+ default

No tasks specified, running default tasks.
Running tasks: default

Running "default" task

Running "modernizr" task

Running "modernizr:dist" (modernizr) task
Verifying property modernizr.dist exists in config...OK
Files: -> javascripts/modernizr-custom.js
Verifying property modernizr exists in config...OK

>> Explicitly including these tests:
>> pointerevents

Looking for Modernizr references

Answer 1

这也是我刚刚遇到的问题，在customizr找不到任何要抓取的文件(默认情况下，它会抓取)后，grunt-modernizr似乎停止了抓取。

如果您将"crawl": false添加到您的modernizr:dist任务中，应该可以解决这个问题。

另外，我认为"extensibility": [ "setClasses" ],应该是"options": [ "setClasses" ],。

Answer 2

要使用grunt-modernizr任务来爬行代码以获取Modernizr引用，您必须查看customizr任务的config properties，因为这是grunt-modernizr的node_modules的一部分：

modernizr: {
    dist: {
        dest: 'bower_components/modernizr/build/modernizr.custom.js',
        uglify: false,
        options: [
            'setClasses',
            'addTest'
        ],
        files: {
            src: ['js/app/**/*.js', 'js/app/*.js']
        }
    }
}

devFile:似乎与你所指的位置无关

dest:而不是outputFile，请注意，我只是输出到一个不属于包的构建目录

uglify:如果您有其他最小化选项，如bundleconfig.json，则为false

选项：绕过默认选项{ "setClasses", "addTest", "html5printshiv", "testProp", "fnBind" }

文件：要登记可爬网控制器(y|ies)，请确保您也要注意根文件和/或子目录

加载所需的任务，在我的例子中：

grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-modernizr');
grunt.loadNpmTasks('grunt-contrib-copy');

请参阅'modernizr:dist'任务=> grunt.registerTask('default', ['clean', 'modernizr:dist', 'copy']);

这会产生一个未缩小的34kb文件：

运行“clean：

”(clean)任务的文件

清理了19条路径。

运行“现代:dist”(现代)任务

寻找现代参考资料

1匹配js/app/classes/yumber.options.js

bgpositionxy

1匹配js/app/modules/yumber.audio o.js

音频

可以使用以下设置进行构建：

setClasses，addTest

构建您的自定义Modernizr...OK

成功！将文件保存到bower_components/modernizr/build/modernizr.custom.js

进程已终止，代码为0。

运行"copy:main“(复制)任务

已复制11个文件

完成，没有错误。

这样一来，甚至不需要到在线构建来添加功能测试。只需在您的js代码中引用Modernizr：

window.Yambo = (function($, modernizr, ns){
    ns.Audio = {
        extension: (function () {
            return modernizr && modernizr.audio.mp3
                ? 'mp3'
                : modernizr.audio.ogg
                ? 'ogg'
                : 'wav';
        }())
    };

    return ns;
}(window.jQuery, window.Modernizr, window.Yambo || {}));

确保使用correct property name进行功能检测，这样customizr就可以拿起它，并为您的自定义构建提供测试。

这对于css应该也是可能的，但目前还没有进行测试。

Answer 3

看起来你错过了源文件。http://gruntjs.com/configuring-tasks#files-object-format

尝试包含

"dist": {
    "files": {
        "src": ['!<%= appDir %>assets/js/bower/modernizr/**']
    }
}