自动化构建初体验

狐七 前端工程化自动化构建

# 自动化构建初体验

# sass -> css

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

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

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

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

1
2
3
4
5
6
7
8
9
10

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

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

1
2
3

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

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

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

1
2
3
4
5
6
7
8
9

# 关于`NPM Script`

它是实现自动化构建工作流的最简方式
里面的键是我们通过npm run执行的命令，后面的值就是对应的实际执行的命令。script会自动去检查node_modules里面的命令，所以不用写完成的路径。
"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"
}

1
2
3
4
5
6

创建一个index.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>

1
2
3
4
5
6
7
8
9
10
11
12
13

这个时候运行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"
}

1
2
3
4
5

那么为了解决这种问题，引入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"
}

1
2
3
4
5
6
7

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

自动化构建自动化构建工具

狐七的个人博客

Choose mode