聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

十二月 29, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 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 專案。

Gulp 簡介

大家可以把 Gulp 跟 Grunt 用途想成一樣,只是處理 Task 的原理不相同。Grunt 是透過 Task 的概念下去實作,JS 程式存檔後,Grunt 會依序處理使用者定義的 task,例如執行 jslint task 接著 uglify task,最後將檔案搬到您想的目錄。而 Gulp 則是平行處理,假設有5個 js 檔案,Gulp 則是透過 pipeline 方式處理檔案,所以 Gulp 會加速處理結果。

Grunt 原理:

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理5個檔案--- ->  ---處理5個檔案---   -> ---處理5個檔案---

Gulp 原理

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理檔案(1)--- ->  ---處理檔案(1)---  -> ---處理檔案(1)---
  ---處理檔案(2)--- ->  ---處理檔案(2)---  -> ---處理檔案(2)---
  ---處理檔案(3)--- ->  ---處理檔案(3)---  -> ---處理檔案(3)---
  ---處理檔案(4)--- ->  ---處理檔案(4)---  -> ---處理檔案(4)---
  ---處理檔案(5)--- ->  ---處理檔案(5)---  -> ---處理檔案(5)---

Gulp 用法

我們假設寫 Coffeescript 程式,通常寫完會經過 coffeelint 檢查 coffee script 的 Coding style 語法,最後才透過 coffee command 轉換成 javascript 檔案。

在 Grunt 套件,我們會這樣寫

coffeelint:
    options:
        'force': true
        'no_trailing_whitespace':
            'level': 'error'
        'max_line_length':
            'level': 'ignore'
        'indentation':
            'value': 4
            'level': 'error'
    dev: ['**/*.coffee', '!**/node_modules/**', '!**/vendor/**']
watch:
    coffee:
        files: ['**/*.coffee', '!**/node_modules/**', '!**/vendor/**'],
        tasks: ['coffeelint']

如果是用 Gulp 寫法會非常簡單

gulp.task('coffee', function() {
    gulp.src('app/assets/coffeescript/**/*.coffee')
        .pipe(coffeelint({"indentation": {
            "name": "indentation",
            "value": 4,
            "level": "error"
        }}))
        .pipe(coffeelint.reporter())
        .pipe(coffee({bare: true}))
        .pipe(gulp.dest('app/assets/js/'))
        .pipe(refresh(server));
});

有沒有變得很容易閱讀?設定方式也變得很容易,執行速度更不用說了,不會吃太多記憶體及 CPU 了,但是我覺得要取代 Grunt 實在很困難,Grunt 能處理大部分的事情,包含 Deploy 及驗證等等,我覺得 Gulp 就專門用在 RD 開發環境的建置,RD 平時會用到哪些套件?CoffscriptCompass or sasslivereloadwatch event,大致上這些就已經很足夠了。

由於沒找到 Compass Gulp plugin,只看到 sass plugin,所以我寫了簡易的 Gulp plugin,有用 compass 務必安裝

$ npm install gulp-compass --save-dev

使用方式可以參考 Readme

七月 21, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Coding on workspace of Chrome Developer tools

Google Chrome

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

啟動 Workspace

打開 Chrome 瀏覽器,在網址列輸入: chrome://flags/,並且找到 Enable Developer Tools experiments,啟動此選項,最後重新啟動瀏覽器

Selection_004

打開 Chrome Console 介面,並且點選右下角 Setting 會看到此畫面

Selection_005

點選到 Experiment 後,將 File system folders in Source Panel 勾選,並且重新啟動瀏覽器

使 Workspace 編輯檔案

完成上述步驟,接著就是將 local 目錄掛到 Chrome Dev Tool 介面,請先打開瀏覽器,打 local 網址,並且將 console 介面打開

Selection_006

指定好 path 後,可以將 setting 頁面關閉,然後切換到 Sources Tab,你會發現如下圖

Selection_007

我們可以開啟 app/index.html,直接在 console 介面編輯並且存檔

Selection_008

接著直接 refresh 網頁即可。

心得

用 workspace 其實重點就是你可以直接開 browser 然後旁邊的 console 介面可以直接編輯,而不是切換到系統編輯器修改,當然這還不是很方便,如果搭配了 GruntJSLiveReload,你會發現,編輯程式碼後,Grunt 也是會自動跑相關設定,LiveReload 也會自動幫忙更新網頁喔。

可以參考之前的文章: 2013 Javascript Conference: 你不可不知的前端開發工具

另外可以直接拿下面兩專案來跑 RequireJS + Backbone.js + GruntJS
Github: html5-template-engine
Github: backbone-template-engine

四月 16, 2012

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Windwos 下安裝 Web Developer tool LiveReload

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

安裝 LiveReload Server

目前官網提供 Pre-Alpha v0.0.3 安裝包下載,下載之後,跟平常安裝 Window 軟體一樣,按下一步就可以了,完成後直接從程式集裡面啟動,並且加入需要偵測的目錄即可。

安裝 Browser extension

官網目前提供 Safari, Chrome, Firefox 2.0.8 版本,大家可以根據 Browser 種類去下載,或是插入一段程式碼到 html file body 之前即可

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

Related View

十一月 4, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 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)


大家一定很想知道為什麼 Live.js 可以知道檔案更改的狀態,其實原理蠻簡單的,在 JS 每秒偵測一次全部 js html css 檔案,比對 Header 內容,只要是跟原本 Header value 有不相同,js 跟 html 會用 document.location.reload();  方式重新整理,另外 CSS 部份則是會 Remove 舊的 link,換上新的 css?now=new Date() * 1。原理大致上是如此,接著我們該如何使用它呢,非常簡單,只要把下面的 Link 直接拉到 Chrome 的 Tool Bar 即可。

use the bookmarklet! Drag the following link to your bookmarks bar: Live.js

Related View

十月 27, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

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

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



底下會簡單介紹 Ubuntu 及 FreeBSD 的安裝方法,其實在官網 README 都寫的蠻清楚。

Linux 安裝方式

用 apt-get 指令安裝

$ sudo gem install rb-inotify livereload

FreeBSD 安裝方式

原本我也是打算用 gem 方式安裝,不過安裝好之後噴出底下錯誤訊息

/usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:36:in `gem_original_require': no such file to load -- em-dir-watcher/platform/nix (LoadError)
        from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:36:in `require'

        from /usr/local/lib/ruby/gems/1.8/gems/em-dir-watcher-0.9.4/lib/em-dir-watcher.rb:16
        from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:36:in `gem_original_require'
        from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:36:in `require'

        from /usr/local/lib/ruby/gems/1.8/gems/livereload-1.6/bin/../lib/livereload.rb:2
        from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:55:in `gem_original_require'
        from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:55:in `require'

        from /usr/local/lib/ruby/gems/1.8/gems/livereload-1.6/bin/livereload:3
        from /usr/local/bin/livereload:19:in `load'
        from /usr/local/bin/livereload:19

會出現這錯誤訊息的原因是在 Ruby 偵測 OS 的時候出現問題

module EMDirWatcher
    PLATFORM = ENV['EM_DIR_WATCHER_PLATFORM'] ||
        case Config::CONFIG['target_os']
            when /mswin|mingw/ then 'Windows'
            when /darwin/      then 'Mac'
            when /linux/       then 'Linux'
            else                    'Nix'
        end
end

FreeBSD 底下 Config::CONFIG['target_os'] 會顯示 FreeBSD 字眼,所以此變數就會被設定到 Nix 然後就炸開了,為瞭解決這個雷,請另外安裝 sysutils/rubygem-guard-livereload port,透過底下指令來執行 LiveReload

# 初始化設定
guard init livereload

此指令會在目錄底下產生 Guardfile 檔案,內容是

# A sample Guardfile
# More info at https://github.com/guard/guard#readme

guard 'livereload' do
  watch(%r{app/.+\.(erb|haml)})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{.+\.(css|js|html)})
  watch(%r{(.+\.css)\.s[ac]ss}) { |m| m[1] }
  watch(%r{(.+\.js)\.coffee}) { |m| m[1] }
  watch(%r{config/locales/.+\.yml})
end

可以看到 LiveReload 會偵測 css js html s[ac]ss coffee script 都可以。此步驟是用在 FreeBSD 機器,如果是 Linux 請參考以下步驟

LiveReload 使用

經過上面步驟安裝 LiveReload 後,接著來介紹如何在 Server 端使用 LiveReload,這指令會在 Server 端開啟一個 port 好讓 Client 端連接上,底下是建立方法。

# livereload 目錄
livereload /path

livereload 預設會 listen 0.0.0.0 address 及 tcp port 35729,如果要更改這兩項設定,請更改 option 設定

livereload --address [ADDRESS] --port [PORT]

執行後會吐出下面訊息

Version:  1.6  (compatible with browser extension versions 1.6.x)
Port:     35729
Watching: /var/www/html/Client
  - extensions: .html .css .js .png .gif .jpg .php .php5 .py .rb .erb
  - live refreshing disabled for .js: will reload the whole page when .js is changed
  - excluding changes in: */.git/* */.svn/* */.hg/*
  - with a grace period of 0.05 sec after each change

LiveReload is waiting for browser to connect.

以及會在目錄底下產生 .livereload 隱藏檔,檔案內容可以針對不想要偵測哪些檔案或者是目錄分別做設定,相當方便,此原理是偵測 server 端修改檔案,透過 web socket 通知 client browser reload 網頁,解決掉手動 reload 網頁時間,同時也支援 server side language: PHP , Compass SASS Less.js …等。

Client 端安裝

至於 Web Browser 就是安裝 Plugin,且設定 Web Host 及 port 就可以連接上了,目前官方提供了 FireFox, Safari, Google Chrome 等三者瀏覽器 plugin

如果讀者環境是 Windows,請參考鐵兄的網誌 在 Windows 下使用 LiveReload,另外也可以參考 XDite 大大寫的 LiveReload:你的套版好幫手!

Related View

support:

biggo.com.tw

A Django site.