技術標籤：訓練營筆記node.jsjavascript

自動化構建

自動化 ，通過機器代替手工 構建，就是轉化，比如具有更高程式設計性的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 實現簡單的熱更新