自动化构建初体验

2024-04-01 16:19:52

自动化构建

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实际上是一个模块打包工具，所以说不在其中
用法上都是用些简单的代码组织一些插件的使用，然后就可以用这些工具帮助我们执行各种个样重复的工作。

码农公寓