Atom 開發(fā)模式如何用 dev-live-reload 實(shí)時(shí)刷新 LESS 樣式并手動(dòng)重載核心與包樣式表【免費(fèi)下載鏈接】atom:atom: The hackable text editor項(xiàng)目地址: https://gitcode.com/gh_mirrors/at/atom在本地開發(fā) Atom 核心或捆綁包時(shí)改完 LESS 樣式后不想重啟編輯器、而是希望在運(yùn)行中的窗口里直接看到效果——這就是 dev-live-reload 包 的作用它監(jiān)聽 Atom 的.less文件樣式改動(dòng)會(huì)實(shí)時(shí)反映到任何運(yùn)行中的開發(fā)模式窗口。同時(shí)它提供一條手動(dòng)命令一次性重載所有核心與包的樣式表。適用前提窗口必須以開發(fā)模式運(yùn)行且該窗口不是 spec測試模式。前提條件打開一個(gè)開發(fā)模式窗口dev-live-reload 默認(rèn)安裝在所有以開發(fā)模式運(yùn)行的 Atom 窗口中見 README。打開方式在命令面板中運(yùn)行Application: Open Dev命令即可打開一個(gè)新的開發(fā)模式窗口。這個(gè)限制也寫在了包代碼里lib/main.js 的activate()會(huì)在atom.inDevMode()為假或atom.inSpecMode()為真時(shí)直接返回不啟動(dòng)任何監(jiān)聽。所以普通窗口里看不到實(shí)時(shí)刷新行為屬于預(yù)期現(xiàn)象。自動(dòng)監(jiān)聽如何生效哪些 .less 文件被覆蓋包激活后等初始包激活完成后會(huì)啟動(dòng)一套 watcher分三層核心樣式。BaseThemeWatcher 定位到倉庫static/目錄即 static/atom.less 所在目錄逐個(gè)監(jiān)聽其中的.less文件任一文件變化時(shí)調(diào)用atom.themes.reloadBaseStylesheets()重載核心樣式表。包與主題樣式。PackageWatcher 為每個(gè)有樣式表路徑的激活包類型atom和激活主題類型theme建立監(jiān)聽既監(jiān)聽其styles目錄也遞歸收集目錄下每個(gè)樣式表文件單獨(dú)監(jiān)聽。例如修改 packages/atom-dark-ui/styles 下的文件就屬于這一類。動(dòng)態(tài)變化。UIWatcher 還訂閱了主題切換與包激活/停用事件切換主題時(shí)會(huì)銷毀全部主題 watcher 并對(duì)新的激活主題重建新激活的包會(huì)被加入監(jiān)聽停用的包對(duì)應(yīng) watcher 被銷毀。watcher.js 里的監(jiān)聽器會(huì)跳過位于.asar歸檔內(nèi)的文件路徑也就是說只監(jiān)聽真實(shí)文件系統(tǒng)上的樣式文件。實(shí)時(shí)刷新一次樣式改動(dòng)在開發(fā)模式窗口打開的同時(shí)直接編輯被監(jiān)聽的.less文件保存后樣式即反映到所有運(yùn)行中的開發(fā)窗口無需任何手動(dòng)操作。代碼層面有兩個(gè)可觀察的副作用普通樣式文件變化觸發(fā)該包重載時(shí)package-watcher.js 會(huì)向控制臺(tái)輸出Reloading package加包名如Reloading package atom-dark-ui。若變化文件的路徑中包含variables例如 ui-variables.less會(huì)額外觸發(fā)全局樣式整體重載此時(shí) ui-watcher.js 輸出Global changed, reloading all styles。手動(dòng)重載全部核心與包樣式表當(dāng)需要一次性強(qiáng)制刷新所有樣式時(shí)有兩條等價(jià)入口快捷鍵keymaps/dev-live-reload.cson 只定義了兩個(gè)平臺(tái)的綁定——.platform-darwin下是cmd-ctrl-R.platform-win32下是alt-ctrl-R均觸發(fā)dev-live-reload:reload-all該文件沒有 Linux 綁定其他平臺(tái)需走菜單或命令。注意 README 中記載的快捷鍵是meta-shift-ctrl-r與 keymap 文件不一致兩處以 keymap 文件為準(zhǔn)更可靠。菜單menus/dev-live-reload.cson 在Packages → Dev Live Reload下提供Reload All Styles菜單項(xiàng)執(zhí)行的同樣是dev-live-reload:reload-all命令也可以直接在命令面板里輸入該命令名運(yùn)行。該命令執(zhí)行的是 ui-watcher.js 中的reloadAll()先重載核心基礎(chǔ)樣式表再對(duì)每個(gè)激活包調(diào)用pack.reloadStylesheets()最后對(duì)每個(gè)激活主題調(diào)用theme.reloadStylesheets()。如何確認(rèn)重載確實(shí)發(fā)生視覺確認(rèn)運(yùn)行中的開發(fā)窗口樣式隨文件保存立即更新這是 README 描述的預(yù)期行為README 附有一段演示 GIF?？刂婆_(tái)確認(rèn)在開發(fā)模式窗口的控制臺(tái)查看上節(jié)提到的Reloading package 包名與Global changed, reloading all styles日志手動(dòng)執(zhí)行 reload-all 后各包重載路徑同樣會(huì)輸出前者。已知限制該包在 README 中明確標(biāo)注為experimental。不處理主題中新添加的文件新增的.less文件不會(huì)被監(jiān)聽只有原本已存在并被收錄的樣式表文件在變化/刪除/重命名時(shí)觸發(fā)重載。監(jiān)聽只在開發(fā)模式窗口生效spec 模式下不激活位于.asar歸檔內(nèi)的樣式文件不會(huì)被監(jiān)聽。keymap 文件未覆蓋 Linux 平臺(tái)的快捷鍵綁定該平臺(tái)請使用菜單項(xiàng)或命令dev-live-reload:reload-all完成手動(dòng)重載?！久赓M(fèi)下載鏈接】atom:atom: The hackable text editor項(xiàng)目地址: https://gitcode.com/gh_mirrors/at/atom創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考