Adding modernizr

sage
2

This is what I did:

  1. Install the Modernizr command line tool by running: npm install -g modernizr
  2. Go to https://modernizr.com/download?setclasses and select the detections you would like.
  3. Click Build and click the Command Line Config | Download link
  4. Save the modernizr-config.json file in your assets/scripts/ directory.
  5. Browse to: /assets/scripts/ and run: modernizr -c modernizr-config.json
  6. Add the in step 5 generated modernizr script to your dependencies in the assets/manifest.json like this:
{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "files": [
        "scripts/modernizr.js"
      ]
    }
  },
  "config": {
    "devUrl": "http://example.dev"
  }
}
  1. Run gulp
  2. Enqueue your modernizr script in lib/assets.php before sage/js:
wp_enqueue_script('sage/modernizr', Assets\asset_path('scripts/modernizr.js'), [], null, true);

That should do it!
If you want to add or remove more detections, repeat step 2 - 5.

8 Likes