What the Heck Are npm Commands? | CSS-Tricks

npm is, as you now know, a package manager. But like previous, similar tools that run tasks on the command line, like Grunt and Gulp, npm can also run tasks—which is perfect for us because now that we’ve installed the Sass package in the previous class, we can start using it!

Guide chapters

  1. Who is this guide for?
  2. What the heck does “npm” mean?
  3. What the heck is the command line?
  4. What the heck is a knot?
  5. What the heck is a package manager?
  6. How the heck do you install npm?
  7. How do you install npm packages?
  8. What the heck are npm commands? (you are here!)
  9. How the heck do you install an existing npm project?

jump to npm أوامر commands

open the package.json file in your test folder, and you won’t see much now; Just dependencies A property, with only one dependency so far:

{
  "dependencies": {
    "sass": "^1.43.4"
  }
}

the package.json The file is home to much more than just dependencies. Contains a lot of meta information Around your project too. One of the most interesting bits is an optional, but very useful property called scripts.

Remember that all child dependencies of Sass are tracked package-lock.json, which are automatically generated, and should not be modified manually. package.json In general it only contains the top level dependencies, and we can customize them freely.

the scripts object in your package.json file allows you to create commands that you can run in this project to handle various tasks for you, either as a single method or as a continuous process. Generally, these “tasks” are used for things like starting a local development dev server, compiling assets, and/or running tests. In fact, there is often one song start or dev Built-in command in projects to deal with All Tasks you may need to run concurrently, such as compiling Sass and JavaScript in the same sequence.

We don’t have any scripts to run yet, but let’s fix that!

Example: Translate Sass to CSS

inside scripts part of package.json file, we have access to all our installed packages. Although we are simply unable to write sass The commands are in the terminal now, we can run it sass Commands as part of an npm script.

we can run sass Commands in terminal if Sass is installed globally, which means that it is system-wide, rather than installed in a specific project folder. So far, we’ve only installed Sass to this folder (which is what happens by default when you install a package). But the global installation will make sass Commands available anywhere on the system.

Start by pasting this block of code into a file package.json File, immediately after opening { curly arc:

"scripts": {
  "sass:build": "sass style.scss style.css"
},

JSON syntax is very strict. Try running the contents of the file through the JSON checker if you get stuck.

This gives us access to a file npm run sass:build The script, which will translate Sass to CSS for us!

The name of the command is unimportant, as long as it is one connected string. It is also worth noting that the colon (:) Don’t do anything special here ; It’s just a convention, since then build or sass On its own it would probably be too generic.

If you’ve worked with Sass commands before – or if you’re looking forward – you probably know that this means we also need to create style.scss file in the root of our project folder. Let’s do that, and throw some arbitrary Sass code into it.

Screenshot of a VS Code app with open style.scss file.  The file contains a Sass color variant and one delimiter nested with a depth of three levels.
the style.scss The file is located along with JSON files and . files node_modules The folder is at the top level of the project folder.

This is the Sass code I used, if you want to copy and paste it:

$myColor: #ffd100;

.a {
  .nested {
    .selector {
      color: $myColor;
    }
  }
}

Wow! Save this file as a file style.scss in the root of your project, and let’s try to run our new command:

npm run sass:build

Once this task is complete, you should see two new files appear almost immediately in your project folder: style.css And style.css.map.

Screenshot of a VS Code app with style.scss file open and terminal open below with npm commands, including npm run sass:build.
After running npm run sass:build, you should see the style.css and style.css.map file appear at the top level of the project folder.

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

Screenshot of a VS Code app with a compiled style.css file open showing how the npm command to run Sass processes Sass code into plain CSS.  Below is an open terminal showing which npm commands were used.
Look at that, pure CSS!

the sass The package goes further to compile a source map for us, letting us know what patterns came from what .scss files when we scan them in the browser’s DevTools. how beautiful he is!

If you encounter an error: Double check the syntax inside package.json To make sure it’s valid JSON (here’s an online JSON checker you can use), and that you .scss The file contains a valid Sass (here is an online Sass converter). Another thing to check is that the file name matches the name in the command.

Create a development order only

That’s great, but we’ll probably get tired of running this command over and over as we develop. So let’s set up a second command that tells Sass to He watches The file is for us, and automatically recompiled any time we save changes!

Add this inside a file scripts object in package.json:

"sass:watch": "sass style.scss style.css --watch"

important note: Make sure there is a comma (,) between the two texts. The order does not matter, but the interval between them is important. Again, JSON is strict, so rely on a JSON checker 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 open a file style.scss Now file, make a change, and save it, you will automatically see a message pop up in the terminal confirming that Sass has been recompiled in CSS:

Screenshot of text from the terminal saying that Sass is monitoring changes.  Press control plus c to stop.  Below is that the style.scss file is compiled into the style.css file.

right Now this useful! Not only that, but once we commit these files in our repo, we’ll have the exact directions to get Sass up and running, with a simple command – and so does everyone else working on this project!

We’ll leave things out here in this pilot project. It was helpful to know how to get started, but more often than not, you’ll get to a preconfigured project, rather than creating npm commands for them from scratch, which is exactly what we’ll do next, eventually detaching from this npm guide.

Final notes about installing npm packages

You should know that there are actually two ways to install npm packages, and which one you want depends on whether the package is intended to be part of a production build, or if it’s only for development purposes.

  • npm install (or npm i) is the standard (and default) way to add a package to a project.
  • npm install --save-dev (or npm i -D) only adds the package to the ‘dev dependencies’, which means it will be installed only when Development project, not when creating the final production version of the project.

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

There is one last science worth knowing: npm install --global (or npm i -g). This is how to install the package globally, as we discussed a little while ago when installing Sass. You can use this, for example, if you want to be able to run sass Anywhere on your device. Other common use cases for generic installation may include CLI Tools you want to use everywhere, or even another package manager, like Yarn.

What then

We’re almost done with our trip! There’s one last thing you should know, how to use npm to quickly spin everything you need into an existing project. So, let’s say you inherited a project that uses npm. Where do you start? How do you ensure that you are constantly cooperating with others? This is the focus of the last section of this npm guide.

Leave a Comment