自动化构建小体验

自动化构建

自动化 ，通过机器代替手工 构建，就是转化，比如具有更高编程性的sass转换成浏览器可以识别的css

简单的体验下自动化构建

在工作中为了提高编程性，我们会使用sass来编写css样式，可是浏览器不支持sass,所以还需转换成css
首先我们先安装下包管理文件package.json,并安装sass

yarn init
yarn add sass --dve

在根目录创建scss\main.scss文件编写你的sass内容
需要将sass转换成css供浏览器识别
利用node_modules.bin\sass下的命令去转换，需要设定来源和输出

.\node_modules\.bin\sass scss/main.scss css/style.css

这样每次转换的时候需要写这么长的命令，容易出错，为了简化我们用到 npm 的scripts 去管理

yarn add browser-sync --dev //安装browser-sync 

在package.json文件中增加

  "scripts": {
    "build": "sass scss/main.scss css/style.css --watch",
  },

命令行执行

yarn build

会生成转换后的css文件
当然我们需要让其自己打开浏览器预览的话

 "scripts": {
    "build": "sass scss/main.scss css/style.css ",
    "serve": "browser-sync ."
  },

命令行执行

yarn serve

如果在运行yarn serve 之前没有执行yarn build 转换sass,那就不会存在那个样式文件，或者未更改，为了简易话（偷懒），可以使用npm-run-all,来一起让其执行，避免出现上述问题
安装npm-run-all

yarn add npm-run-all --dev

在package.json文件中增加

  "scripts": {
    "build": "sass scss/main.scss css/style.css ",
    "serve": "browser-sync . ",
    "start":"run-p build serve"
  },

命令行执行,就可以同时执行build 和serve

yarn start

在实际的开发中，我们更改了样式就看到效果的话，不再执行命令，我们需要去监听sass 的改变，只需要在scripts中更改成如下

  "scripts": {
    "build": "sass scss/main.scss css/style.css --watch",
    "serve": "browser-sync . --files \"css/*.css\"",
    "start":"run-p build serve"
  },

这样发现又一次解放了双手，不需要每次更改完样式，执行yarn start 实现简单的热更新