How do I include plugins in HTML5 Boilerplate (plugins in individual .js-files, local testing)
Asked Answered
W

0

0

I'm testing out HTML5 Boilerplate, but I don't quite get how to setup the plugins.js-file.

I've tried to copy the contents of plugins in manually, like this:

(function($){
   //minimized source of plugin #1
})(this.jQuery);

(function($){
   //minimized source of plugin #2
})(this.jQuery);

//and so on...

But it got quite time consuming and hard to maintain.

I then tried to use the "vender"-folder and include from there:

$.getScript("vendor/waypoints.min.js", function(){
   alert("Success");
});

But then I get the following errors (Chrome console) when testing locally:

OPTIONS file:///Users/myusername/Sites/H5BPtest/js/vendor/waypoints.min.js?_=1371722230114 Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load file:///Users/myusername/Sites/H5BPtest/js/vendor/waypoints.min.js?_=1371722230114. Origin null is not allowed by Access-Control-Allow-Origin. 

What to do? I would prefer to have all plugins in a folder (e.g. "vendor"), and then load them somehow.

Also an automated solution that takes alle the .js-plugin-files and combines them to one, would be cool. But I haven't seen any easy to use solutions on that (I'm not that technical)...

I need to test locally, because I'm using some design tools, that doesn't work via a server. I'm on OSX, if it makes any difference.

Any help would be very, very appreciated!

Warehouse answered 20/6, 2013 at 10:14 Comment(2)
1. why are you using $.getScript() and not just linking to the files in the body of your HTML? 2. you can't use $.getScript() without running a server because of the way that security works in web browsers see same origin policyUnequivocal
That's actually a good idea! I'll do that for local testing, and try to find some script for automating a combine/minimize of all the scripts, when going to the web server. Thanx a lot!Warehouse

© 2022 - 2024 — McMap. All rights reserved.