What Is Yeoman - Part 2 Bower

After an introduction to Yeoman and the tool Yo few days ago, today I will talk about the second tool from Yeoman workflow which is Bower.

Bower is not a revolutionary tool but it’s really useful. Bower is a like NPM (used for Node.js) for your front end scripts. If you don’t know that tool, NPM is a package manager to help you to download and link the packages you want in your js application (using a nodejs server as development tool or server).

The problem when you create a new application with a lot of js is to resolve all dependencies.

1
2
3
4
5
6
7
...
<script src="jquery-2.0.0.js"></script>
<script src="require-2.1.10.js"></script>
<script src="bootstrap-3.0.3.js"></script>
<script src="underscore-1.5.2.js"></script>
  </body>
</html>

For example this is really boring and will not work because this bootstrap version (3.0.3) depends on jquery 2.0.3 and we include the 2.0.0 version, moreover, you have to go to the website to download the library and include them in your project or use a CDN to deliver those scripts but in that case you cannot minify all in one script for production. So of course you can just be smart when you include your scripts with the right version and download them in a specific folder like vendors or third_party something like that or you can use Bower.

Let’s do the same with Bower now (this should be already installed if you installed yeoman otherwise a simple npm install -g bower is enough).

First we have to initialize bower

1
bower init

After few questions to configure your application, this will create a file bower.json. This file will contains all your dependencies and your scripts.

Then we need to say which scripts we want so in our case require.js, bootstrap, underscore and jquery. With bower you can install a script with the command bower install and your have the --save option to save this in your bower.json file.

So

1
2
3
bower install requirejs --save
bower install bootstrap --save
bower install underscore --save

I didn’t include jquery because I know bootstrap need it so it will be include automatically I don’t have to be worried about that but of course I can also type bower install jquery --save

To be sure you can run a bower list to see all the scripts of your application and you will see jquery is include.

After that, all those informations will be saved in the bower.json file with.

1
2
3
4
5
  "dependencies": {
    "requirejs": "~2.1.10",
    "underscore": "~1.5.2",
    "bootstrap": "~3.0.3"
  }

So now if you want to work with someone and to be sure (s)he will have the same version of your script, (s)he just have to run bower install and this will automatically download the right versions of each scripts.

Of course you still need to include those script in your html page, this cannot be fixed by bower and it’s weird because there is all needed informations for that but we will see next time with grunt, the last tool or yeoman, how is it possible to even not write this.

And if you remember in the last post we generated an application using yo and if you check on the code of this application you can see this bower.json file with all scripts included and already downloaded for this new generated application.

Just to resume right now we have all the organization of our files with all scripts already downloaded and even some page already created. We just need to be able now to build coffee scripts or SASS files for example or minify our sources for production and stuffs like that, and this will be the last tool of yeoman which is for me the best one to save a lot of time but we will see that in the next post ;)

See part 3: Grunt

Comments

Copyright © 2014 - Anthony Estebe -