The streaming build system Gulp

gulp

看到 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 專案。 Continue reading “The streaming build system Gulp”

Coding on workspace of Chrome Developer tools

Google Chrome

相信網頁設計師並不陌生 Chrome DevTools,善用 DevTools 可以減少很多 Debug 時間,今天來介紹如何在 Chrome 瀏覽器上直接編輯程式,並且存檔,重新整理網頁後便可看到結果。聽到這裡大家一定會很好奇,不就開系統編輯器 (sublime, pspad, vim …) 工具,直接修改 => 存檔 => 重新整理嘛?但是這並不稀奇阿,重點是 Chrome 瀏覽器可以直接支援 線上編輯檔案,而不是透過系統工具做編輯。這就是 Chrome 強大的地方,今天就來介紹 Chrome workspaceContinue reading “Coding on workspace of Chrome Developer tools”

Windows 下安裝 Web Developer tool LiveReload

去年寫了一篇: LiveReload 網頁程式設計師必備工具,介紹如何在 FreeBSD 及 Linux 底下安裝 Livereload,相信過程也都不難,只是筆者目前有在 Windows 底下開發 Web,原本是透過 Linux 來使用 Livereload,但是我發現只有在 Chrome 才可以 Work,但是 FireFox 提供的 LiveReload :: Firefox 附加元件,安裝之後,發現瀏覽器根本沒有出現按鈕讓使用者連接伺服器,所以這方法作罷,查了官網資料才知道已經有提供 Windows 安裝檔架設 Server,及 Browser extension 來連接伺服器。

Continue reading “Windows 下安裝 Web Developer tool LiveReload”

Front End Engineer 前端設計師必備工具 Live.js

Livejs
在不久之前介紹一篇: 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)
Continue reading “Front End Engineer 前端設計師必備工具 Live.js”

LiveReload 網頁程式設計師必備工具

如果讀者目前從事的工作跟 Web Develop 相關,相信每天在按 Ctrl + R 的次數至少在上百次吧,也許花在這上面的時間會真的很煩,有沒有想過如果每次修改 html php css s[ca]ss js 檔案後,網頁會自動幫忙 reload 呢,這樣就可以另外買個螢幕把網頁拉過去,修改好檔案,螢幕就會幫忙重新整理,大家省下這些時間就可以專心寫 Code 了啦,解決此問題非常容易,那就是裝上 livereload 這套 rubygem 程式,底下先看看 livereload 影片: Continue reading “LiveReload 網頁程式設計師必備工具”