Exploring our workflow - Grunt.js Tutorial

- Before we get going preparing our workflow, I wanted to show you an example of the project that we'll be working with. It's a simple single-page layout that was built with HTML, CSS and JavaScript. I used Sass to generate the styles for this project and I added some scripts that allow you to right click on photos to see a preview as well as see a larger version of the images when you click on them. I'm also using Mustache.js to pull in a JSON file so that this list of speakers at the bottom gets rendered from a template. Now this course doesn't focus on how to write any of this code. I've created all of these elements in some of my previous courses. What we'll be focusing on is how to create an efficient workflow to handle typical scenarios. So if we take a look at our project folder you can see that I have a new project folder here called gruntworkflows and then inside I have several different files including this builds folder. This is where all of our regular index .html files are as well as some of the process information from our workflow. So the images folder is just a normal images folder. This css folder will have two styles sheets. One of them will be the process sass style sheet that gets generated by our workflow. The other one is a combination of any css that any of the frameworks that we're bringing in will have. So we're only bringing in Bootstrap so there's really only going to be one of these Bootstrap documents. In our JavaScript folder this _bower.js document is going to be a combination of all their scripts that we are going to bring in from this bower components folder. So this is actually using three different libraries jquery as well as bootstrap and mustache.js. All those libraries are self-contained inside this bower components folder. So you can see that if you know bootstrap this looks like the file structure for a bootstrap project, same thing with jquery as well as mustache.js. But the nice thing is that we don't have to worry about copying any of these items ourselves. This is all going to be downloaded by our workflow and all of those JavaScript files from each of these projects, is going to be combined into this bower.js file and it's going to be one long JavaScript document with everything that runs jquery, bootstrap as well as mustache.js. Our script file is going to have a combination of all the scripts that we have written ourselves, something that is not coming from frameworks, so those are going to come from a folder that is right here called components, not bower components but just components. And in here is where I have all of my original Sass code as well as the three different scripts. So you see I have a script here called pixgrid, another one called rclick which does the right clicking, and then this one called template.js which handles the templating of the JSON file. So these three scripts are going to be combined by our workflow and then placed inside this builds folder, in the development folder and in this JavaScript document. So that eventually will be this right here. So what's performing all of this magic is a special file called a gruntfile.js and here we're specifying how we want these files to be processed. So we're creating a series of tasks. This is the task that combines all the scripts together into a single document and then it adds these separators. That's pretty cool because when we look at the development JavaScript folder and we look at the script.js file, we're going to be able to see the separators where the different scripts start. So taking a look at our gruntfile.js we also have a sass processor task. This is going to take all of the sass that is in our components sass folder and process it with the expanded option, although we can make that whatever we want, and then create a style.css file that gets placed in our development folder. In addition to that we're also running a live server so that whenever we make a change on certain files, so anytime we make a change on our HTML document or on our sass file, it's going to automatically reload the browser for us. Now there's a couple of other components that you may be familiar with here. So if you were using Git, you usually see something like this _gitignore file. This has some information about items that we don't want to track. So for example you never want to include node_modules or bower_components in a workflow document because it just makes everything that you upload to get way too big and then you may notice that there is also a package.json file. This is a file that keeps track of all of the dependencies that npm, the node package manager, needs in order to do all of the processing. There's one file that you may not be familiar with and it's this bower.json document. And this is actually pretty cool and you'll learn how to work with this in this course. This has our dependencies for our project and so these two lines of code right here tell bower, which we're also using in this project, to actually go and download any of the libraries that we want. So we wanted to use bootstrap as well as mustache in this course. And bower is smart enough to know that when you download bootstrap, you're also going to need jquery. So it downloads that automatically into this bower_components and all that code gets combined and injected automatically into our _bower.js and into our _bower.css file. So it works like magic and trust me it's a really awesome workflow because everything will be automated including things like combining all of our scripts, processing our sass and automatically building all of our dependencies from any of these components that we want to use in our project. And the cool thing about this is that you're not going to have to worry about where you have to put the script for bootstrap, where you have to put the css for bootstrap making sure that you maybe put the script for jquery first and the script for bootstrap second and then where does mustache.js go in that sequence. All that is going to be taken care of by this awesome workflow that we'll be building in this course. So once everything is set up, things are going to work like magic. This course is not meant to show you the world's most perfect workflow. But it's going to show you how to work with grunt.js and bower to create your own personal workflow for any of your projects.