7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Working With Bower

Bower is a package manager for the web. Let’s talk about how it works and how we can integrate it with Grunt.

2.5 Working With Bower

Hello and welcome to lesson number seven. Let's talk about Bower. And Bower is a package manager for the web. It allows you to very quickly get access and download various libraries, either CSS or JavaScript, it doesn't matter. So, you can find Bower at bower.io. And if you go to Search packages, you can just see a couple of popular packages here, like bootstrap, jQuery, what else? Font-Awesome, right? So you can see where I'm going with this, you can get some very well-known libraries that you might be using by using Bower. So, Bower is an npm module. So, you would install it with npm. Let's go in here and type npm install –g bower. That's gonna install Bower, I already have it installed, I'm not gonna do that. So if I do bower -v, it gives me version 1.8. Now how do you work with Bower? Well, you simply do bower install and the name of the package. And that will download that package and install it in bower_components folder. So for example if I do bower install jquery, that's gonna download jQuery and put it in that folder that I just told you. Now instead of doing that, we're gonna do something else. We're gonna say bower init. It's gonna ask me for a name of the file, grunt-workflow fine. Description, that's fine. And this time it took the description from my package.json file which is great. Main file, keywords, author myself, yes, home page and we'll set this to no for now. Yes, sure. All right, so, what this is doing is, it's creating a bower.json file, very similar to the package.json file. But this only refers to the Bower component. It's a configuration file for Bower basically. It gives us information about the project. And as you'll see in just a little bit, a list of dependencies. What I can do now is say bower search. I very often use a library called Normalize CSS, which is a reset file. So if I do a search normalize, that's gonna look at the repositories from Bower and give me a list of results that match my search criteria. And in this case, I'm looking for this one here normalize.css. This is the one that I need. So I'm gonna say bower install normalize.css. So I'm matching that exact name. And also I'm going to add a flag called --save. And this will install normalize.css and also add that package as a dependency in my bower.json file as you can see right here, great. Now, just a quick note here if you're wondering what you can do with these dependencies. Well what you can do is you can move things around for example take your project folder move it elsewhere. But without those module folders. And then what you can do is say npm, I believe it's update. No npm install. And by doing npm install, npm will look at your package.json file. And it's gonna take all the dependencies there and install them. So those files package.json, bower.json, they're basically a configuration. They're basically configuration files. If you execute certain commands, you can reinstall components, the components that you need, basically. All right, now let's go back here. So now it installed normalize.css in my bower_components folder. I also need jQuery, I'm going to do bower install jquery. And that's gonna install the latest version of jQuery. And if I actually show you this bower_components folder, I have it hidden by default. But if I show it to you, This is how it looks like. And we have a bunch of files here, we have all these files in the normalize-css folder. But from it, we just need this one, normalize.css. And in jQuery we have a bunch of files but really we just need jquery.min.js or jquery.js from the dist folder or from the distribution folder. So how exactly do we work with these files and how exactly do we know which ones we need? Well, and let me actually hide this bower_components folder again. There is a plugin called the grunt-bower and the grunt-bower will search for a local Bower installation. And it will only grab the files that you need from that installation and copy them somewhere else. And we can use this method to create our own folder for third party libraries. So I'm gonna do just that. I'm gonna say, first let me clear this console here, and I'm going to say npm install grunt-bower. Also save it as a dependency. And then I'm gonna load the module here. And then let's go ahead and create the appropriate task. The task is called bower and what I wanna do here basically is the following. I'm setting the destination folder. In my case it's called paths.source_bower. So let's go ahead and define that. That's gonna point to app/src/bower. All right, so I'm not actually gonna create the folder here, I don't have to. The plugin will create it for me. I can also set separate destinations for separate file types. So for example, for jQuery files, I'm going to a subfolder called js. And for CSS files, I'm going to a separate folder called, styles. Okay, so now, if I'm gonna run grunt bower, you're gonna see that the plugin copied all the necessary files from my bower_components folder into the bower folder. So now I have js here and styles here. And it only copied the files and folders that I need. And that's how easy it is to work with Bower, with all of the Bower components. By using this plugin you just get the files that you need. So, now that we have some extra files let's see how we can incorporate them into our workflow. And we'll start with this normalize.css. What we wanna do is we wanna take that file and concatenate it with our styles CSS. The one that's compiled from the s CSS file. And we're doing this because we don't want to load multiple CSS files, we just want to load a single one. And the way to concatenate it is with a plugin called concat. And that plugin can be installed, with npm install grunt-contrib-concat. This is a plugin by the Grunt team. Also save it as a dependency. Okay and we have an error here. Let's see, did I type the, yeah, sorry. I didn't type the correct name so I'm gonna say grunt-contrib-concat, okay that's correct. Okay let's go ahead and load the plugin here and let's try the task. Okay, so for the task, what we're doing is we're taking styles.css from our app folder, which is this. We're concatenating it with all the CSS files found in the styles folder under bower right here, where is it? Sorry, this one, in our case, we just have normalized.css right now. And the destination file should be styles.css. So we're basically taking this file, and we're appending everything in here to it. So now, if I do grunt concat, It merged these two files as you can see here. Great now let's also add this to the watch task because I want the concatenation to happen whenever I change something into my scss and I compile it, right. So what's going to happen is I'm going to execute the sass task first to compile scss to css, and then I'm going to concatenate them, concat:css. So now, let's give it a go. If I open my server again, Grunt. And let's say I change the scss file I'm gonna set this to red. Notice what's happening the sass:dev task is run, the concat task is run after that. And the result is this styles.css with the new color value and of course the browser is reloaded. All right, let's exit the watch task here. And let's see about this jquery. How exactly can we use it? Now, for the jquery, we want to take it, concatenate it with our scripts.js file and minify it, right? That's what we're gonna do. Well, actually, we're gonna minify it in the build stage. But on the dev stage, we're gonna do this concatenation. And we're going to achieve that with the help of a plugin called uglify. Now we're gonna say npm install grunt-contrib-uglify, --save-dev again and so I'll load the plugin here and write the task. Now the task, we're setting the dev target here and it's gonna take a few options. It's gonna beautify it. That means it's gonna make the code look good. And then go false, compress false, we don't want it minified and we're gonna preserve comments. So what we're doing is we're saying take all the files from source.js which is this folder here. And concatenate them with the files from source bower.js which is this one here. And then put them all in the js folder here. Now if we do grunt uglify, let's see uglification failed. Uglification failed because the source JavaScript file that I wrote here is not correct. We did that to test the JS hint folder. Okay so if I do that again, yep it created this scripts.js file in my js folder and it contains both the code from my scripts file as well as jQuery. So now we're gonna tie this into the watch task. Right, let's see, watch, watch, where is it? There it is watch js. So we're gonna run jshint, and then we're gonna run uglify:dev. So whenever I change one of the JavaScript files run this task first and then followed by this one. So now if I, Open my server here and I change scripts.js, if I remove this console log here It's gonna run. It's gonna do the lint first and then uglify and it's gonna create this bit which currently just contains jquery. Well, that's pretty cool right? The way Bower works with Grunt and how you can access a bunch of libraries and integrate them with your own files, I think it's a real time saver. Now we've covered the development part of our workflow. The stuff that helps us when we're developing the product. But what about when we're finished and we want to ship the whole thing to a client? Well that's coming up in the next lesson where we're going to create the build task. See you there.

Back to the top