自动化构建初体验

sass -> css

开发环境使用sass，然后转换成css

在文件夹中初始化npm， npm init
在文件中scss/main.scss编写下面的代码

css

$body-bg: #999;
$body-color: #333;

body{
    margin: 0 auto;
    padding: 20px;
    max-width: 800px;
    background-color: $body-bg;
    color: $body-color;
}

安装sass模块，npm i sass
在package.json中添加

"scripts": {
  "build": "sass scss/main.scss css/style.css"
}

命令行中运行npm run build，可以看到文件夹中有css文件夹生成，里面还有文件css和对应的css.map文件

css

body {
  margin: 0 auto;
  padding: 20px;
  max-width: 800px;
  background-color: #999;
  color: #333;
}

/*# sourceMappingURL=style.css.map */

关于`NPM Script`

它是实现自动化构建工作流的最简方式
里面的键是我们通过npm run执行的命令，后面的值就是对应的实际执行的命令。script会自动去检查node_modules里面的命令，所以不用写完成的路径。
js
"scripts": {
 "build": "sass scss/main.scss css/style.css"
}
1
2
3

我们安装一个browser sync模块(npm i browser-sync)，然后再script中定义serve使用，在serve之前，要先启动npm run build进行sass的转化才行。

// package.json
"scripts": {
    "build": "sass scss/main.scss css/style.css",
    "preserve": "npm run build",
    "serve": "browser-sync"
}

创建一个index.html的文件

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>这是一个app应用</title>
        <link rel="stylesheet" href="css/style.css" type="text/css"/>
    </head>
    <body>
        <h1>这是一个app应用</h1>
        <p>你还想知道什么？</p>
    </body>
</html>

这个时候运行npm run serve，就唤起了服务，看到内容和样式都成功的加载。

如何让`NPM Script`中的多个命令一起执行

我们如果想要在npm run build中监听sass的改变并且同步，那么需要在build后面添加--watch，但是这样会阻碍npm run serve的执行

"scripts": {
    "build": "sass scss/main.scss css/style.css --watch",
    "preserve": "npm run build",
    "serve": "browser-sync"
}

那么为了解决这种问题，引入npm-run-all模块npm i npm-run-all --save-dev，然后修改package.json

"scripts": {
    "build": "sass scss/main.scss css/style.css --watch",
    // 添加--files参数，监听对应目录下的文件的变化，实时浏览器
    "serve": "browser-sync . --files \"css/*.css\"",
    // 添加start，使用run-p 同时启动build和serve命令
    "start": "run-p build serve"
}

这个时候两个同时进行，而且修改sass的时候，css文件也会实时跟着改变，浏览器也会跟着改变。

自动化构建初体验 ​

sass -> css ​

关于NPM Script ​

如何让NPM Script中的多个命令一起执行 ​

自动化构建初体验

sass -> css

关于`NPM Script`

如何让`NPM Script`中的多个命令一起执行