跳到主要內容

[分享] livereload 設定及原理分析, livereload project analysis

之前介紹過livereload ,深深覺得他是個好東西,用過之後開發網站就不能缺少他,我真的回不去了。可是就會想要探討到底livereload 是怎麼做到修改檔案之後,就即時做頁面重新讀取呢?

分析
livereload 當程式執行之後就會開啟一個websocket server,如果檔案有任何變動,會發送訊息給瀏覽器,瀏覽器就會依據檔案不同執行不同程序。

Server端其實做的事情就是監聽檔案變化,發送訊息給client!

而預設的網站port號會採用35729,如果想要變更port號,在自己的家目錄底下有一個.livereload 檔案,去底下修改這個檔案,例如35729 修改為 88887。

~/.livereload
config.port = 88887



如此就可以將預設的port號修改,那到底還有哪些config 可以使用呢?還有哪些不為人知的秘密呢?接下來直接https://github.com/mockko/livereload一探究竟。

伺服器端檔案
livereload / server / lib / livereload.rb
host, 
:port, 
:exts, 
:exts_overwrite, 
:exclusions, 
:debug, 
:apply_js_live, 
:apply_css_live, 
:apply_images_live, 
:grace_period

原來可以使用的設定有這麼多種,至於每一個變數的功能為何,就不一一闡述,但是要置換的話,其實可以直接修改~/.livereload 這個檔案就可以了。

同時可以從原始碼中得知是採用em-dir-watcher(也是同一個作者),做IO 監控只要檔案有變動,立即就會得知同時做檔名比對發送資料到前端。

在linux 環境底下,底層檔案變更監控是採用Inotify機制,如此一來檔案變更的時候就可以即時知道哪些檔案變更了。

接著看到example 裡面有兩個檔案xbrowser.html, xbrowser.css,看到這個檔名應該跟跨瀏覽器有關係,讓我們來看一下。

    <script src="../src/content.js"></script>
    <script src="../src/background.js"></script>
    <script src="../src/xbrowser/livereload.js"></script>
    <script>
    window.onload = function(){
        livereload.run();
    };
    </script>

xbrowser.html就是直接使用livereload client 的連接,直接載入javascript,因此不需要加載任何外掛,測試一下也的確可以正常使用。

設定ip, port
/src/background.js
host: ('ip'),
port: 35729,

直接在這個檔案修改即可。

既然都有前端source code ,那就來找一下到底是怎麼換至javascript, css, img是不需要整頁重載,而只有載入局部資料的呢?整個頁面怎麼處理呢?
/src/content.js

html 重新載入
handleHTML: function(path) {

                this.document.location.reload();
}

頁面變動的部份其實很簡單,只要頁面檔案有變動,就直接reload page。


javascript 載入
handleJS: function(path, options) {
// 省略
            if (script.src && this.equals(script.src, path)) {
                this.reloadScript(script);
                reloaded++;
            }
// 省略

        return reloaded;
    }

css 載入
handleCSS: function(path, options) {

        var links = this.document.querySelectorAll('link[rel="stylesheet"]');

            if (this.equals(link.href, path)) {
                reloaded += this.reattachStylesheetLink(link);
            } 
}

可以看到是讀取script, style 節點,取得src 資料之後進行比對,在做重新載入的動作,可以得知只要任何一個.js 檔案變動之後,就會直接將script 的資料重新載入執行。

另外比較值得一提,css部份,為了重新載入不要有畫面一閃的問題出現,因此會先clone style 節點,在真正得到新的資料之後,再將利用reattachStylesheetLink這個方法將檔案重新載入,如此解決掉畫面閃爍的問題。

Image 載入
    handleImages: function(path, options) {
        var reloaded = 0;


        var stylesheets = this.document.styleSheets;
        var imgs = this.document.images;
        var expando = this.generateExpando();
        for (var i = 0; i < imgs.length; i++) {
            var img = imgs[i];
            if (this.equals(img.src, path)) {
                img.src = this.generateNextUrl(img.src, expando);
                reloaded++;
            }
        }
        var src;
        imgs = this.document.querySelectorAll('[style*=background]');
        for (i = 0; i < imgs.length; i++) {
            img = imgs[i];
            if (!img.style.backgroundImage) {
                continue;
            }
            src = this.extractURL(img.style.backgroundImage);
            if (src && this.equals(src, path)) {
                img.style.backgroundImage = 'url(' + this.generateNextUrl(src, expando) + ')';
                reloaded++;
            }
        }

        imgs = this.document.querySelectorAll('[style*=border]');
        for (i = 0; i < imgs.length; i++) {
            img = imgs[i];
            if (!img.style.borderImage) {
                continue;
            }
            src = this.extractURL(img.style.borderImage);
            if (src && this.equals(src, path)) {
                img.style.borderImage = 'url(' + this.generateNextUrl(src, expando) + ')';
                reloaded++;
            }
        }

        for (i = 0; i < stylesheets.length; i++) {
            reloaded += this.reloadStylesheetImages(stylesheets[i], path, expando).length;
        }

        return reloaded;
    },

Image 就分成幾個部份來實做重新載入

  • css重新載入之後,會讀取相關css image
  • img 節點,路徑比對之後,重新載入影像


結語
事實上其他瀏覽器外掛,也是載入javascript 的方式來執行。如果直接自行載入javascript ,就可以免除掉各個瀏覽器安裝外掛的問題發生。只要瀏覽器支援websocket 就可以直接執行。

從原始碼來看,其實livereload 在前端(javascript )做了許多小地方調整,例如為了保證載入的檔案不會有cache 問題,因此加載的uri 都會加上一組亂數,在頁面重新讀取也考慮到css, javascript 的問題等。

目前比較可惜的是IE無法支援websocket,似乎可以使用socket.io 替換掉  websocket,如此就可以直接跨瀏覽器支援了,但是目前沒有這個版本!殘念(有人想要一起寫嗎?livereload rewrite)

留言

這個網誌中的熱門文章

面試者如何挑戰大工程師時代來臨?

面試者如何挑戰大工程師時代來臨? 全世界都在倡導轉職成為工程師,似乎轉職成為工程師就成為職場的救贖,真的是如此嗎?讓老衲來杠給各位聽。 最近有位好久不見的小朋友,是 2000 年出生的小蔡,對於即將面臨到面對職場的挑戰開始關心起技術,他開始尋找比較適合自己的領域,同時也開始在思考到底為了接下來的就職小蔡該如何準備。 詢問我說是不是可以考慮軟體開發工程師這條路線 對於他的詢問,反而引起我的注意, 這讓我開始思考並映射於最近招募的經驗,軟體開發此領域是不是對於每個人都是可以擔任的職啀,這邊分享一些自己的看法希望對各位有所幫助。 全民工程師這件事情 在全球景氣低迷的狀況下,的確特別在這一年大家會很有感覺萬物齊漲,薪水不漲,薪資就是一直停滯不前。 很多時候,在不同的領域中,會發現整個薪資就算是擔任了管理職務主管你也會面臨到薪資的強大屏障在自己面前。 這個時候, 軟體工程師年薪百萬口號 似乎就成了一種救贖。 好像成為了工程師就可以達到年薪百萬,在家輕鬆工作,不用打卡也不用受到風吹雨淋,隨時想工作就可以工作,每個月又有固定薪水入帳,感受到類財富自由,人生的美好。 如果能夠爭取到跨國公司的職位,這份薪水有可能還可以上看每個月十多萬以上,甚至是往上也是極度有可能的事情,人生美好層次又再度提高了起來。 但這件事情是真的每個人都可以達到嗎? 還是這就是另外一種性存者偏差呢? 亦或者這些人其實是金字塔頂端的小眾? 每份履歷都像是同一種履歷 最近在最近幾年在面試工程師的時候特別會看到許多轉職者,一開始履歷裡面看到相關的作品一開始會覺得十分的驚艷, Wow, 現在的新手就可以做到如此精美的畫面,這些畫面是我當初用 Bootstrap 也做不出來的東西,許多的互動體驗好的一個不行,做出來的頁面配色和對齊也是極致。 但是隨著時間推移,多看了幾封履歷之後,就會發現在各大技術養成學院出來的學生履歷成果內容如出一轍,在面試的過程中也會詢問許多關於框架的底層概念,和比較技術觀念的時候,甚至是許多框架的核心概念,就很容易露出馬腳。 很多面試者會 一問三不知 ,透過許多引導,但殘酷的是連關鍵字是什麼都也無法推敲出來,更不用說在小組裡面到底怎麼樣合作,許多不同線上產品的比較,使用者流程,使用者後面的互動邏輯等,幾乎是風吹一片倒,只能

工程師跨越管理的第一道牆 - 放下

越來越複雜的網路應用 2022 年,網路應用越來越複雜,表層是 社群服務 ,轉頭看是 廣告服務 ,詳細看是 個資儲存庫 ,如此複雜的應用,如此眼花撩亂的系統架構, 現代的軟體開發已經從打個人戰,進入到團體戰鬥的打法。 打群架的時代 現在的許多產業,都在徵求軟體工程師,通常是徵求多位,以往以少少數量完成應用服務的時代已經過去。 現代已經是打群架的年代,前端至少一位,後端至少一位,系統管理,雲端管理等,這些都是在軟體公司內具備的職缺,已經很難回到那一人打天下的時代。 因此,誰能夠在技術領域中讓多種面向職能的人,互相進行協作,互相進行工作分配,將產品進度維持穩定產出,這樣的角色變得至關重要。 而通常,除了外部尋找此職能之外,這樣的職位,會以團隊中,最有技術力,且最能夠經常解決問題的人做為代表人。 帶領的第一課 - 『 放下』 相信大家都一定有聽過 彼得原理(Peter Principle) , 因其某種特質或特殊技能,令他被擢升到不能勝任的高階職 位,最終變成組織的障礙物 能力越強的人,通常被拔擢的越快,隨著職位的提升,也越發現能力的不適,而這問題在技術管理職位上特別常見。 因此,技術管理的第一堂課,要跟特別提醒的點是『放下』,特別是要放下自己的技術。 這可能與常理有所違背,為何會讓一個技術最強的人,去放棄他本身的技術呢? 放下的定義 放下,並不是要你放棄,癱軟在辦公室的椅子上什麼都不做,也不是讓你就捨棄掉對於技術的熱情,讓自己故步自封。 放下技術,是放下自己對於任何一種技術的直覺反應,本位思考,我們是否曾經聽過這種話 『如果是我來做,兩小時就可以完成了』 , 『這個很簡單,改一下就好了』 。 但今天,做的人不是你, 你已經進入管理者的角色 ,你已經被賦予 帶領的職能 ,帶領才是你該做的事情。 這時候如果以自己過往的 『經驗,效率,能力』 來看待 『他人』 的執行步驟及過程,會發現所有事情都如此的格格不入。 此時,你需要就是 『放下』 適當的放下自身技術能力 我們可能是因為自己曾經努力過,也可能自己剛好在那個時代,也可能是因為自己比較幸運,不論是哪一種可能,就是這麼剛好的在這個時間點成為 『帶人的那個人』 當我們用自己的眼光去看待所有人,看待所有新鮮人,就如同開著跑車去嘲笑騎摩托車的人不努

淺談 AI 落地到底有多難 - 以 OpenAI ChatGPT 為例

在 目前待領的團隊 ,小弟有幸 參與到 AI 落地的過程 ,之前也參與過幾次 AI 服務導入的和製作出 AI 產品應用的經驗,這邊就提出些簡單分享,跟大家說說,為何 AI 落地有這麼難 ChatGPT 幾乎成為這幾天大家刷版面的資訊,官方網站其實有提到 Chat-GPT 的參考模式是怎麼進行的,也有提供相關的論文參考, https://openai.com/blog/chatgpt/ ChatGPT 幾乎成為現象級的影響 如果你還沒試用過,我建議你真的玩玩看, https://chat.openai.com/chat 在 AI 落地的階段,有許多工程的過程,還有許多現實需要面對,而這煉成的過程都很容易導致 AI 落地失敗, 更不用說像是 ChatGPT 這種十年磨一劍的應用服務,為什麼驚艷, 中英文,簡中繁中等均能 80% 的機率識別問題及主題對話 回應內容,英文的部分不意外的通順,簡中繁中的部分有些詞語是有做過調整的,這實屬難得。 對於資料上下文關聯度,以及變化形式在主題式的發展下均能有效地回應且呈現。 呈現格式可以以『摘要、表格、條列』等方式進行規劃,同時也可以對文字內容進行一定程度的擴張和收斂。 而要做到這些事情,除了大家所熟知的需要不斷的生成模型,訓練模型,不同的模型疊加上去之外。 同時最難也是最複雜的部分, 『資料工程的處理』 AI 工程的開始 在我們使用任何一套 AI 框架 Tensorflow / pytorch 之後,無一例外地就會以特定問題解決方案,開始採用不同的現成 Model 進行驗證,在一開始對於初始的 example data / init data 都會有不錯的反應。 接下來問題開始... 當我們天馬行空的,不斷將例外,將特定領域情境涵蓋進去的時候,你就會發現這 model 的準確率下降,接下來就是一連串調整參數的開始, 或者是開始進行特例發想的部分,哪些資料是需要踢除的,哪些項目是需要先排開的,哪些資料是對於訓練本身是有影響的,在這個過程中就已經進入 data engineering 的環節中。 source from 資料科學家的工作日常 資料工程的處理 大家所想像的,在建立模型的時候似乎就是不斷地調參數,不斷的運作程式,但在這之前,有 『好多好多好多好多』