npm命令到底是什么

正如你现在所知，npm是一个软件包管理器。但就像类似的、早期的在命令行中运行任务的工具，如Grunt和Gulp，npm也可以运行任务--这对我们来说是完美的，因为现在我们在前一章中安装了Sass包，我们可以开始使用它了!

进入npm命令

打开你的测试文件夹中的package.json 文件，你现在不会看到什么；只有一个dependencies 属性，到目前为止只有一个依赖关系:

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

然而，package.json 文件的内容远不止是依赖关系。它也包含了很多关于 你的项目的元信息。其中最有趣的部分是一个可选的，但非常有用的属性，叫做scripts 。

请记住，Sass的所有子依赖关系都在package-lock.json ，它是自动生成的，不应该被手工编辑。package.json 通常只包含顶级的依赖关系，我们可以自由定制它。

你的package.json 文件中的scripts 对象允许你创建命令，你可以在该项目中运行，为你处理各种任务，可以是一次性的，也可以是持续运行的进程。一般来说，这些 "任务 "是用于启动本地开发的开发服务器、编译资产和/或运行测试等事情。事实上，项目中经常会有一个单一的start 或dev 命令来处理你可能需要并发运行的所有任务，比如在同一序列中编译Sass和JavaScript。

我们还没有任何要运行的脚本，但让我们来解决这个问题吧!

例子:将Sass编译成CSS

在package.json 文件的scripts 部分，我们可以访问所有已安装的软件包。尽管我们现在无法在终端简单地输入sass 命令，但我们可以将sass 命令作为npm脚本的一部分运行。

如果Sass是全局安装，也就是全系统安装，而不是安装在特定的项目文件夹中，我们就可以在终端运行sass 命令。到目前为止，我们只把Sass安装到这个文件夹中（这是你安装软件包时默认发生的情况）。但全局安装将使sass 命令在系统的任何地方都可用。

首先将这段代码粘贴到你的package.json 文件中，就在开头的{ 大括号之后:

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

JSON语法是非常严格的。如果你被卡住了，可以尝试通过JSON验证器运行文件的内容。

这样我们就可以访问一个npm run sass:build 脚本，它将为我们把Sass编译成CSS

命令的名称并不重要，只要是一个连续的字符串就可以了。另外值得注意的是，冒号(:)在这里并没有什么特别的作用；它只是一种惯例，因为无论是build 还是sass ，其本身都可能太通用了。

如果你以前使用过Sass命令，或者如果你在前面偷看过，你可能知道这意味着我们还需要在我们项目的根目录下创建一个style.scss 文件。让我们这样做，并把一些任意的Sass代码扔进它。

style.scss 文件与JSON文件和项目文件夹顶层的node_modules 文件夹放在一起。

这是我使用的Sass代码，如果你想复制和粘贴它:

$myColor: #ffd100;

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

很好!在你的项目根部将该文件保存为style.scss ，让我们试着运行我们的新命令:

npm run sass:build

一旦这个任务完成，你应该看到你的项目文件夹中几乎立即出现两个新文件：style.css 和style.css.map 。

运行npm run sass:build ，你应该看到style.css和style.css.map文件出现在项目文件夹的最高层。

如果你愿意，你可以打开style.css 文件--其中包含了编译后的CSS代码--来验证它确实是我们所期望的。

看看这个，纯CSS!

sass 包甚至还为我们编译了一个源码图，当我们在浏览器的DevTools中检查这些文件时，可以看到哪些样式来自于哪些.scss 。多么好啊!

**如果你遇到一个错误：**仔细检查package.json 里面的语法，确保它是有效的JSON（这里有一个在线JSON验证器，你可以使用），并且你的.scss 文件包含有效的Sass（这里有一个在线Sass转换器）。另一件要检查的事情是，文件的名称与命令中的名称一致。

创建一个仅用于开发的命令

这是相当整洁的，但我们可能会厌倦在开发过程中一遍又一遍地运行这个命令。因此，让我们设置第二个命令，告诉Sass为我们观察文件，并在我们保存更改时自动重新编译它。

在package.json 的scripts 对象中添加这个命令:

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

重要提示:确保这两个脚本之间有一个逗号(,)。顺序并不重要，但它们之间的逗号很重要。同样，JSON是严格的，所以如果需要的话，请依靠JSON验证器。

现在，如果我们运行sass:watch （不要与sasquatch混淆），你会在终端看到一个信息："Sass正在观察变化。按Ctrl-C来停止。"

如果你现在打开你的style.scss 文件，做一个修改，然后保存它，你应该看到终端上自动弹出一条信息，确认Sass已经重新编译成CSS。

现在*，这就很*有用了!不仅如此，一旦我们将这些文件提交到我们的 repo，我们就会有确切的指示，通过一个简单的命令来安装和运行Sass--其他在这个项目上工作的人也会这样做

我们将把这个测试项目的事情留在这里。看到如何开始是很有用的，但更多的时候，你会去找一个预先配置好的项目，而不是从头开始创建npm命令，这正是我们接下来要做的，在这个npm指南的最后一章。

关于安装npm包的最后说明

你应该知道，实际上有两种安装npm包的方法，而你想要一种取决于该包是要成为生产构建的一部分，还是纯粹用于开发目的:

• npm install (或 )是向项目添加软件包的标准（和默认）方式。npm i
• npm install --save-dev (或npm i -D)只将软件包添加到你的 "开发依赖项 "中，这意味着它们只在开发项目时被安装，而不是在构建项目的最终生产版本时被安装。

作为开发依赖项安装的包可能包括测试库、打火机、预览服务器和其他只在开发过程中帮助你的工具。它们通常不用于编译或运行网站本身。

最后还有一个值得了解的标志：npm install --global （或npm i -g ）。这是如何在全局范围内安装一个包，正如我们早些时候在安装Sass时讨论的那样。例如，如果你希望能够在你的机器上的任何地方运行sass ，你可以使用这个。全局安装的其他常见情况可能包括你想在任何地方使用的CLI工具，甚至是另一个包管理器，如Yarn。

下一步工作

我们的旅程已经接近尾声了!还有最后一件事你应该知道，如何使用npm来快速启动你在现有项目上需要的一切。那么，假设你继承了一个使用npm的项目。你从哪里开始？你如何确保你与他人的合作是一致的？这就是本npm指南最后一节的重点。