我们日常开发自动化构建伴随着我们从开发到上线，那么自动化构建到底是个什么东西？
自动化构建使开发者尽可能脱离运行环境兼容所带来的问题，在开发阶段使用提高效率的语法、规范和标准
通俗一点说，比如我们日常开发中可能会使用scss/sass等，他们无法被浏览器所识别，而我们自动化构建就可以让其编译成为兼容多端浏览器的可识别的css语句

自动化构建初体验

• mkdir build-automation & cd build-automation

• yarn init

• 写一个最简单的代码结构

  
  image.png

• yarn add sass --dev

• 使用npm script 在package.json内加入"scripts": { "build": "sass scss/index.scss css/style.css" }

• 运行yarn build,会发现根目录会生成一个css的文件夹，里面有着编译过后的css文件

• 下一步 让代码在本地起一个测试服务器，运行起来

• yarn add browser-sync --dev

• package.json script内增加"serve": "browser-sync ."

• 执行 yarn serve 会发现代码运行起来并且打开了浏览器
  我们还可以利用npm-run-all生成一个更加完善的自动化构建工作流

{
  "name": "start",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "sass scss/index.scss css/style.css --watch",
    "serve": "browser-sync . --files \"css/*.css\"",
    "start": "run-p build serve"
  },
  "devDependencies": {
    "sass": "^1.32.8"
  },
  "dependencies": {
    "browser-sync": "^2.26.14",
    "npm-run-all": "^4.1.5"
  }
}

之后执行 yarn start，会先执行build，后执行serve, 并且会watch scss文件的变化编程到css文件中，serve的服务也会监听css文件的变化渲染到页面上。

常用的自动化构建工具

• grunt
  如果对某种文件执行多种构建手段，会多次读写文件，导致构建时间很长。比如sass文件编译、增加私有前缀（data-xxx）、压缩等，都需要多次读写临时文件。
• gulp。解决了 grunt构建慢的情况, 执行的各个阶段是在内存中处理的，并且可以并行执行任务。
• fis。 fis是百度前端团队推出的， 集成了多种项目中遇到的情况的解决方案。

而webpack 不是纯正的自动化构建工具，属于模块打包工具，我们将在以后的文章中介绍