如何在Flutter使用 Makefile 節省你的時間？

瑣碎的事情都讓 Makefile 幫你處理吧

聰明的使用工具來提升效率，是開發者需要重視的一環。而在進行Flutter開發時，多少都會需要透過指令來幫我們執行任務，例如：清理環境、取得套件還有生成.g檔案等等，我想這些操作大家應該都熟悉到不行了吧。但是要用的時候難免會忘記指令或是參數，甚至要花幾秒打完後才能執行，不覺得這些瑣碎的事情應該要有工具幫忙嗎？

Makefile就是那個重要的工具，可以大大幫助開發者，提高效率、節省時間。而且只需要寫好一個屬於自己或團隊的工具包，之後在每個專案都能直接拿來使用。

提醒：Makefile檔案沒有副檔名，也可以使用makefile

Target

• 一個目標、一個任務
• 通常都會以它負責的工作是什麼來命名
• 在 target 後方可以新增其他 target，依賴或連結其他 target，等待任務都完成後才運行主要任務
• 命令與代碼都需要在前面添加tab空間(不能使用空格)

make <target>

.PHONY

• 默認情況下 target 在執行時會生成對應檔案
• 但是如果內容只有單純執行某些命令，可以告訴 Makefile 不要生成target 檔案
• 在文件頂端使用 .PHONY，並指定 target

clean: 清理專案環境

clean: ## Clean the environment.
  @rm -rf pubspec.lock
  @flutter clean

get: 取得套件

get: ## Get pub packages.
  @flutter pub get

upgrade: 升級套件

upgrade: ## Upgrade pub packages.
  @flutter pub upgrade

clean_get: 清除環境並重新取得套件

• 在 target 後方給予依賴的其他 target，結合其他任務處理
• 後方的依賴先依序完成之後，才會執行主體的代碼

clean_get: clean get ## Get packages after cleaning the environment.

lint: 分析代碼

• 當分析到有問題時，顯示自訂義的錯誤訊息

lint: ## Analyze the code and find issues.
  @dart analyze . || (echo "Error in analyzing, some code need to optimize."; exit 99)

format: 代碼整理

format: ## Format the code.
  @dart format .

run_unit_test: 單元測試

run_unit_test: ## Run unit tests.
  @flutter test || (echo "Error in testing."; exit 99)

run_dev: 運行Dev

run_dev: ## Run app in dev.
  @flutter run || (echo "Error in running dev."; exit 99)

run_web_dev: 在Web運行Dev

run_web_dev: ## Run web in dev.
  @flutter run -d chrome --dart-define=ENVIRONMENT=dev

build_runner: 自動生成代碼

build_runner: ## Run build_runner and generate files automatically.
  @flutter pub run build_runner build --delete-conflicting-outputs

commit: 將更新提交到Git

• 依賴 format、lint、run_unit_test
• 在提交之前先跑幾個步驟，格式化代碼、分析代碼、確保測試正常

commit: format lint run_unit_test ## Commit to Git.
  @git add .
  @git commit

all: 預設target

• 當使用指令 make 沒有帶入指定target時，會執行all任務
• 範例依賴了其他3個target，會先依序執行完成，如果依賴在處理過程有出錯，會立即停止後續運行

這邊我預設要將APP在dev運行起來，前面會先分析代碼是否有問題，接著進行代碼格式化，保持閱讀性與品質。

all: lint format run_dev

help: 指令列表

• 查看有哪些指令，也可以添加任何想要顯示的訊息
• 命令的描述設置，只需要在 target 後方加上註解訊息

範例

GitHub - chyiiiiiiiiiiii/makefile_example

參考

• https://medium.com/flutter-community/automating-flutter-workflows-with-the-makefile-423b8e023c9a

其他文章

• Easily understand StatefulWidget LifeCycle of Flutter
• “freezed” makes model class strong and easily
• 提高Flutter性能的小技巧！(一)
• 提高Flutter性能的小技巧！(二)
• 提高Flutter性能的小技巧！(三)
• What are Async and Isolates in Flutter?
• LoadBalancer is optimization for Isolates in Flutter
• Flutter 3 有什麼新東西？
• Riverpod 輕鬆學，原來這麼好用！
• Riverpod 輕鬆學(二)，一些進階用法！

關於我

• Github： chyiiiiiiiiiiii
• Instagram： flutterluvr.yii
• Linkedin： yiichenhi
• Youtube： Yii
• Youtube： 一起饅頭(美食頻道)
• Email： ab20803@gmail.com

贊助

謝謝你！這是一個很長的文章而且你花費時間看完，真的非常感謝。

還有一件事， 如果覺得文章不錯可以贊助我，讓我有更多的動力和熱情分享 學習筆記和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

最後

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章，也請別忘記給我拍手哦 (最多可以達到50次)！