Search code examples
deploymentgruntjszurb-foundationbowerdirectory-structure

Foundation 5 Production Environment Files

I've created a new foundation project using the foundation new myproject --libsass method.

Its just a simple static index.html (for the purpose of this question).

I've deployed it to a live server now, and I am wondering about the best way to structure this. I have omitted the node_modules & scss directories, and i'm left with the following:

  • bower_components/
  • css/
  • js/
  • index.html
  • bowerrc
  • bower.json
  • Gruntfile.js
  • humans.txt
  • package.json
  • README.md

bower_components is needed in its current form, unless I shuffle some files around, which is what I intend to do, but I'm checking if there is a better way of doing this, and that I haven't missed some magic terminal command to deploy to production.

Solution

  • As msturdy suggested in the comments, grunt is the way to go here. There are a lot of plugins out there, see a list on the official page.

    If you want to have grunt "compile" your project into one specific folder which you can then for example push to a deployment server, you should do several things in grunt:

    1. compile your scss
    2. minify your javascript, that is making the files smaller, see jscompress for a demo of what it is. All your js-files from /bower_components which you include in your project should be in a vendor.js which is loaded first, and then a second js-file should contain your custom js from /js
    3. save everything into a deployment folder.
    4. (optional) automatically deploy to a server.

    Take a look at these grunt tutorials for setting up your gruntfile.js, you'll want to have two tasks, one for just quickly compiling your scss, one for the whole deployment process:

    They show you how to do certain things and definitely how to write the gruntfile. Plugins you might want to use apart from your current libsass plugin are uglify and any plugin that lets you deploy your code via git, ftp or anything else. You can download all these plugins via npm by adding them to your package.json and doing npm install, refer to their websites for exact usage instruction.