Question

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

Running "modernizr:dist" (modernizr) task

>> Explicitly including these tests:
>> pointerevents

Looking for Modernizr references

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

这是我的咕噜文件：

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

这也是我刚刚遇到的问题，似乎grunt-modernizr在customizr找不到要抓取的文件（默认情况下会抓取）后停止{。}}。

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

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

Answer 2

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

尝试加入

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

Answer 3

要使用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'任务=＆gt; grunt.registerTask('default', ['clean', 'modernizr:dist', 'copy']);

这会导致34kb文件无法识别：

运行＆＃34;清理：文件＆＃34; （清洁）任务
  清理了19条路径   跑步＆＃34;现代化：dist＆＃34; （modernizr）任务
  寻找Modernizr参考文献
  1匹配js / app / classes / yambo.options.js
  bgpositionxy
  1匹配js / app / modules / yambo.audio.js
  音频
  准备使用这些设置构建：
  setClasses，addTest
  建立自定义的Modernizr ......好的   成功！保存文件到bower_components / modernizr / build / modernizr.custom.js
  流程以代码0终止   正在运行＆＃34; copy：main＆＃34; （复制）任务
  复制了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来说这也应该是可能的，但目前尚未对此进行测试。

寻找Modernizr参考

3 个答案: