Join Ray Villalobos for an in-depth discussion in this video Using the exercises for this course, part of Tooling with NPM Scripts.
- [Narrator] All of the files for this course are freely available in GitHub for all users at this URL. In GitHub you'll be that the project is organized in branches. Each branch corresponds to a video in the course. They're named according to the video that they correspond to. So if you see a b at the beginning, those would be the files for the project at the beginning of the video. And if you see an e at the end, it means that those are what the files look like at the end of the video.
You can clone this repo into your local hard drive if you want to follow along. To do that, I'm going to click right here and copy this URL, and then move over to a terminal application. On a PC you want to use a Linux-compatible terminal application like Git BASH, Cygwin, or the new Bash commands that are available in Windows 10. The best way to work with the project is to clone all the branches. And in order to do that, you need to have Node.js and Git installed.
You can get Node.js at this URL, and Git right here. When you install Git, make sure you add the Git Bash terminal in Windows. It makes running the commands more consistent. Let me show you how to clone all of the branches for this project. So I'm gonna go over to my terminal, and I wanna make sure that I'm on the desktop so I'll do a cd, tilde slash desktop, and then I want to create a directory for this project. I'll use mkdir, and then type in any name for this project.
I'll call it npmtooling. I wanna switch over to that directory with a cd command. Now I'll issue a git clone command and add the bare option. This is going to get just the git folder from our repository. Now I'm gonna paste that URL that I got from GitHub, and add an additional dot git at the end. Next, I'm gonna change the configuration for this project by issuing a git config minus minus bool core bare false.
This will turn the project from just an invisible git folder to a real repo. Now it's time to reset the head pointer, so we'll issue a git reset hard. And now if we open up this folder, we should see the files for our project. We also need to issue an npm install commmand which will install all of the project dependencies. Now that everything's installed, I can issue a clear command to clear the terminal, and then issue a git branch command to see all the branches available for my project.
If I wanna switch to a specific branch, I can issue a git checkout command and take out one of the branches. So if I go to branch 0301b, that means that in the third chapter in the first movie, I want the code to match what was at the beginning of that video. Now I can open this in my favorite text editor. Now if I make a change to some of these files as I'm working through the exercises, I'm just gonna type a space right here to show you this, when I save the file and I try to checkout another branch, let's say that I want the files at the end of the video.
You may get a message like this. That's because it wants you to save the progress for what you've been doing. So if I wanted to just switch to another branch and ignore any changes I may have made, you can issue a git stash as well as a git checkout, and then the branch that you want. It will go ahead and ignore any of your changes and switch you to the proper branch. If you need more help understanding Git or GitHub, take a look at the course up and running with Git and GitHub.
So now that you know how to get to everything, let's get started tooling with npm scripts.
- Creating an npm script
- Managing script types
- Processing Sass
- Transpiling ES6
- Organizing scripts
- Recompressing for production