自动化构建初体验
自动化构建
1、自动化构建简介
2、自动化构建初体验
3、常用的自动化构建工具
1、自动化构建简介
重复工作本应自动化。自动化：通过机器代替手工完成一些工作。构建：理解成转换。
源代码----自动化构建----生产代码。这个抓换的过程称作自动化构建工作流。作用：脱离运行环境兼容带来的问题，开发阶段使用提高效率的语法、规范和标准。如：ECMAScript Next提高编码效率和质量、Sass增强css的可编程性、模板引擎抽象页面中重复的html。这些用法大都不被浏览器直接支持。自动化构建工具 构建转换那些不被支持的代码特性转成能够直接运行的代码。
2、自动化构建初体验
1、sass不能在浏览器环境中直接使用，所以需要在开发阶段通过一个工具把它转换成css。这里使用的就是sass官方提供的sass模块。作为开发依赖安装
yarn add sass --dev 安装后在node_modules下出现一个.bin的目录，该目录下会有一个sass的命令文件。
2、在命令行当中就可以通过路径找到这个命令 .\node_modules.bin\sass 这样我这边会报错 换了npx sass就好了。执行完会打印一些帮助信息，一开始会有用法。
3、npx sass scss/main.scss css/style.css 就把sass文件转换成css了，还添加了对应的sourcemap文件。这样调试阶段就可以定位源代码中的问题了。但输入命令过于复杂
4、NPM Scripts
定义一些与项目开发有关的脚本命令，命令与项目一起维护，便于我们在后续开发中的使用。在package.json文件中添加scripts对象,scripts可以自动发现node_modules里面的命令。所以不需要写完整命令，直接写命令名称就可以了。
5、执行yarn build 或者npm run build
6、NPM Scripts 实现自动化构建工作流的最简方式
yarn add browser-sync --dev 用于启动一个测试服务器运行我们的项目
"scripts": { "build": "sass scss/main.scss css/style.css", "serve": "browser-sync" },
yarn serve
7、如果在browser-sync 工作之前没有生成我们的样式，那此时页面就没有样式文件，需要在启动serve之前让build任务去工作。可以借助于npm scripts的钩子机制 定义一个preserve 它会在serve命令执行之前去执行
"scripts": { "build": "sass scss/main.scss css/style.css", "preserve":"yarn build", "serve": "browser-sync" },
yarn serve 启动之前自动构建sass文件
8、可以为sass命令添加一个–watch的参数，可以在工作时监听sass文件的变化，自动编译
"scripts": { "build": "sass scss/main.scss css/style.css --watch", "preserve":"yarn build", "serve": "browser-sync" },
yarn serve时命令会阻塞在这个地方，等待文件的变化。这样会导致后续的browser-sync没有办法直接工作。这种情况下需要同时去执行多个任务,可以借助于npm-run-all模块实现
9、yarn add npm-run-all --dev 可以用npm-run-all中的run-p命令同时执行build和serve命令
10、yarn start 但这样需要手动刷新浏览器才能更新样式
11、可以给 browser-sync添加一个–files的参数(–files “css/*.css”)。可以让browser-sync在启动过后监听项目下的一些文件的化。browser-sync会将这些变化自动同步到浏览器
"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.13", "npm-run-all": "^4.1.5", "sass": "^1.32.4" }
3、常用的自动化构建工具
npm scripts可以解决一部分自动化任务，但对于相对复杂的构建过程，npm scripts就显得非常吃力
市面上常用的自动化工具，解决重复无聊的工作，从而实现自动化。
1、Grunt：最早，生态非常完善，工作过程基于临时文件实现，构建速度相对较慢。如完成sass文件的构建，一般会对sass文件做编译操作，再去自动添加似有属性的前缀，最后再去压缩代码。这样的读写过程中，grunt每一步都有磁盘读写操作。像sass文件在编译完成过后会将结果写入到一个临时的文件，然后下一个插件它再去读取这个临时的文件进行下一步操作。这样处理环节越多，文件读写的次数就越多，超大项目中，文件特别多，处理速度就会特别慢
2、Gulp：速度快，基于内存实现，对文件的处理环节都是在内存中完成。相对与磁盘读写速度自然就快了很多，另外默认支持同时去执行多个任务，效率高，使用方式相对于grunt更直观易懂，生态完善，最受欢迎流行
3、FIS：百度推出的构建系统。像捆绑套餐，把项目中一些典型的需求尽可能都集成在内部。例如fis中可以很轻松处理资源加载、模块化开发、代码部署、性能优化等。大而全。
严格上来上说webpack实际上是一个模块打包工具，所以说不在其中
用法上都是用些简单的代码组织一些插件的使用，然后就可以用这些工具帮助我们执行各种个样重复的工作。