YEOMAN TUTORIAL - Master Front-End Workflow with Yeoman, Grunt and Bower

Key Takeaways

in this video we're going to be learning Yen which I believe is one of the best and most awesome tools that's come to front-end development in a long time uh if you are learning HTML CSS JavaScript or if you're using those languages day in day out for your job you got to know what yman is uh and you need to know these tools you're going to be really happy uh to know how this all works so let's just get into it first thing you'll need is you'll need node.js installed on your system if you don't have that installed go to nodejs.org and click the green button I'll leave it at that it installs on Mac Windows Linux just fine and then you're going to need to open up the dreaded terminal that a lot of people avoid because they think it's terrifying but I promise it's not so on Apple that's uh utilities terminal and on PC you just hit Apple or Windows run and then type CMD here's how you know if node is installed you go node DV and that'll give you your version 0.10.1 two if that says node command not found or something like that node is not installed on your computer or if you're on Windows you might have to reboot after installing it so that's it nodes installed so now you have access to the npm command which is node package manager you're going to go npm install dasg Yo which will globally install that's what the - G is for globally install Yen uh and it's very important to put that- G in there it's going to put it in the folder you're in and you won't be able to run it as a command so we did that and let's also install npm DG generator web app this is kind of like their default did I not npm install I didn't install there we go so web app is kind of like their basic hey you're building a website this is kind of a one- siiz fits-all website generator what yman does is they give you a set of generators and anyone can actually add their own generator uh to yman and you can automatically generate things so now wherever I go I can create a folder and I can have yman build me a whole web app so let's go CD space code that's where I keep all my code make directory test app there we go so now I'm in the code test app directory and I'm just going to hit yo yo okay so then it gives me a list of all the install generators as you can see I have quite a few installed because I've messed around with a lot of them I'm just going to Arrow key down to web app and hit enter and then what would you like to keep it easy I'm going to drop SAS off I'm going to drop I'm going to drop all these off but if you if you know how to use SAS definitely keep sass check bootstrap it'll put it all in there for you um but I'll just check them all off with a space bar for now and hit enter and there you go it's building me a web app and it's grabbing everything I need to build that web app um it's going to give you a lot of cool stuff there you go it's done gives a little shout out to everyone who made it Addie Osmani especially killer guy awesome guy I don't know him personally but I'll pretend I do because he's amazing and now all you need to do is type grunt server and what that's going to do is it's going to start up a web server on your own computer using node.js and it's going to open your application which it did on my other window here so I'll pull it up here now we have test app and we are Lo we are looking at our computer which is this address right here is the web address for our machine um and there you go that's a website that it made for us so I'm going to go ahead now and pull that over here let me go ahead and add a folder so we can see what I just made Code test app there you go my test is something I was doing earlier let me get rid of that guy okay test app right here this is all the files it just made for us in the test app directory um and let's look at the app folder and go to index.html it already made us a website and included a lot of stuff if you've used HTML 5 boilerplate then a lot of this stuff looks really familiar to you uh and it basically included HTML5 boilerplate um and here's our web page and it did some cooler things than that it included live reload so if you have the live reload extension on Chrome you'll see this guy right here and now any changes I make to the web page it'll refresh automatically I hit save and there we go it refreshed uh to get the live reload extension you just go to settings extensions and then get more extensions and you can see I got live reload here now and you just want to make sure that that is checked if it's if it's open in the middle then it will not be live reloading so now any changes I make on my web page or on my CSS or on my JavaScript it will be listening and automatically refresh my page so instead of alo alo I can go hello hello actually speak English there Mr Addie um and then let's go to Styles it also included some main CSS for us already let's see what this is this is the hero unit well every hero unit needs to be red of course and then oh color there you go color red you notice CSS just takes a little bit and there you go now everything's red any new rules I add here real time are just automatically going to update it is awesome for web development now let me show you let's go into a little bit more detail kind of what yman does is it gives you an easy way to just jump in and have your development workflow be faster and then as you work with yomen you can actually learn some top topnotch ideas and ways of doing things but you don't have to know them to start using yman you don't have to know what else going on right now you just have to know H it gave me this great website and it real time is going to refresh for me so let's go into a little bit more of what it's doing for you let's look at gruntfile.js you notice I did grunt server oh and by the way when you're on here just hit uh contrl C to cancel that at any point in time once again grunt server it's going to run your whole server it's going to open up your window see opens it for me nice um and then you cancel it at any time what that's doing is it's booting up your web server and then it is waiting and it's listening it's running what's called grunt watch and it's going to be listening for any saves on any of your files and it's going to reload your web page as that's going on so here's kind of what's going on in grunt this will totally freak you out if you're not used to JavaScript it'll totally freaky out so just kind of sit in it for a little while till you can understand a couple lines it's not it's not that bad but it's also not incredibly easy either if you don't know JavaScript uh it's running watch which watch just it watches some Java JS and it's listening to all these files basically anything in my yman app scripts folder that ends with JS it's listening to that and when it listens to that it's going to live reload um it's also going to listen to Styles so if I make any changes to my Styles file Styles folders CSS files it's going to automatically reload um and that's pretty much it this is the connect thing this is what tells it to open up a server on Port 9000 um it's also going to do some unit testing for you if you guys are into unit testing which I hope you are then it created all that for you here if you're not into unit testing I'll leave it out of this tutorial but it built your whole unit test file for you there which is super nice um it's going to JS hint all your JavaScript and mocha is what it's going to be using for your actual some of your unit tests and let's look at another thing it did it gave you a bower Json so it automatically put jQuery on your page um here's kind of what Bower is do I want to get into bow yet I'll get into Bower a little bit later so uh let's look all the way down at the end of our grunt file and okay here we go register task so we've got a few grunt tasks here these are the things that you can actually do grunt server um oh and look it's been deprecated so now it tells you to use grunt serve okay grunt serve is the one we should be using now that's that's a new addition grunt serve with that that boots up the server and it watches and then grunt test this is if you want to write unit tests and run those then you run grunt test and then grunt build is what you do when you're ready to put your website onto the interwebs for the whole world to to see uh and what that's going to do is that's going to actually build everything out uh it's going to compress all your CSS style sheets let's actually run that real quick what you can do is you can put all these files with fdp or whatever you're using straight up onto your website and call it a day uh but what you can also do is if you want to make use of a lot of great things going on you can just run grunt build and now it's going to start minifying your JavaScript it's going to Minify all your CSS and it's going to uh there we go and it's going to dump it all into the dist folder which stands for distribution and this is your actual website right here let's take a look at the difference look at this it's minified so there's way less code going on here it's going to load a lot faster another thing you'll notice your styles are minified it also minified everything down all the way those are a lot smaller and your JavaScript got minified and all the vendor all the jQuery and everything else you're using got minified as well so this is actually what you're going to put up on the Internet uh there's a lot of best practices that went into this that is really going to make your website a lot more performant uh so that's kind of a lot of the built-in things it gives you let's look into this index.html and find out what's going on with that let's say you want want to add some more CSS files to your web page you don't just want to do main.css say you want to add you know something for the rest of your site let me say this as I don't know blog. CSS so then all you do is copy and paste this link and now we add blog. CSS and so now it's going to load both of these files into our web page and when we run grunt build it's going to concatenate both of those into one file and Minify them together we're still only going to see this one file that's really cool if you scroll down to the bottom of your page exact same thing happens with your JavaScript it puts all your javascripts in here um and it's basically pull in a bower file for you here's our scripts main JS so let's see our scripts main JS it's logging alo alo right now let's say we want to save this to blog. JS now it's going to console log blog blog um we'll want to get that on our page it works the exact same way scripts blog so now when we're in development mode it's going to load in all the files individually so we're going to see console errors uh but when it goes time to run the grunt build it's going to build out one minified scripts file and it's going to take care of that let me look let me show you real quick what's what this whole bow thing is all about one of the the things that frontend is finally caught up to is the concept of package management of if it's the exact same file that can be downloaded for all the computers all the people working on your project you should not have to put that file in your project you should be able to create a package file which is this bower.json and say it has a dependency of jQuery and then what then all you have to do is the person downloads your project from GitHub and they do Bower install which I'll do here and we do Bow install it's going to go ahead and grab all your dependencies so here's kind of let's say we also wanted to add backbone.js to our file so we go bow install backbone I think it's called backbone it might be called backbone.js yep there we go it's downloading backbone and you'll notice it's going to change this file here in a couple seconds in just a couple seconds oh I didn't hit save power install backbone DS and it will actually save it to your B Json file capital S come on get it together will okay so uh bow install backbone what that command did is you'll notice up here I have my Bower components folder and now I have jQuery and I have backbone and backbone requires underscore so it automatically grabbed that for me as well so those are now in here and when I hit- S it saved it to my bower.json file so I'll include this in my GitHub repository and now when anybody downloads it from GitHub they just go bow install and it's going to grab everything that I need it knows I have everything so let me actually go ahead and delete some stuff so when I I'm not going to include this B components in my GI UB repository that's a whole lot of files that don't actually have to do with the code I'm writing I'm just using them for my web app so all I do is I include this in my file that says hey I need jQuery and backbone you get it you run Bower install and it's now going to grab jQuery it's going to grab backbone and backbone is going to grab underscore there you go see all three are in there and then this references Bower components jQuery jquery.js so if I also want to make sure underscore gets added then I just copy and paste these and they'll end up in my build as well let's go underscore and what is that underscore underscore.js and then backbone is backbone backbone.js there you go so now I've got all three files and they're all coming into my web page and if I now run grunt build this is where the true magic takes place cuz if if this was my web page now I'm loading one two three four five JavaScript files and I have hardly even written a line of code so you can see as this thing grows and grows and grows I could be making 15 20 30 get requests I don't want to have that many script files load up when I open up my page I want them to to be much more compressed so now if I look at my disc folder I've got Scripts I've got vendor and the vendor is all the backbone underscore and jQuery files minified uh concatenated together and then I have my main JS which are my two JavaScript blog JS and Main JS they've been they've had all the magic done to them they're both together yippe it's awesome so that is pretty much yman and that's uh a pretty quick introduction to what it does for you uh there's some other ways you can depending on how they built the generator you might be able to add a view might be able to generate a page um but that's pretty much an intro to Yen hope it helps and have an awesome day