Adding modernizr

[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?

[drawcardau]

Yep you’re right - for some reason I’d read jshint in the conversation

I think the counterpart file to create is .eshintignore

But glad to hear the flags work @azzcatdesign

[sandrowuermli]

I spend a lot of time for the solution to combine modernizr with the main.js file.

First i’ve added Modernizr as vendor in the manifest.json-File:

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

You see, the file is in the default scripts folder in a subfolder called 'dependencies'. I created this folder and the modernizr folder by myself, so you can pick your own folder-name if you want.

**Important:** You see, the vendor path (`"vendor": ["assets/scripts/dependencies/modernizr/modernizr.js"]`) is the root path of your theme and not the path of your script you've added on the `"files": []`-Part.

So you don't need the `.jshintignore` file for compiling `gulp --production`.
And best of all, you don't have to use `wp_enqueue_script ()`.

But if you want your own Files for each javascript file, put this in your `.jshintignore`: `assets/scripts/dependencies/**` and every file inside your `dependencies` folder will not error on `gulp --production`.