Are you supposed to link to bower_components in production?

user499054 picture user499054 · Apr 30, 2014 · Viewed 14.6k times · Source

I'm relatively new to using Bower and I can't tell if you're supposed to link to bower_components in production. Should I be using a grunt task to link or copy over the files I need from bower_components into a separate directory?

I'm asking this because I've never seen a website that has a directory called "bower_components," so I'm a bit scared to. All the beginner guides just link to 'bower_components/...', like the angular tutorial.

Answer

Sergio Rinaudo picture Sergio Rinaudo · Apr 30, 2014

are you using Yeoman?

Depending on your Gruntfile.js you should have different tasks, one of these is 'bower-install': this task will read you index.html, find the following comment block

<!-- bower:js -->
<!-- endbower -->

and inject inside it all your dependencies specified in your bower.json. This means that the task will write for your all the <script src"/bower_components/.."> blocks.

You never noticed a website with "bower_components" references because your /app dir is your 'development' environment, your source project. From the source you will create the production application running the "build" task: this task is composed by different subtasks that makes different jobs, one of these is concatenating all scripts added by bower_install task in one single js file.

Then there is another task that will minify this file, another that will run tests, another that will create a "dist" directory where your production site resides and so on...

If you use Yeoman you have all these tasks already configured in the Gruntfile.js, just open it and try to understand what every task does.

At first glance it can be quite difficult to understand, for example the build task refers to 14 or 15 subtasks, I suggest you to register custom tasks that run only one task and see what happens.

Cheers