TAGS :Viewed: 11 - Published at: a few seconds ago

I'm trying to use the grunt-modernizr plugin in my project but I'm receiving the following output when I run tasks:

Running "modernizr:dist" (modernizr) task

>> Explicitly including these tests:
>> pointerevents

Looking for Modernizr references

I'm not receiving any type of error the terminal just goes back to the directory that I'm in, as if it's just giving up.

Here is my grunt file:

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

Output from running 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


This is something I just came across too and seems to be grunt-modernizr stopping after customizr doesn't find any files to crawl (it crawls by default).

If you add "crawl": false to your modernizr:dist task that should fix the problem.

Also, I think "extensibility": [ "setClasses" ], should be "options": [ "setClasses" ],.

Answer 2


It looks like you missed source files. http://gruntjs.com/configuring-tasks#files-object-format

Try to include

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

Answer 3


To use the grunt-modernizr task to crawl your code for Modernizr references you'll have to look at the config properties for the customizr task as this is part of grunt-modernizr 's 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: doesn't seem to matter where you point at
dest: instead of outputFile, note I'm just outputting to a build directory that's not part of the package
uglify: false if you have other minifying options like bundleconfig.json
options: to bypass the default options { "setClasses", "addTest", "html5printshiv", "testProp", "fnBind" }
files: to enlist your crawlable director(y|ies), make sure you take care of the root files and/or subdirectories as well


Load the required tasks, in my case:

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

Refer to the 'modernizr:dist' task => grunt.registerTask('default', ['clean', 'modernizr:dist', 'copy']);

Which results in an unminified 34kb file:

Running "clean:files" (clean) task
19 paths cleaned.
Running "modernizr:dist" (modernizr) task
Looking for Modernizr references
1 match in js/app/classes/yambo.options.js
bgpositionxy
1 match in js/app/modules/yambo.audio.js
audio
Ready to build using these settings:
setClasses, addTest
Building your customized Modernizr...OK
Success! Saved file to bower_components/modernizr/build/modernizr.custom.js
Process terminated with code 0.
Running "copy:main" (copy) task
Copied 11 files
Done, without errors.


This way there's no need to even go to the online build to add a feature test. Simply reference Modernizr throughout your js code:

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

Make sure to use the correct property name for a feature detection, so customizr can pick it up and provide a test to your custom build.


This should be also possible for css but haven't been testing that for the moment.