How do I use Bower components in codekit

Question

I have installed into a new project in codekit the following components:

jquery animate.css normalize Modernizer

I understand that keeping these components in the bower directory is recommended so these files are easily updated. However, do we link to these in our html files directly? My sass files get compiled and outputted to assets/css but there aren't any sass files in the bower components and creating them in the original folder would, I assume, get overridden if I was to upgrade. Seems very odd to me to upload the entire bower_components file to the production server with all the dependent files. I have been building site for a long time without all this node, git, grunt, bower, et al stuff. I see the value in it, but I'm having a tough time getting up to speed. Any help sure would be appreciated.

Answer 1

In most cases, you would want to include the third-party components (e.g. css, javascript, ... files) within your own master css or javascript file and then minimize that file for production. For example, my folder structure looks like:

    bower_components/
        ...
    release/
        css/
            styles.min.css
        img/
            ...
        js/
            scripts.min.js
    src/
        images/
            ...
        scripts/
            scripts.js
        styles/
            styles.less
        templates/
            ...

And then, within styles.less, I might have:

@import (less) "../../bower_components/normalize-css/normalize.css";

Or within scripts.js I could have:

//@codekit-prepend "../../bower_components/jquery/dist/jquery.js"

I have CodeKit set to generate the minified versions in release/ from those files. The only files that go to production are all of the files in the release/ folder.