最簡單搭建前端輕量級項目開發服務

　　本文討論瞭如何搭建一個簡單的前端項目開發服務，這個服務要實現以下幾點：

1. Javascript的打包壓縮；
2. scss的編譯打包壓縮；
3. 簡單文件http服務；
4. 監測文件變化自動刷新瀏覽器；
5. 零配置（當然打包的入口文件不算在內），不需要本地安裝node模塊（全局安裝即可）。

　　要實現這個目標，必須請出四劍客，當然，這些功能都是這些軟件實現的：

• esbuild，實現js的快速打包
• sass，實現sass的編譯打包
• browser-sync，實現http服務，監測文件變化刷新瀏覽器
• concurrently，集成上面三位，使得我們可以啓動一個服務程序，而不是三個！

　　首先，全局安裝四劍客：

npm install -g esbuild 
npm install -g sass
npm install -g browser-sync
npm install -g concurrently

　　安裝完成後，你可以查看一下各位的軟件版本號，驗證是否成功安裝了。

esbuild --version

 

　　其次，創建接口文件，app.js, app.scss。

# app.js
//
import("./scripts/xxx");
......
import("./scripts/main");

@import './styles/xxx.scss';
......
@import './styles/main.scss';

　　最後，終於，可以編寫我們的服務腳本了：

concurrently "esbuild ./src/app.js --outfile=./public/app/app.min.js  --bundle --minify --sourcemap --watch" \
  "sass --watch --style=compressed  ./src/app.scss:./public/app/app.min.css" \
  "browser-sync start --s --port 8000 --listen 0.0.0.0 --no-ui --no-open --files **/*.html  --files public/app/*"

各項參數，這裏就不在贅述了，如有需要，請大家自己去查看文檔。

啓動這個腳本，可以愉快地開發調試了。