自动化构建01

什么是自动化构建

自动化构建工作流，脱离运行环境兼容带来的问题，在开发阶段使用高效率的语法、规范和标准

• ECMAScript Next
• Sass
• 模板引擎
  这些用法大都不被浏览器支持，自动化构建工具将这些不会被支持的【特性】转换成能够运行的代码，提高编码的效率

image.png

NPM Scripts

实现自动化构建工作流的最简方式

• 安装sass开发依赖 yarn add sass --dev

• 执行.\node_modules.bin\sass 命令会打印出帮助信息，可以查看到具体用法

  
  image.png

• 制定sass输入和输入路径
  .\node_modules.bin\sass scss/main.scss css/style.css
  自动生成css部分

  
  image.png

---

• 为避免重复执行以上命令，简化使用频次，使用npm Scripts 包装命令

  
  image.png
• 使用npm run build 或者yarn build 就可以自动转化scss生成css部分了

-安装browser-sync 模块用于启动一个测试服务器，运行项目
yarn add browser-sync --dev
添加serve命令

image.png

• 执行npm run serve 或者yarn serve 命令，浏览器会自动打开页面

-sass --watch 命令在工作时会阻塞命令行，去等待文件的变化,导致后面的browser-sync无法工作，此时需要同时执行多个任务

• 安装npm-run-all 模块 yarn add npm-run-all --dev

  
  image.png

遇到了一个问题，修改scss文件后保存会生成另外两个文件，后来发现是安装了插件Easy Sass,卸载了重启就好了

image.png image.png