1、使用NPM Scripts包装构建命令
（1）在package.json中添加“scripts”字段
package.json
"scripts": {
"build":"sass scss/main.scss css/style.css"
},添加完后完整的是下面这个样子的
{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build":"sass scss/main.scss css/style.css"
},
"devDependencies": {
"sass": "^1.32.8"
}
}View Code
（2）通过npm或是yarn启动scripts
yarn build（3）为项目安装一个browser-sync的模块，用于启动测试服务器，运行项目
yarn add browser-sync --dev（4）在scripts中添加serve命令，在这个命令当中，通过browser-sync把当前目录运行起来
"serve":"browser-sync ."添加完后完整的是下面这个样子的
{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css",
"serve":"browser-sync ."
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}View Code
（5）在命令行运行serve命令
yarn serve此时browser-sync会自动启动一个web服务器，并且唤起浏览器，运行当前的网页
（6）使用NPM Scripts的钩子机制preserve，可以在serve之前先执行build，这时候先执行serve，它就会自动化的先执行build命令
在scripts中添加preserve
"preserve":"yarn build",
// 这样就可以在执行serve时，构建sass文件，将scss转cssnpm 脚本有pre和post两个钩子。举例来说，build脚本命令的钩子就是prebuild和postbuild。
"prebuild": "echo I run before the build script",
"build": "cross-env NODE_ENV=production webpack",
"postbuild": "echo I run after the build script"用户执行npm run build的时候，会自动按照下面的顺序执行。
npm run prebuild && npm run build && npm run postbuild因此，可以在这两个钩子里面，完成一些准备工作和清理工作。下面是一个例子。
"clean": "rimraf ./dist && mkdir dist",
"prebuild": "npm run clean",
"build": "cross-env NODE_ENV=production webpack"npm 默认提供下面这些钩子。
- prepublish，postpublish
- preinstall，postinstall
- preuninstall，postuninstall
- preversion，postversion
- pretest，posttest
- prestop，poststop
- prestart，poststart
- prerestart，postrestart
自定义的脚本命令也可以加上pre和post钩子。比如，myscript这个脚本命令，也有premyscript和postmyscript钩子。不过，双重的pre和post无效，比如prepretest和postposttest是无效的。
npm 提供一个npm_lifecycle_event变量，返回当前正在运行的脚本名称，比如pretest、test、posttest等等。所以，可以利用这个变量，在同一个脚本文件里面，为不同的npm scripts命令编写代码。请看下面的例子。
const TARGET = process.env.npm_lifecycle_event;
if (TARGET === 'test') {
console.log(`Running the test task!`);
}
if (TARGET === 'pretest') {
console.log(`Running the pretest task!`);
}
if (TARGET === 'posttest') {
console.log(`Running the posttest task!`);
}注意，prepublish这个钩子不仅会在npm publish命令之前运行，还会在npm install（不带任何参数）命令之前运行。这种行为很容易让用户感到困惑，所以 npm 4 引入了一个新的钩子prepare，行为等同于prepublish，而从 npm 5 开始，prepublish将只在npm publish命令之前运行。
{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",
"preserve":"yarn build",
"serve":"browser-sync ."
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}View Code
（7）给sass命令添加--watch参数
"build": "sass scss/main.scss css/style.css --watch",
// 在工作时会监听文件的变化，当代码中的sass文件发生变化，他就会自动被编译完整版
{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",
"preserve":"yarn build",
"serve":"browser-sync ."
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}View Code
（8）同时执行多个任务，借助npm-run-all模块
安装 npm-run-all
yarn add npm-run-all --dev（9）在scripts中添加start命令
"start": "run-p build serve"
// 可以同时执行build和server命令完整版
{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",
"serve":"browser-sync .",
"start": "run-p build serve"
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}View Code
（10）运行start命令
yarn start（11）给server添加--files \"css/*.css\"
"serve":"browser-sync . --files \"css/*.css\"",
// 这个参数可以让browser-sync在启动后监听项目下文件的变化
// 文件发生变化后，browser-sync会将这些变化内容自动同步到浏览器，更新浏览器界面，可即时查看最新的界面效果{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",
"serve":"browser-sync . --files \"css/*.css\"",
"start": "run-p build serve"
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}
