前端自动化构建工具(一) -----便捷的NPM Script 命令

前言：自动化构建的基本含义指的是将开发环境写的源代码自动编译到机器可运行的生产代码，其中包括源代码中支持es6的最新语法，sass，模版引擎等这些。可提高开发代码的效率，又不影响生产环境的运行。

在使用grunt ，gulp工具之前，NPM Script 可以作为简单的运行命令，来简化构建过程。是实现自动化构建最简单的方式。

那举个栗子🌰吧！！比如 安装sass,输入如下命令

yarn add sass --dev
./node-modules/.bin/sass   //找到命令文件回车可以找到具体的用法
./node-modules/.bin/sass  sass/index.scss   css/index.css   //输入文件路径 和输出文件路径

为了简化流程操作，可以直接在pakeage.json 添加script 字段。因为scripts会自动找到node_modules 下面的命令，这里直接写项目的名称即可。

"scripts":{
	"build": "sass  sass/index.scss   css/index.css  "
}
yarn build

当多个命令之间需要连续的指定关系，可以用"preserve" ，表示在命令运行之前先执行该命令。这样在yarn serve 命令之前就会自动执行yarn build命令啦。

yarn add browser-sync --dev
"scripts": {
    "build": "sass index.scss css/index.css ",
    "preserve": "yarn build", 
    "serve": "browser-sync ."
  },
 yarn serve

当需要并行的处理的时候

yarn add npm-run-all --dev
 "scripts": {
    "build": "sass index.scss css/index.css --watch",
    "serve": "browser-sync .",
    "start": "run-p build serve"
  }
 yarn  start

其他：优化sass 文件监听和浏览器监听代码

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