I'm creating a boilerplate project for working with the Foundation framework using gulp and browserify with the following file structure while following this handy guide:
.
├── build
| ├── js
| └── bundle.js
| ├── stylesheets
| ├── main.css
| └── main.min.css
| └── index.html
├── node_modules
| └── [gulp, gulp-watch, etc...]
├── src
| ├── js
| └── main.js
├── sass
| ├── _main_settings.scss [for overriding default Foundation settings]
| └── main.scss
├── templates
| └── index.jade
├── bower.json
├── gulpfile.js
└── package.json
Should I bower install foundation in the root folder, or would it make more sense to put it inside the src folder? I've gotten the scss working by following this guide, however I'm not sure how to use browserify to bundle up the foundation js so that I can just import one neat compiled file in index.html. In addition, I'd like to import modernizr separately, in the head section rather than at the end of the body.
If it helps, here is my gulpfile for reference.
I deciding to use npm to install foundation rather than bower, however either way I left bower_components / node_modules in the root folder rather than build.
browserify-shim is necessary to get browserify to play nice with Foundation, as was answered here.
I ended up making a Yeoman generator to scaffold out a project with Foundation, Gulp and Browserify, feel free to check it out: https://github.com/dougmacklin/generator-foundation-browserify