Using NPM and Sass via CLI

Once you've completed familiarising yourself with the CLI from the previous section, we'll begin using NPM and Sass from the CLI. NPM (Node Package Manager) is a tool used for embedding third-party packages/snippets into our projects, which we can then make use of in our own sites and apps. We previously also installed Composer, which also is a package manager but for server-side PHP, whereas NPM is for client-side JS once compiled. (Both are the de facto standard for each language respectively.)

1. Initiating NPM

Now to begin using them, in the CLI we need to change directory (cd) into the git repo that we previously created and cloned onto our local machines. Within this project we'll setup NPM and to do so we must first run:

This will initiate your project with NPM. You'll be asked a series of questions, you can populate them if you desire but they're not important at this stage so you can hit enter at each question. This will create a package.json file which provides NPM with all the configuration details and package dependencies for the project, at the moment this will only be a skeleton file (i.e. no dependencies).

2. Installing NPM Packages

We're going to install our first NPM package to use within our site and this will be Sass, which is a CSS pre-processor. It provides additional advanced capabilities to CSS and our sass files (.scss) will need to be compiled to provide .css files. Compiling is performed by the command line and our HTML should embed the .css file(s) and not the .scss.

Now whilst still in your git cloned repo within the CLI, run:

Here we're telling NPM to install the Sass package. The command may hang for a while as the package is being downloaded and you may see many messages within your terminal.

3. Understanding NPM Structure

Once the above is completed, if you run ls within the CLI you will see two new files and one new folder:

• package.json – Our NPM configuration file, which includes the packages we want to install for our current site/app.
• package-lock.json – This is auto-generated and includes a list of all the packages we require and a version number for each package. This is useful when collaborating with other developers, so that NPM can download the same versioned packages, ensuring all developers have the same copy of code.
• node_modules (folder) – This is where all our NPM package downloads will be stored for the current site/project.

4. Committing NPM Requirements to Git

Now we want to commit our NPM package requirements to our Git repo and there is a specific standard way we perform this.

We do not want to commit our node_modules folder as it is not our own code (therefore does not need to be version controlled) and that the folder can also be large in file size depending on the amount of packages we install. By simply providing the package.json file, NPM can download and generate the node_modules directory on any machine.

We need to tell git to ignore the node_modules directory and we can do this by creating a .gitignore file (notice the full stop in front of the filename). Please do the following:

1. Within the CLI (again in the same directory as your cloned repo) create a new file called .gitignore (using nano).
2. Add /node_modules and save the file.
3. Now commit and push the .gitignore file to your repo.

Once you've committed the .gitignore file, the node_modules directory will still remain on your project but will disappear from git. You can ignore any file or folder using the .gitignore feature, by adding the path to the file/folder you want to ignore on a new line.

You can now commit your package.json and package-lock.json files to your git repo.

5. Adding Scripts/NPM Commands to Your Project

Now that we've installed NPM, Sass and committed our code to git, we want to begin using the sass package. To do so we first need to add a command to the package.json file allowing us to compile our Sass code. So please do the following:

1. Open the package.json file (using either the CLI + Nano or the Atom editor).

2. You will see a few sections: name, version, description, scripts, and etc. Under scripts you will also see an example 'test' is already provided. At the end of the test line, add a comma and then paste the following on the next line:

   "sass": "sass --watch src/scss:dist/css"
3. Then save your package.json file and commit the changes.

The command we've added watches the 'src/scss' directory for changes to any .scss files; any changes will then be compiled to css and saved to the 'dist/css' directory. So let's go ahead and create those folders and files.

Within your repo locally (on your machine) create two new folders called src and dist. Inside 'src', create a new folder called scss. Inside the scss directory create a new file called style.scss.

Now in the CLI run npm run sass which will execute the command we added to the package.json file. The terminal will now keep watch of all your scss files in the directory and any changes you make will be compiled on the fly. It's useful to keep it open but to exit the watch you can hit CTRL + C. Keeping a watch on the files is useful during development so having another terminal window on watch is recommended as you may still need to use the terminal for other tasks.

6. Update Your Stylesheet Link

Now in your index.php file we created last week, update the stylesheet link to dist/css/style.css which points to the compiled version of our Sass file. As our stylesheets are now compiled we can no longer edit .css files directly as they will be overwritten on each compile, therefore any changes must be added to our style.scss file (the SCSS file). This is important to remember otherwise work can be lost, to edit the .scss files and not .css.

We have now setup Composer and PHP on our machines, NPM and Sass on our repo. Well done for making it this far as I know it can be tedious reading and following these guides. But now that we've got the setup out the way, we can begin using Sass.

I'd like you all to get comfortable with Sass (technically it's SCSS, which is a newer version of Sass). Please see the next section to get an introduction to the features of Sass/Scss.