Are you supposed to link to bower_components in production?

Question

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 1

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

Answer 2

You can give your bower installation directory a better name by creating a .bowerrc file (next to your bower.json file) and setting the directory property to something else. For instance, I have the following in my .bowerrc:

{
  "directory": "public/vendor"
}

Then there's also the closely related question of whether or not you should be checking in the contents of this directory to source control. For a much more in depth discussion of that question, see here.

And lastly, as others have already mentioned, it's recommended that you concatenate and minify your front-end dependencies.

Answer 3

I don't see any problem with linking to it directly, but usually you will want to concatenate all of your scripts into one file and uglify it so the file size is reduced for production.

The grunt uglify task can handle both of these things for you quite easily. You just have to supply an array of files to join.

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});

Answer 4

It's pretty common to start off by just using bower_components. You can see this in the angular-seed starter project's script references. Once you get to deploying a production application and load time and performance become critical, you should look at converting over to solution to merge and minify dependencies.