What the Heck Are npm Commands?

As a package manager, npm can also execute tasks similar to earlier command line task running tools such as Grunt and Gulp. After installing the Sass package in the previous chapter, we can start using it!

Guide Chapter

1. Who is this guide for?
2. What exactly does "npm" mean?
3. What is the command line?
4. What is Node?
5. What is a package manager?
6. How to install npm?
7. How to install npm package?
8. What is the npm command? (Your current location!)
9. How to install an existing npm project?

In-depth npm command

Open the package.json file in the test folder, you won't see much content at the moment; there is only one dependencies attribute, and there is currently only one dependency:

 <code>{ "dependencies": { "sass": "^1.43.4" } }</code>

However, the package.json file contains much more than dependencies. It also contains a lot of meta-information about the project. The most interesting part of it is an optional but very useful property called scripts .

Remember that all sub-dependencies of Sass are recorded in the automatically generated package-lock.json and should not be edited manually. package.json usually only contains top-level dependencies, and we can freely customize it.

scripts object in the package.json file allows you to create commands that can be run in the project to help you handle various tasks, whether it is a single run or a continuous running process. Typically, these "tasks" are used to start locally developed development servers, compile resources, and/or run tests. In fact, a start or dev command is often built into a project to handle all tasks you may need to run simultaneously, such as compiling Sass and JavaScript in order.

We don't have any scripts to run yet, but let's fix this!

Example: Compile Sass into CSS

In the scripts section of the package.json file, we can access all installed packages. Even if we can't type the Sass command directly into the terminal right now, we can run the Sass command as part of the npm script.

If Sass is installed globally (which means a system-wide installation, not in a specific project folder), we can run the Sass command in the terminal. So far, we have only installed Sass to this folder (this is the default behavior when installing packages). However, the global installation will make the Sass command available anywhere on the system.

First, paste this code block into your package.json file immediately after the beginning { curly braces:

 <code>"scripts": { "sass:build": "sass style.scss style.css" },</code>

The JSON syntax is very strict. If you have problems, try running the contents of the file using the JSON validator.

This gives us access to <code>npm run sass:build</code> script, which will compile Sass to CSS for us!

The name of the command does not matter, as long as it is a continuous string. It is also worth noting that the colon (:) does not have any special effect here; this is just a convention, as using build or sass alone can be too general.

If you have used the Sass command before (or you looked in advance), you may know that this means we also need to create a style.scss file in the root of the project folder. Let's do this and put some arbitrary Sass code into it.

If you want to copy and paste, here is the Sass code I use:

 <code>$myColor: #ffd100; .a { .nested { .selector { color: $myColor; } } }</code>

marvelous! Save the file as style.scss in the project root directory, and then let's try to run the new command:

 <code>npm run sass:build</code>

Once this task is complete, you should immediately see two new files appearing in the project folder: style.css and style.css.map .

If you prefer, you can open the style.css file (which contains compiled CSS code) to verify that it is indeed what we expect:

The Sass package even compiles a source map for us, which allows us to see which styles come from which .scss files when checking styles in the browser's DevTools. Awesome!

If you encounter an error: double check the syntax in package.json to make sure it is a valid JSON (you can use the online JSON validator here), and your .scss file contains a valid Sass (which is an online Sass converter). Another thing to check is whether the file name matches the file name in the command.

Create development-only commands

This is nice, but when we do development, we may get tired of running the command over and over. So let's set up a second command, telling Sass to monitor the file for us and recompile it automatically when we save the changes!

Add the following into the scripts object in package.json :

 <code>"sass:watch": "sass style.scss style.css --watch"</code>

Important Note: Make sure there is a comma (,) between the two scripts. The order doesn't matter, but the comma between them is important. Again, JSON is very strict, so rely on the JSON validator if necessary.

Now, if we run sass:watch (not to be confused with sasquatch), you will see a message in the terminal that says "Sass is monitoring changes. Press Ctrl-C to stop".

If you now open the style.scss file, make changes and save, you should see a message popping up automatically in the terminal confirming that Sass has been recompiled to CSS:

Now this is useful! Not only that, once we submit these files to our repository, we will have the exact instructions to install and run Sass, and use a simple command – as will everyone else involved in this project!

We will end this test project. It is useful to see how to get started, but most of the time, you will use a preconfigured project instead of creating the npm command from scratch, which is exactly what we will do in the last chapter of this npm guide.

Final instructions for installing npm package

You should know that there are actually two ways to install the npm package, which one you want depends on whether the package should be part of the production build, or whether it is for purely development purposes.

• npm install (or npm i ) is the standard (and default) method for adding packages to projects.
• npm install --save-dev (or npm i -D ) only adds packages to your "development dependencies", meaning they are only installed when the project is developed and not when the final production version of the project is built.

Packages installed as development dependencies may include test libraries, code checking tools, preview servers, and other tools that only help you during development. They are not usually used to compile or run the website itself.

There is also a final flag worth knowing: npm install --global (or npm i -g ). This is how to install the package globally, as we discussed when installing Sass earlier. For example, if you want to be able to run sass anywhere on the machine, you can use this method. Other common use cases for global installations might include the CLI tool you wish to use anywhere, or even another package manager, such as Yarn.

Next steps

We are about to finish our journey! One more thing you should know, and everything you need to quickly start an existing project using npm. So, suppose you inherit a project using npm. Where did you start? How do you ensure you continue to work with others? This is the focus of the last section of this npm guide.

← Chapter 7 Chapter 9 →

The above is the detailed content of What the Heck Are npm Commands?. For more information, please follow other related articles on the PHP Chinese website!