我们日常开发自动化构建伴随着我们从开发到上线，那么自动化构建到底是个什么东西？
自动化构建使开发者尽可能脱离运行环境兼容所带来的问题，在开发阶段使用提高效率的语法、规范和标准
通俗一点说，比如我们日常开发中可能会使用scss/sass等，他们无法被浏览器所识别，而我们自动化构建就可以让其编译成为兼容多端浏览器的可识别的css语句
自动化构建初体验
mkdir build-automation & cd build-automationyarn 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 --devpackage.jsonscript内增加"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 不是纯正的自动化构建工具，属于模块打包工具，我们将在以后的文章中介绍
