什么要檢測圖片資源？

1. 避免不小心把未壓縮，不合適的圖片資源打入apk中，造成apk過大
2. 圖片打入apk前，可以自動化轉換，壓縮

實現(xiàn)思路

1. 思路一：使用gradle在aapt編譯期，掃描匯總資源的文件夾，過濾出不符合要求的圖片資源，并拋出異常中斷編譯
2. 思路二：是思路一的進階。還是在使用gradle在aapt編譯期，查找有沒有合適的gradle task，提供給我們遍歷所有資源的機會

gradle插件實現(xiàn)

gradle插件實現(xiàn)的基礎

簡單對gradle插件實現(xiàn)進行復習

插件搭建

• 新建一個模塊
• 配置好該模塊的上傳配置（mvn.gradle）
• 在build中，對gradleApi進行依賴
• scss復制代碼
• apply plugin: 'kotlin' //插件如果使用kotlin實現(xiàn)，需要依賴kotlindependencies { implementation gradleApi() implementation localGroovy() implementation 'com.android.tools.build:gradle:3.4.2'}
• 在main下面新建resources.META-INF.gradle-plugins文件夾
• 在該文件夾中創(chuàng)建一個和module同名的.properties文件，在里面配置上你的插件入口類
• 例：
• arduino復制代碼
• implementation-class=com.xxx.checkbigimage.image.ImagePlugin

插件的基本實現(xiàn)

上面講到要配置一個入口類，這個入口類就是實現(xiàn)了Plugin接口的類，它有一個override fun apply(project: Project)方法，就是我們插件開始執(zhí)行的地方，相當于main函數(shù)，參數(shù)project就是整個工程的配置文件

可以使用以下方法，從我們使用插件的地方獲取到對插件的配置

python復制代碼project.extensions.create("config", Config::class.java)mConfig = project.property("config") as Config

Config是一個java bean數(shù)據(jù)類

"config"是我們在build中的配置名稱

這樣一個簡單gradle插件就實現(xiàn)了

圖片資源檢測插件實現(xiàn)

上面說了為什么要實現(xiàn)這樣一個插件和該如何實現(xiàn)一個gradle插件，那么下面就具體介紹該插件的實現(xiàn)過程

想要的功能

• 檢測和攔截功能
• 檢測是否有大小超標的圖片
• 檢測是否有寬高超標的圖片
• 攔截非webp資源，并進行提示
• 自動化壓縮
• 自動壓縮png，jpg等資源
• 白名單設置
• 一些統(tǒng)計功能

實現(xiàn)過程

上面已經(jīng)說了gradle插件的實現(xiàn)，那么我們就從apply方法開始說起。

瞄準task掛鉤

既然是要hock android打包的編譯過程，那就要尋找android打包時，合適的task

想hock task，首先應該拿到任務task集合

在android插件編譯生成apk的過程中，有好多task都可以生成apk，它們的名字基于Build Types 和 Product Flavor 生成。那么我們怎么拿到具體生成apk的task組呢？

為了解決這個問題。android插件有幾個屬性，就是我們平常配置的變體（所謂的環(huán)境），androd中有三類變體

• applicationVariants（只適用于 app plugin）
• libraryVariants（只適用于 library plugin）
• testVariants（app、library plugin 均適用）

這三個對象都是實現(xiàn)了BaseVariant（BaseVariantImpl為實現(xiàn)這個接口的抽象類）接口的類的對象的集合

屬性名

屬性類型

說明

name

String

Variant 的名字，唯一

description

String

Variant 的描述說明

dirName

String

Variant 的子文件夾名，唯一。可能有不止一個子文件夾，例如 “debug/flavor1”

baseName

String

Variant 輸出的基礎名字，必須唯一

outputFile

File

Variant 的輸出，該屬性可讀可寫

processManifest

ProcessManifest

處理 Manifest 的 task

aidlCompile

AidlCompile

編譯 AIDL 文件的 task

renderscriptCompile

RenderscriptCompile

編譯 Renderscript 文件的 task

mergeResources

MergeResources

合并資源文件的 task

mergeAssets

MergeAssets

合并 assets 的 task

processResources

ProcessAndroidResources

處理并編譯資源文件的 task

generateBuildConfig

GenerateBuildConfig

生成 BuildConfig 類的 task

javaCompile

JavaCompile

編譯 Java 源代碼的 task

processJavaResources

Copy

處理 Java 資源的 task

assemble

DefaultTask

Variant 的標志性 assemble task

因為我們的插件應該可以應用在主工程或者模塊包上的，所以當我們插件運行后，我們要檢測當前使用我們插件的模塊是主工程，還是模塊包

kotlin復制代碼val hasAppPlugin = project.plugins.hasPlugin("com.android.application")val variants = if (hasAppPlugin) {  (project.property("android") as AppExtension).applicationVariants} else {  (project.property("android") as LibraryExtension).libraryVariants}

找到想要hock的任務

我們想hock住android插件運行的task任務，就需要一個重要的gradle回調

erlang復制代碼project.afterEvaluate{...}

afterEvaluate該方法就是整個gradle配置文件配置成功后的回調，證明此時配置已檢查完畢，所有task已經(jīng)就緒，已經(jīng)可以開始按指定順序運行task了，那么我就需要在這個回調里辦事！

Grade 執(zhí)行順序

執(zhí)行setting，檢測所有module，為每個模塊配置project

加載build.properties，生成task執(zhí)行鏈表和配置

執(zhí)行某個指定task，然后會先執(zhí)行該task所依賴的task

配置完成后，開始遍歷variants中所有的變體

arduino復制代碼project.afterEvaluate {  variants.all { variant ->    ...  }}

我們的目標task：mergeResourcesProvider

mergeResourcesProvider這個任務就是android插件合并所有module中資源的task，看名字就知道了。

我們可以從變體中獲取這個task對象

ini復制代碼val mergeResourcesTask = variant.mergeResourcesProvider.get()

那么，我們自己的任務呢？

gradle api提供給我們可以在代碼中生成task的方法

ini復制代碼val mcPicTask = project.task("CheckBigImage${variant.name.capitalize()}")

使用project.task("taskname")來生成一個我們自己需要執(zhí)行的task

然后我們編寫這個task的邏輯，也是本插件的邏輯

復制代碼mcPicTask.doLast {...}

variant里面有各種對象，allRawAndroidResources恰好就是我們需要的。它只有3.3以上才會有。

ini復制代碼val dir = variant.allRawAndroidResources.files

這個dir對象，就是android所有文件資源的files集合

ok。讓我們遍歷這個文件list吧！

scss復制代碼for (channelDir: File in dir) {check(channelDir)}fun check(file: File) { if(file.isDirectory) {   check(file)} else {   process(file)}}

如果遇到文件夾，這里是一個遞歸調用。

如果遇到文件，就可以按照自己的規(guī)則處理了。

掛鉤mergeResourcesProvider

我們task寫好后，需要和mergeResourcesProvider掛鉤

less復制代碼mergeResourcesTask.dependsOn(project.tasks.findByName(mcPicTask.name))

使mergeResourcesTask依賴我們的mcPicTask，當mergeResourcesTask執(zhí)行前，就會先執(zhí)行我們的mcPicTask了！！

注意：此處直接使用mergeResourcesTask系統(tǒng)task依賴我們的task，我們的task執(zhí)行順序會和mergeResourcesTask原有的依賴混雜在一起，不可控。后面講一種可控的方法

攔截圖片的邏輯

這個邏輯應該實現(xiàn)在上面?zhèn)未aprocess(file:File)方法中

1. 首先我們只需要處理圖片，所以對參數(shù)file進行首輪過濾，只留下后綴名為圖片的文件
2. kotlin復制代碼
3. fun isImage(file: File): Boolean { return (file.name.endsWith(Const.JPG) || file.name.endsWith(Const.PNG) || file.name.endsWith(Const.JPEG) || file.name.endsWith(Const.GIF) || file.name.endsWith(Const.WEB_P) ) && !file.name.endsWith(Const.DOT_9PNG)}
4. 需要檢查圖片的寬高的話，可以使用java的原生api
5. arduino復制代碼
6. val sourceImg = ImageIO.read(FileInputStream(imgFile))if (sourceImg.height > maxHeight || sourceImg.width > maxWidth) { ...
7. 需要過濾圖片大小的話
8. lua復制代碼
9. if (imgFile.length() >= maxSize) { LogUtil.log(SIZE_TAG, imgFile.path, true.toString()) return true}

壓縮圖片邏輯

這里我們只處理普通圖片轉換為webp的壓縮。jpg,png的自壓縮原理相同，就不復述了

想壓縮轉換webp圖片，需要用到轉換工具

google提供的有一套命令行轉換工具：cwebp ，各個平臺都有，我們去下載一套，放在我們的主工程文件夾下就可以了

這里需要注意的是：為了方便，如果把cwebp命令行程序放在環(huán)境變量下，那么執(zhí)行命令時，拼接命令時，直接拼接cwebp就好。

如果使用工程目錄下的cwebp，執(zhí)行前，需要在cwebp命令前面拼接它所在的工程目錄。

使用

lua復制代碼project.rootDir.path

可以獲取工程的根目錄

如何執(zhí)行命令行程序呢？

可以使用java的api

scss復制代碼Runtime.getRuntime().exec(cmd)

現(xiàn)在可以愉快的轉換圖片了

bash復制代碼Tools.cmd("cwebp", "${imgFile.path} -o ${webpFile.path} -m 6 -quiet")

轉換后，記得把原圖刪掉

優(yōu)化點：

有的圖片轉換后比以前還大，這里需要注意

第一次掃描過后的無法優(yōu)化的圖片，可以存在一個text文本當中，第二次執(zhí)行時，就不要去轉換了

系統(tǒng)兼容

在linux系統(tǒng)上，創(chuàng)建和刪除文件都需要權限，如果沒有權限就會失敗。這時需要先判斷當前的操作系統(tǒng)是不是linux，如果是，可以執(zhí)行chmod 755 -R ${FileUtil.getRootDirPath()}添加權限

這里可以優(yōu)化一下，在我們的mcPicTask前面再加一個task，用來添加權限，這個task只對文件夾進行遞歸添加就可以了，比一個一個文件要來的快。

因為我們不清楚系統(tǒng)的task（mergeResourcesTask）都依賴了哪些，那么如何在依賴上再加依賴，如何插入task呢？

gradle api提供給了我們一個方法，xxx.taskDependencies.getDependencies(xxx)可以獲取自己的依賴樹

在這里就是

scss復制代碼(project.tasks.findByName(chmodTask.name) asTask).dependsOn(mergeResourcesTask.taskDependencies.getDependencies(mergeResourcesTask))

讓chmodTask依賴mergeResourcesTask的依賴。假如mergeResourcesTask是A，chmodTask是B。A依賴一個系統(tǒng)的C。那么上面的代碼就是讓B依賴了C。這時的task圖就是 B->C，A->C

接下來我們再把mcPicTask（簡稱為D）也依賴進來

arduino復制代碼(project.tasks.findByName(mcPicTask.name) as Task).dependsOn(project.tasks.findByName(chmodTask.name) as Task)

這時就是D->B->C，A->C

最后，回到我們剛剛攔截圖片的邏輯的最后代碼

less復制代碼mergeResourcesTask.dependsOn(project.tasks.findByName(mcPicTask.name))

就變成了A->D->B->C，也就是mergeResourcesTask->mcPicTask->chmodTask->原依賴task，依賴和執(zhí)行順序是相反的。

正常的代碼就是

scss復制代碼(project.tasks.findByName(chmodTask.name) asTask).dependsOn(mergeResourcesTask.taskDependencies.getDependencies(mergeResourcesTask))(project.tasks.findByName(mcPicTask.name) as Task).dependsOn(project.tasks.findByName(chmodTask.name) as Task)mergeResourcesTask.dependsOn(project.tasks.findByName(mcPicTask.name))

Tips

直接使用mergeResourcesTask.dependsOn(project.tasks.findByName(mcPicTask.name))插入task。執(zhí)行順序打印

......

Task :app:mainApkListPersistenceDebug UP-TO-DATE

Task :app:CheckBigImageDebug

Task :app:generateDebugResValues UP-TO-DATE Task :app:generateDebugResources UP-TO-DATE Task :app:mergeDebugResources

......

而使用正規(guī)的插入法順序

Task :app:mainApkListPersistenceDebug UP-TO-DATE Task :app:generateDebugResValues UP-TO-DATE Task :app:generateDebugResources UP-TO-DATE Task :app:chmodDebug

Task :app:CheckBigImageDebug

Task :app:mergeDebugResources

gradle版本差異

我們上面的例子，都是基于比較最新的gradle和android gradle tools版本（>3.3），android插件直接提供給了我們allRawAndroidResources，方便無比，直接在merge前遍歷它就好了。

那么3.3之前的版本呢？就是我們最初的設想了，在合并完各個module資源后，掃描merge文件夾！這里又有aapt和aapt2的差異

方法一

關掉aapt2

ini復制代碼android.enableAapt2=false

在mergeDebugResources后，processDebugResources前掃描文件夾

前面說過，mergeDebugResources是合并所有module的資源文件到固定目錄

那么processDebugResources是什么呢？就是處理這些已經(jīng)合并完成的文件，生成R.id，資源索引之類的文件

那么我們的任務就必須插入到processDebugResources前面，而不是mergeDebugResources了

方法二

仔細翻了翻MergeResources里面的方法，有一個getResSet和computeResourceSetList看起來有點意思。那么computeResourceSetList中又調用了getResSet。最后發(fā)現(xiàn)computeResourceSetList果然可以獲取所有文件列表。

less復制代碼/*** Computes the list of resource sets to be used during execution based all the inputs.*/@VisibleForTesting@NonNullList<ResourceSet> computeResourceSetList()

注釋也很有意思，有道翻譯一下：根據(jù)所有輸入計算執(zhí)行期間使用的資源集列表。

鑒于該方法是友元方法，就使用反射獲取。

因為3.3之后，aapt2是強制開啟的，并且aapt2 merge后的文件不是原文件了哦！注意aapt1合并后，還是正常的xxx.png。aapt2合并后的文件擴展名為flat

所以，方法一不支持大于3.3的gradle版本。方法二支持。可以平滑過渡到新版本。鑒于新版本的gradle直接提供了allRawAndroidResources這樣的方法，所以在3.3以上，直接使用它就可以了

allRawAndroidResources和掃描合并文件夾的差異。

allRawAndroidResources提供的是未合并前的資源路徑

• 源碼依賴的module，編譯時，會獲取該文件的真實路徑
• aar依賴的路徑，會獲取到aar-cache的路徑
• 所以：如果開啟自動轉換webp功能你會發(fā)現(xiàn)：你本地源代碼中的png，都轉成了webp

掃描合并文件夾，掃描的是編譯期merge成功后的文件夾

• 不會影響源代碼
• 
  

優(yōu)化

1. 已經(jīng)掃描過的，且確認無法經(jīng)過webp優(yōu)化的圖片，把這些名稱寫入一個本地文件，優(yōu)化掃描速度

未來想做的事情

統(tǒng)計

1. 攔截了多少圖片
2. 轉換了多少圖片
3. 3. 統(tǒng)計各個模塊的圖片資源情況。在合適的時間進行預警

果你對數(shù)據(jù)分析感興趣，希望學習更多的方法論，希望聽聽經(jīng)驗分享，

歡迎移步寶藏公眾號「小火龍說數(shù)據(jù)」，無廣告、無軟文、純干貨，更多精彩原創(chuàng)文章與你分享！

1、OneTab：一鍵合并 tabTab 過多的時候，要關閉瀏覽器的時候OneTab可以幫助你快速的保存、整理瀏覽器。

2、掘金：最新的技術動態(tài)每次打開新的 tab 頁面就可以看到最新、最熱的技術文章。

3、markdown here超好用的 MD 編輯器，任何地方都可以把 MD 輕松的轉換為富文本，我們可以把簡書寫好的文章（帶md語法）直接復制到微信公眾號啦。

4、Adblock Plus：免除廣告困擾你是不是每次搜索百度前幾個都是廣告？有了它，你的搜索結果只有純凈。

5、LastPass：密碼管理軟件LastPass，全球知名在線密碼管理工具之一，采用軍事級加密算法，支持自動填充網(wǎng)站用戶名和密碼，與朋友分享登錄信息等實用功能，且在全平臺同步免費，無需訂閱 Premium，即可在手機、網(wǎng)頁、電腦端同步你的所有 LastPass 信息。

6、二維碼(QR碼)生成器在線的二維碼生成器。最方便的用法是把當前的頁面生成二維碼，方便手機掃碼快速訪問。

7、下載+Chrome的下載管理在二級菜單里，進去很不方便。裝了這個插件就可以直接看和管理，很好用。

8、Github 加速器一鍵加速 Github 訪問速度，當 Github 訪問慢的時候點擊右鍵直加速，同時支持多個加速鏡像。

9、購物黨在線的比價工具，剁手黨們趕緊裝起來。

10、新浪微博圖床簡單好用的新浪微博圖床,同時可以快速轉換格式，HTML和Markdown等格式,支持瀏覽和刪除歷史記錄。

11、crxMouse Chrome Gestures對于國產瀏覽器自帶鼠標手勢的功能，真覺得很方便！有了這款插件，也足夠讓你裝B了。

12、Imagus圖片放大鏡的功能，在瀏覽新聞和博客的時候想右鍵看一下高清圖，有了這個插件完全不用，鼠標懸浮就能看高清圖片。

13、Save to Pocket看到感興趣的先收藏著，然后走哪兒都能看，并且它由各個平臺的版本支持，同時可以自動去廣告，只把關鍵的內容保存，這樣非常方便各個平臺閱讀。

14、網(wǎng)頁截圖:注釋&批注網(wǎng)頁截圖，批注工具。

15、Image Downloader Chrome想下載某個頁面的圖片，不用再去資源里面一個一個看了，直接安裝這個插件，一鍵就可以下載。

16、Google翻譯Google翻譯是一款由谷歌公司提供的網(wǎng)頁劃詞翻譯插件，它支持動態(tài)的劃詞翻譯功能，也支持網(wǎng)頁翻譯，真是閱讀外文網(wǎng)站的好幫手啊。

17、Lucidchart Diagrams - Desktop：在線繪制多種圖表繪制各種流程圖手頭沒有趁手的工具，直接試試這個工具哈。

18、Vimium：Linux 系統(tǒng)的 vim 編輯器快捷鍵功能能夠在chrome中應用類vim快捷鍵進行操作，實現(xiàn)雙手從鼠標上的解放，強烈推薦！

19、New Tab Startup Quotes：學習成功人士的格言每次打開新的 tab 都會有一個名人名言，不過是英文的，得思考一下才能理解其中的奧妙，如果你能做一個中文版就好了。

20、Search by Image：強大的以圖搜圖發(fā)現(xiàn)了一個圖片，但是不知道他是什么，或者想搜索一些類似的，那么就用這個插件。

21、為什么你們就是不能加個空格呢 自動把網(wǎng)頁中所有中文、英文、數(shù)字、符號之間插入一個空格。

22、Clear Cache點擊圖標即可清除緩存、cookie等，開發(fā)必備！

23、JSON ViewerJSONView 是一個方便查看 Json 結構的插件，展開，折疊，可以非常方便的查看接口返回數(shù)據(jù)。

24、Postman相信開發(fā)者朋友一定知道這款插件，非常方便的調用和調試 API 接口。

25、Octotreegithub上查看代碼的時候總是一層層進入再出來，有點麻煩，有了這個插件，你可以想瀏覽本地 IDE 一樣瀏覽 Github。

26、Table of contents sidebarTable of contents sidebar 可以讓你在閱讀很長篇幅的文章時候清晰的看到文章輪廓。

27、Tampermonkey俗稱‘油猴子’，方便的管理插件的插件，你試試就知道如何的優(yōu)秀。

28、Code ColaCode Cola是一個可視化編輯在線頁面css樣式的chrome插件。

29、WEB前端助手FE助手：包括字符串編解碼、圖片base64編碼、代碼壓縮、美化、JSON格式化、正則表達式、時間轉換工具、二維碼生成器、編碼規(guī)范檢測、頁面性能檢測、柵格檢測、JS運行效率分析等等你日常生活中不可缺少的插件。

30、sider：ChatGPT側邊欄輕松應用ChatGPT，實現(xiàn)Chrome與ChatGPT的聯(lián)動應用，強烈推薦！