Join Ray Villalobos for an in-depth discussion in this video Exploring our workflow, part of Grunt.js: Web Workflows.
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.
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.
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.