看到 Yeoman 作者之一 Addy Osmani 開始 review Gulp build system,由於 Yeoman framework 跟 GruntJS 是很緊密結合的,但是 GruntJS 套件愈來愈多,漸漸的執行 GruntJS 後,開始吃了系統 CPU 及記憶體,這對於開發環境而言,會是一大負擔阿,大家不知道有無發現,跑 Nodejs GruntJS 時,每當存檔的時候,CPU 就開始哀嚎了,我自己是有這方面的體會,加上團隊內並不是每位同仁的電腦都是很 powerful,原本是好意讓團隊開發更遵守 coding style 及統一開發環境,但是 Grunt 的肥大,讓整個 Client 環境 Loading 飆高。所以 Yeoman 看到了 Gulp。也有考慮如何將 Gulp 整合到 Yeoman 專案。
[Read More]Coding on workspace of Chrome Developer tools
相信網頁設計師並不陌生 Chrome DevTools,善用 DevTools 可以減少很多 Debug 時間,今天來介紹如何在 Chrome 瀏覽器上直接編輯程式,並且存檔,重新整理網頁後便可看到結果。聽到這裡大家一定會很好奇,不就開系統編輯器 (sublime, pspad, vim …) 工具,直接修改 => 存檔 => 重新整理嘛?但是這並不稀奇阿,重點是 Chrome 瀏覽器可以直接支援 線上編輯檔案
,而不是透過系統工具做編輯。這就是 Chrome 強大的地方,今天就來介紹 Chrome workspace。
Windows 下安裝 Web Developer tool LiveReload
去年寫了一篇: LiveReload 網頁程式設計師必備工具,介紹如何在 FreeBSD 及 Linux 底下安裝 Livereload,相信過程也都不難,只是筆者目前有在 Windows 底下開發 Web,原本是透過 Linux 來使用 Livereload,但是我發現只有在 Chrome 才可以 Work,但是 FireFox 提供的 LiveReload :: Firefox 附加元件,安裝之後,發現瀏覽器根本沒有出現按鈕讓使用者連接伺服器,所以這方法作罷,查了官網資料才知道已經有提供 Windows 安裝檔架設 Server,及 Browser extension 來連接伺服器。
[Read More]Front End Engineer 前端設計師必備工具 Live.js
LiveReload 網頁程式設計師必備工具,該篇適合用在寫後端+前端的開發者,對於剛開始摸網頁的初學者可能不是很容易就上手,加上在 Windows 或 Linux 上面需要一點安裝步驟。不久之前在 IRC 頻道 #codeigniter.tw 有網友熱心提供一套好用工具 Live.js,這一套幫助您開發前端設計的部份,也就是 Javascript Html 跟 CSS,一樣讓您不用在切換視窗 Alt+TAB,只要您任何時間修改了 HTML + CSS + Javascript,視窗就會自動重新 reload,底下整理該工具特性
- 只有支援 Html JavaScript CSS 三種格式
- 只有支援網站 Local 檔案,也就是必須是同網域
- 並不支援 File:// 協定,換句話說必須有 Web Server (Apache or Lighttpd or Nginx)
LiveReload 網頁程式設計師必備工具
如果讀者目前從事的工作跟 Web Develop 相關,相信每天在按 Ctrl + R 的次數至少在上百次吧,也許花在這上面的時間會真的很煩,有沒有想過如果每次修改 html php css s[ca]ss js 檔案後,網頁會自動幫忙 reload 呢,這樣就可以另外買個螢幕把網頁拉過去,修改好檔案,螢幕就會幫忙重新整理,大家省下這些時間就可以專心寫 Code 了啦,解決此問題非常容易,那就是裝上 livereload 這套 rubygem 程式,底下先看看 livereload 影片:
[Read More]