HTML5Boilerplate js directory structure
I'm wondering if someone can check my understanding of what the intended purpose of HTML5Boilerplate js directories. I understand that main.js is where I'm expected to place all site specific javascript that I author. Plugins.js is where I would place all jQuery plugins used. Both min.'s and plugins.js will be concatenated and minified by the build process. Vendor.js holds javascript libraries. This directory will be minified (unless it is already minified) but not concatenated.
If this is true, then my question is where should something like cute slider which has a modular structure be placed? I'm thinking I want it to be minified and concatenated so it shouldn't go in the vendor directory. I don't believe I can add cuteslider's javascript to main.js or plugins.js without destroying it's modular structure. Should I create a new directory, and call it something like apps, to hold cuteslider code and then modify the build code to minified and concatenated it?
Here is a snippet of cuteslider's code structure
cute
cute.2d.module.js
cute.canvas.module.js
cute.css3d.module.js
cute.gallery.plugin.js
cute.slider.js
cute.transitions.all.js
If this is true, then my question is where should something like cute slider which has a modular structure be placed? I'm thinking I want it to be minified and concatenated so it shouldn't go in the vendor directory. I don't believe I can add cuteslider's javascript to main.js or plugins.js without destroying it's modular structure. Should I create a new directory, and call it something like apps, to hold cuteslider code and then modify the build code to minified and concatenated it?
Here is a snippet of cuteslider's code structure
cute
cute.2d.module.js
cute.canvas.module.js
cute.css3d.module.js
cute.gallery.plugin.js
cute.slider.js
cute.transitions.all.js
ASKER
I agree that a separate folder would be a clean structure. I think I have two possible routes:
1. Follow your suggestion and create a new folder inside js to hold cute-slider and any other packages. HTML5Boilerplate structure would look like:
js
main.js
plugins.js
apps.js
cute
cute.slider.js
cute.transitions.all.js
package #2
vendor
jquery-1.9.0.min.js
modernizr-2.6.2.min.js
For this to work I would have to edit the build script to look for a directory called apps and then to loop through any subdirectories.
2. Pull individual modules out of the Cute folder and put them into the vendor directory like:
js
main.js
plugins.js
vendor
jquery-1.9.0.min.js
modernizr-2.6.2.min.js
cute.slider.js
cute.transitions.all.js
The main advantage to #2 is not having to modify the build script. #1 has the advantage of a cleaner structure.
What do you think?
1. Follow your suggestion and create a new folder inside js to hold cute-slider and any other packages. HTML5Boilerplate structure would look like:
js
main.js
plugins.js
apps.js
cute
cute.slider.js
cute.transitions.all.js
package #2
vendor
jquery-1.9.0.min.js
modernizr-2.6.2.min.js
For this to work I would have to edit the build script to look for a directory called apps and then to loop through any subdirectories.
2. Pull individual modules out of the Cute folder and put them into the vendor directory like:
js
main.js
plugins.js
vendor
jquery-1.9.0.min.js
modernizr-2.6.2.min.js
cute.slider.js
cute.transitions.all.js
The main advantage to #2 is not having to modify the build script. #1 has the advantage of a cleaner structure.
What do you think?
Why not put cute inside plugins which is already in the build script?
If not, then surely altering the build script is the easier task.
In my mind the key is that as all the cute assets are in one folder so it doesn't matter exactly where that cute folder is as long as it satisfies your own logic regarding future use or upgrade of the template as you are the one who has to use it. If it is for a wider audience, then again it doesn't really matter as long as the location is documented.
If not, then surely altering the build script is the easier task.
In my mind the key is that as all the cute assets are in one folder so it doesn't matter exactly where that cute folder is as long as it satisfies your own logic regarding future use or upgrade of the template as you are the one who has to use it. If it is for a wider audience, then again it doesn't really matter as long as the location is documented.
ASKER
The main issue I see is how the build script will handle the cute folder. Following the HTML5BP model the main.js and plugins.js are collections of individual scripts, not directories that can contain the cute folder.
Vendor on-the-other-hand is a directory and I could put the cute folder there. What I'm not sure about is whether-or-not the build script will loop through the cute sub-folder?
Thanks much for your help.
Vendor on-the-other-hand is a directory and I could put the cute folder there. What I'm not sure about is whether-or-not the build script will loop through the cute sub-folder?
Thanks much for your help.
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
But it kind of depends on cute slider - if the links contained within are relative then you should have no problem and you can put it wherever you like otherwise you have to edit the cute slider code to update image paths etc.