Set up an npm project - CSS Tutorial

- [Instructor] In this chapter, I'll walk you through some key CSS refactoring tools showing you how to set them up and how to use them. Most of these are command line tools available through the Node Package Manager which can integrate with code editors and task runners. And in this chapter, we'll focus on code editor integration and I'll use visual studio code as my example. If you're new to NPM, the Node Package Manager, or you need a refresher, I recommend watching Ray Villalobo's course Learning NPM, the Node Package Manager, which includes instructions on how to setup and configure NPM on Windows and Mac. Throughout this chapter and the next, I'll use an existing website, built by Ray Villalobos for a different course, as my example. So I'll inherit some code from someone else and then refactor the CSS to make it better and make it work for current standards. As you can see, this project is four years old, so there's some work to be done here. You can follow along using any website or you can grab a copy of Ray's original site by going to this GitHub repo. The tools and techniques I'm about to show you here in this course, work on any website and any code, so you don't need to have my exact code to work with to understand what's going on, but if you want to duplicate my environment exactly, simply go to the repo, download the entire repo by going to this button here and clicking download zip, place it onto your computer and you'll have the exact same starting point as I have. Inside VS Code, I open the folder that contains this entire repo and the first thing I'm gonna do, before I do anything else, is take out all of Ray's settings because in this case I want to build a whole new build process. Now depending on what kind of project you're working on, you'll either take the original settings and then just augment them to fit your new needs or you'll start a new thing. I want to show you how to start something from scratch but if you have existing setups you can also keep working on them and just extend them. So in my example, I'm gonna delete the following files, gitignore, jsbeautifyrc, jshintrc, gulpfile, and package.json. We'll replace some of these files later on and we'll also create new ones to work with our specific refactoring project. The first step in this entire CSS refactoring process is to set up a new NPM package configuration file for the project. As you just saw, I stripped out the original setup from Ray, so now I need to create a new one. To set up a NPM package configuration, we need to open the terminal, and here I like to use terminal built into VS Code so everything is in one place. The VS Code terminal is opened by hitting Ctrl and the back tick key on both Windows and Mac. I'm on a Windows computer here and that means the terminal opens in PowerShell mode by default. I'm gonna switch that to bash just so that there's visual consistency between Windows and Mac. The commands we put in will be the same no matter what you set the terminal to, so it doesn't really matter what you set it to. The VS Code terminal automatically opens to the current project folder you're working in. So in my case that would be Desktop and the refactor folder. From here, to create a new NPM configuration file we type in npm init and this starts up a configuration wizard that it walks us through the process of creating a package.json file. The first thing I need to set is the package name, so here I'll just call it refactor, then a version number 1.0.0 is fine, then a short description, an entry point, and in this example the entry point is in builds, development, and index.html so I'll say builds/development/index.html then a test command, I don't have any, a git repository, I don't have any, keywords, I'm just gonna leave that alone, author, that's my name, license, so this is an MIT license project, that's what I got from Ray, and is this okay, yes. When the wizard is finished I get a new file here called package.json and if I open it you'll see all that information that I put in is in this file including the description, the link to the main file, the license, the author number, and everything else. Once you have a package.json file, we're ready to start working.