Adding modernizr

[lopinsjk]

Hi everybody,

can anyone tell me how to add modernizr to sage? Step by step please. I tried for two days without results.

In my new Sage installation there isn’t modernizr.

Thank you.

[Twansparant]

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"
  }
}

7. Run gulp
8. 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.

[lopinsjk]

Thank you.

In this case modernizr.js is a separate file, right? Is it the best solution? Can modernizr stay inside main.js?

[Twansparant]

Yes it’s separate, but it always has been separate as far as I know.
I don’t think it’s an good idea to put it in your main.js, but you probably could by adding it as a vendor file in your manifest:

"main.js": {
  "files": [
    "scripts/main.js"
  ],
  "vendor": [
    "assets/scripts/modernizr.js"
  ],
  "main": true
},

[lopinsjk]

Ok, great.

Tell me another thing: if I would add owl-carousel2 and magnific popup inside Sage I must follow the same steps of adding modernizr?

Please help me.

Thank you

[lopinsjk]

I have an error when I launch modernizr -c modernizr-config.json:

C:\Users\my-user\AppData\Roaming\npm\node_modules\modernizr\lib\build-query.js:22

property.replace(’-’, ‘_’);

TypeError: Cannot read property ‘replace’ of undefined

[swalkinshaw]

Please keep your thread about a single topic. Don’t keep asking for help with other issues. You also already asked about this in another thread.

[lopinsjk]

You’re right. Can you help me? I try to work with bower but I don’t understand the steps. I read the manual without success.

Thank you in advance.

[mattia]

@Twansparant

I don’t think it’s an good idea to put it in your main.js, but you probably could by adding it as a vendor file in your manifest:

@Twansparant just a curiosity, why is not a good idea to put modernizr inside the main.js?
thanks

[Twansparant]

Sometimes you need a modernizr detection in your head and not in the footer, or you only need modernizr for IE9 <. If it’s in your main.js, you can’t enqueue it separately.

[JSDieNeu]

I needed to exclude modernizr.js from jshint to get it running, like described in this thread:

Is it possible to ignore files in jshint when running gulp --production?

I just did this myself by manually adding an excluded file in gulpfile.js here: https://github.com/roots/sage/blob/93da15b03d44e2122699c285a75e4a9a113ea17b/gulpfile.js#L227-L234 Example: gulp.task('jshint', function() { return gulp.src([ 'bower.json', 'gulpfile.js' ].concat(project.js) .concat('!assets/scripts/plugins/**')) .pipe($.jshint()) .pipe($.jshint.reporter('jshint-stylish')) .pipe($.jshint.reporter('fail')); }); ! means exclude.

[tuannguyen2086]

First, thank you for topic. I did these steps above and gulp. There show a lot of errors on it.

Following picture:

Any solutions?

[Twansparant]

Yeah you should add the modernizr script to the jshint ignore list to prevent these errors

[Stu_Horsfield]

Thanks so much for this answer, very clear and easy to follow.

Due likely to an update in the Sage lib/ configuration since you posted this answer, the enqueue script commands have been moved to the lib/setup.php file, inside the assets function.
Just FYI

Cheers!

[tuannguyen2086]

thanks so much for this answer.

[azzcatdesign]

I’m head banging trying to find out how to add the modernizr script to the jshint ignore file:

1. where is jshint ignore
2. what is code that I need to add.

Please and thanks!

[drawcardau]

.jshintignore is like .gitignore - you make a file in the root theme folder called .jshintignore and put the script you want to ignore in it like so:

jshint/jshint/blob/master/examples/.jshintignore

If that doesn’t work you can use flags in your modernizr script like so:

... linted code ...
/* jshint ignore:start */
// Code here will be ignored by JSHint.
// Modernizr stuff here
/* jshint ignore:end */
... linted code ...

[Twansparant]

Nothing to ad here

[azzcatdesign]

Thank you! The .jshintignore did not work, but the flags did.

[Twansparant]

Isnt’t it eslint instead of jslint?