前端自动化构建入门

前端三剑客可以使我们构建出想要的网页，但是这种流程并不完美，比如css的样式书写方式引用复杂，重用率低，以至于有人更青睐于less、sass等样式编写风格，但是浏览器并不能直接解析sass，这就需要前端构建工具将我们的源代码重新构建成浏览器能解析的方式

sass官方有自己的源码解析工具，能将用户编写的sass转译成css，从而让浏览器使用

• 安装 yarn add sass --dev
• 安装好之后node_modules文件夹中的.bin目录里就有了sass.cmd程序
• 调用该程序，即可将sass文件转换成css文件：.\node_modules\.bin\sass scss/index.scss css/index.css
• 上述将sass文件下下的index.scss文件转换成css文件夹下的index.css

可以感受到，每次调试css调用这些命令十分繁琐，而且与其它开发者也不方便协同工作，因此自动化构建成了一种新思路。

• 通过npm scripts的思路完成自动化构建
• package.json下新建一个script健，值为一个对象，对象中各种健值为yarn对应的操作
• scripts下的命令可以自动发现node_modules中的命令

 "scripts": {
      "build":"sass scss/index.scss css/index.css"
  }
}

• 只需要运行:yarn build即可完成sass的转换

但是这远远不够，我们尝试使用Npm scripts来模拟一个自动化构建的过程

• 安装服务构建模块:yarn add browser-sync --dev
• 在package.json中的scripts中添加命令："serve": "browser-sync ."把当前文件运行起来
• 运行npm serve启动服务
• 可以看到，网页被运行起来，我们想要网页被运行起来之前，就把sass文件编译好，让运行的服务网页调用，只需要利用npm的钩子机制，在scripts中添加"preserve":"yarn build",表示serve启动前先启动 build
• 我们还可以在sass转译命令的后面添加–watch命令，表示时刻监听sass文件的变化，并时刻转译
• 但是这样会造成一个问题，当运行yarn serve时由于会先执行yarn build，而由于sass会时刻监听，导致执行到这一步的时候命令卡塞，不会往下执行，以至于服务开启不了
• 可以利用npm-run-all模块实现两个命令的共同触发:yarn add npm-run-all --dev
• scripts中不在需要preserve命令，取而代之的是:"start": "run-p build serve"
• 运行yarn start可以看到两个命令同时启动，其中sass文件也保持被监视，修改sass文件会自动转译成css文件
• 但是转译的css并不会同时渲染到网页上，网页上的内容还是之前启动的内容，需要刷新才能同时渲染
• 只需要在serve命令的后面添加--files \"css/*.css\"即可实现对css文件的监视，即css文件改变，服务刷新
• 这样运行yarn start即可实现实时监听网页，后台修改代码，网站实时刷新

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