使用NPM Scripts实现自动化构建

一、自动化构建简介

自动化：指的就是通过机器去代替手工去完成一些工作
构建：可以理解成转换，就是把一些东西转换成另外一些东西

总的来说，自动化构建就是把开发阶段写出来的源代码自动化地去转换成生产环境中可以运行的代码或者程序。

一般我们会把这个转换的过程称为自动化构建工作流，它的作用就是让我们尽可能脱离运行环境兼容带来的问题，在开发阶段使用一些提高效率的语法、规范和标准。

最典型的应用场景就是我们在开发网页应用时，我们就可以使用ECMAScript Next ES最新标准去提高编码效率和质量，利用Sass去增强Css的可编程性，再利用模板引擎去抽象页面当中重复的Html。

而这些用法大都不被浏览器直接支持，这种情况下自动化构建工具就可以派上用场了。我们通过自动化构建工具将这些不被支持的代码【特性】转换成能够直接运行的代码，这样我们就能在代码开发过程中通过这些用法去提高我们的效率了。

二、使用NPM Scripts实现自动化构建

2.1、分解流程

安装sass

npm i sass -D // yarn add sass --dev

安装好之后node_modules下的 .bin 目录中可以看到sass
我们直接在项目中运行命令行 .\node_modules.bin\sass

可以看到sass的用法，于是来尝试将sass转成css

转换成功

但是也有一个比较麻烦的问题了，就是我们每次都需要重复地去输入这些复杂的命令，而且在别人接手项目后会不清楚该如何去运行这些构建的任务，所以我们需要去做一些额外的事情解决这些在项目开发阶段重复执行的命令。NPM Scripts就是用来解决这个问题的。

在package.json中的"scripts"下添加一个：

"build": "sass scss/main.scss css/index.css"

npm run build 或者 yarn build即可运行
NPM Scripts也是实现自动化构建工作流最简单的方式

安装 browser-sync 模块，用于启动一个测试服务器，运行我们的项目

npm i browser-sync -D

在package.json中的"scripts"下添加一个：

"serve": "browser-sync ."

运行

npm run serve

启动服务会在默认浏览器中打开项目

目前如果在启动服务之前没有执行sass转换文件，就没有css文件可以引用。
所以我们利用npm scripts的钩子机制，在执行serve之前会先去执行preserve，将sass转换命令写在里面。

"preserve":"npm run build", // 或 yarn build

接下来我们在sass命令中加上 --watch
加上了–watch后，sass在工作时会监听文件变化，一旦代码中的sass文件发生改变，就会自动编译

"build": "sass scss/main.scss css/index.css --watch"

但是又有一个新问题了，我们执行npm run serve时会卡在sass上

安装 npm-run-all 模块

npm i npm-run-all -D

有了这个模块后，我们就可以在scripts中添加一个start命令，使用 npm-run-all 提供的 run-p，去同时执行 build命令和 serve命令，有了start命令就不需要之前的preserve命令了，将其去掉

"start":"run-p build serve"

此时可以正常运行项目了，并且在修改sass文件后可以看到css文件进行了同步修改，但是页面上的css文件并没有修改

于是我们修改serve命令，给browser-sync 加上 --files的参数，这个参数可以让browser-sync在启动后去监听项目下的一些文件的变化，当文件发生变化后，browser-sync会将这些文件的内容自动同步到浏览器，从而更新浏览器当中的界面

"serve": "browser-sync . --files \"css/*.css\"",

现在修改sass文件后，页面样式也会同步修改。
至此，我们已经借助于NPM Scripts完成了一个简单的自动化构建的工作流

2.2、整体流程

1、安装依赖

npm i sass -D // 用于转换scss文件
npm i browser-sync -D  // 用于启动服务
npm i npm-run-all -D // 提供 run-p 同步执行命令

2、设置 NPM Scripts

"scripts": {
    "build": "sass scss/main.scss css/index.css --watch",
    "serve": "browser-sync . --files \"css/*.css\"",
    "start":"run-p build serve"
  }

3、启动项目

npm start

三、总结

NPM Scripts确实能解决一部分的自动化构建任务，但是对于相对复杂的构建过程，NPM Scripts就会显得相当吃力，这时我们就需要更为专业的构建工具，例如：Grunt、Gulp、FIS。