顯示具有 Nodejs 標籤的文章。 顯示所有文章
顯示具有 Nodejs 標籤的文章。 顯示所有文章

nodejs run coffeescript via javascript

CoffeeScript 一直都是我很愛用的語言,但使用上常常需要先 compile 成 javascript 才可以執行,如果是 F2E 的還好,畢竟在出 build 過程中直接 compile 就可以,但 nodejs 上這樣感覺有點怪,能夠直接跑 coffee 當然是最好,好在 CoffeeScript 1.7 後有了這項功能。

首先必須在專案中安裝 CoffeeScript

npm install coffee-script --save

安裝完後在程式進入點如下,其中 './lib/main' 就是 './lib/main.coffee',之後的檔案也就直接使用 CoffeeScript 來撰寫就好
require('coffee-script').register();
require('./lib/main');

相關連結
CoffeeScript

git hooks deploy (nodejs)

deploy(部屬) 是個 production 的必經階段,該怎樣做的方便又穩定是個重要的關鍵,先來談談一般 web server deploy (以 nodejs 為例,這邊暫時不談 server side 架構)

(假設使用 bitbucket host git repo)

1. 把 local source code push (本地端原碼推到) bitbucket
2. ssh 連到 web server
3. git pull 想要的版本
4. npm install(更新 package)
5. restart node process (重起線程)

以上的步驟看起來其實也不難,ssh 連到 web server 的步驟也可以使用 key 的方式來減少輸入密碼步驟,進入後需要進行的東做也不是很難,但總是要問自己一下 "還能不能更好?",立馬想到先前使用些 saas 的經驗,如 heroku, openshift, nodejitsu ... 等,使用方式非常簡單,只需要把 code push 上 saas server,就自動可以跑起來,這種感覺真的太棒了!以 heroku 為例,會要求你在原本的 local repo 加入一個 remote 的位置(如下),之後想要 deploy 只要 `git push heroku master` 就可以丟上 heroku 並自動重起。
git add remote heroku GIT_REPO_URL

想要自己實作這段就必須使用 git hooks,以 bitbucket 為例(下圖),可在 repo 設定收到 push 後要執行哪些指令,bitbucket 很貼心的與很多不同的 service 合作,讓 hooks 更方便(一般常見的 git host 都有實作,不論是 github, gitlab...等都有)。


這段收到 push 後必須執行哪些指令的行為就是 git hookspost-receive,收到 push 後想要執行哪些指令,pust-receive 為 bash script,所以可以方變得跟各種 cmd 整合,基本上可以將最上面的步驟 3, 4, 5 整合,pull 想要的版本、更新package、重起 node process,但還是缺少了最重要的東西,git 要 push 到哪?

首先建立一個 git repo 並且使用 bare



接著更新 $HOME/deploy.git/hooks/post-receive(範例中使用 forever 來管理 node process,亦可使用 nodeman, pm2 等來管理)


最後就是在開發的 repo 中加入 remote 路徑,ssh user, ip 就與 ssh 登入是相同的
git remote add production SSH_USER@SSH_IP:~/deploy.git

完成後 deploy 就與 heroku, nodejitsu, openshift 一樣只要下指令就自動完成 deploy 所有流程(更新最新版 source code,更新 node package,重啟 nodejs process)
git push production master


相關連結
heroku
openshift
nodejitsu
bitbucket
github
gitlab
git hooks
forever
nodeman
pm2

sailsjs router regex

相信很多人都有在 sailsjs 的 config/router.js 中看到下面這段,這問題就是當 controller 與 static directory 衝突時 router 該如何處理,官方其實在下面這段有寫出解決方案,但實際使用上沒辦法正常運作。

// What about the ever-popular "vanity URLs" aka URL slugs?
// (you remember doing this with `mod_rewrite` in PHP)
//
// This is where you want to set up root-relative dynamic routes like:
// http://yourwebsite.com/twinkletoezz993
//
// You still want to allow requests through to the static assets,
// So we need to set up this route to allow URLs through that have a trailing ".":
// (e.g. your javascript, CSS, and image files)
'get /*(^.*)': 'UserController.profile'

如果想要達到相同的效果可以使用另一個方式如下:
'get /[^.?]+?': 'UserController.profile'

但這時可能會遇上另一個問題,原本 sailsjs 的 router 設計為 :controller/:action,所以如果是想要把所有 '/XXXXXXXXX' 都對應到 UserController 的 action,就沒辦法在 controller 的 req 拿到 req.param('action') 取得要對應的 action,因此可以將上方這段修改為:
'get /:action([^.?]+?)': 'UserController.profile'

修改完後只要是連到 '/XXXXXXXXX' 都會被指向 UserController 的 profile action,而 UserController.profile 的 req.param('action') 就會是 XXXXXXXXX 的名稱,如果是連到 '/logo.png' 等連結會被指向 static directory,這邊也建議如果要使用這種方式請把 profile 改為 index,由 index 來做處理,畢竟 profile 這字這樣使用不太恰當。


如果是想要只開放幾個特殊狀況才進行上面這段可以修改為:
'get /:action(profile|page)': 'UserController.profile'

這樣修改後會發現只有 '/profile', '/page' 會指向 UserController 的 profile,而 req.param('action') 也會拿到 profile/ page,其他的如果沒有 static file 就會被導到 404。


-------- update 2013-11-11 -------
其實這段 regex 跟原本的寫出來會略有不同,真正原因是 sails 會對這段 regex 作些調整:
如果你寫 /:action(*) 會被 sails 轉譯為「^\/(?:( YOUR_REGEX ))\/?$」,而「*」會被改為「.*」也就是所有字元都可以,這部份目前看起來是直接將轉譯後的 regex 對應到 expressjs 的 router。
-------- update 2013-11-11 -------


相關連結
sailsjs document - router

SlideNote new feature transition and themes

SlideNote 過去只有一個樣板,我認為字型就像是投影片的靈魂,沒有好的字型看起來就是有點缺陷,所以新增了 8 個字型與配色,以及 7 種過場動畫。

Screenshot


字型、配色:Default, Beige, Moon, Night, Serif, Simple, Sky, Solarized


Transition:Cube, Page, Concave, Linear, Fade, None


相關連結
SlideNote

http response \ufeff

前幾天遇上從 server api 拿到的 response 會在第一個字元收到 \ufeff,jquery 的 ajax 會直接 fail,但直接看 response 會發現 status code 一樣是200,json 的內容也是正常,但 ajax 就是會變成 fail。

目前查詢到的資料來看,這是 utf8(BOM) 的問題, IDE 的編碼在儲存時如果編碼為 BOM 會在第一個字元插入\ufeff,而\ufeff這字元是個特殊的空白字元,一般的 IDE 會自動把這濾掉,所以你將 response 貼上 IDE 想要檢查問題出在哪一般也看不到,建議使用 vim 來看,會清楚的看到這字元,或者 chrome 的 inspect 也會發現如下圖的紅點:


其實這問題看起來真的跟使用的語言無關,似乎與 IDE 關係比較大,從 google 搜尋看起來就是跟網路相關的語言都容易碰上(如下圖)


Nodejs 的 V8 會自動將這字元濾掉,除非你連續寫了兩個\ufeff,不然不會發生,其他語言可能就要注意一下,在發生這問題請不要懷疑自己寫的 code,應該先去查 IDE 的編碼,而這問題也不會是前端的問題,由 server side 處理更為恰當。

nodejs hosting service - openshift

nodejsgithub wiki 上可以找到一個頁面為 Node hosting 上面有相當多的服務可以選擇使用,著要是測試用機器,所以幾個重點條件就是:

1. deploy 後立馬可以使用
2. 可以跑 nodejs 並且支援 0.8+ 的版本
3. 使用 Git 做版本控管
4. 免費(超重要)

基於以上條件目前使用過兩個服務:
1. heroku
2. openshift

這次先來介紹 openshift,oepnshift 是頂頂大名的 redhat 提供的服務,這次使用的是 openshift online,產品定位為 Public Paas,有支援語言:Nodejs 0.6+, 0.10+, JAVA, PHP, Python, Ruby, Perl, GO (註1),或是可以直接在上面架設 Jenkins, Drupal, Wordpress 可直接開啟不需要自行 deploy。 openshift 官方還有寫了一套 Command-line client 工具來對 deploy 上去的 app 坐操作,關閉、啟動、重起、目前的 log 等,詳細可至官方查詢

當然最重要的 openshift 符合我們所有的條件,並且免費的 Gear(instance) 可以開三台,如官網價錢
Size MemMemory Storage Recommended for Cost
Small 512 MB
1-6GB
1GB
expandable

PHP, Perl, Python, Ruby, Node.js, MySQL $0.04/hour
after the first 3
Medium 1GB
1-6GB
1GB
expandable

Java, MongoDB, PostgreSQL $0.10/hour
Medium (with JBoss EAP 6)
Java EE6 Full Profile
1GB
1-6GB
1GB
expandable

JBoss EAP $0.13/hour




這麼佛心看到只能馬上跪下說聲「謝主龍恩」不然也不知道該怎麼辦,目前使用上除了 deploy 速度很慢(相較起 heroku),web 介面非常醜並且不人性化,常常找不到資料,官方文件看不太懂以外,其實還蠻不錯的,畢竟是要免費的測試機還是別太苛求。

目前就一點特別需要注意,deploy 上去後 port 與 root url 設定上與一般不太相同,必須修改如下:
port 必須設定為「process.env.OPENSHIFT_NODEJS_PORT」
root url 必須設定為「process.env.OPENSHIFT_NODEJS_IP」

sails 為例,local.js 必須修改如下


註1. 除了nodejs 外其他語言支援版本可至官方開發者中心查詢

相關連結
nodejs
github wiki
Node hosting
heroku
openshift
openshift developer center
openshift Command-line client
openshift pricing
sailsjs

node-hipchat

Hipchat 是一套相當好用的 Log system,還可以與 Github, Bitbucket, jenkins......等服務整合,團隊中打屁的同時還可以看到系統狀況,因為 Hipchat 官方給 nodejs 的不知道在寫啥鬼,所以就自己寫了一個簡單的版本

使用起來相當簡單,詳細可以參考如下,完成後就會看到你的 room 中噴出兩筆 log

var hipchat = require('./lib/hipchat');

// log warn
hipchat.logger('Hello hipchat logger - warn', 'warn');

// log error
hipchat.logger('Hello hipchat logger - error', 'error');

這麼好用的東西當然要立馬 clone
git clone git@github.com:IskenHuang/node-hipchat.git


相關連結
Hipchat
IskenHuang/node-hipchat

sailsjs differentiate api and view controller

Sails 是一套我相當喜歡的 Node.js web framework,底層仍然是使用 Express.js,另外整合了很多常用的 web 套件:grunt, socket.io, RESTful API, ......等。

由於 sails 的架構與 codeigniter 相當類似,Controller 對應到 View,並且對應到 route,在 config 中有個 controller.js 還可以對所有的 controller 做設定,如自動產生 restful api 等,以及這次的重點「prefix」,prefix 設定後在 route 上就會自動改變如下

使用 prefix 前
http://localhost/CONTROLLER_NAME/ACTION_NAME

使用 prefix 後( prefix 設定為 '/api/')
http://localhost/api/CONTROLLER_NAME/ACTION_NAME

如果只是要做 api server 相信這會是個很棒的設計,還可以作為 api 的版本區分(例如「/api/v1/」),但要做「網站」在 view 與 api 之間就必須做些區分,以下的作法就是將 view 與 api 切開,view 統一由 ViewController 控制,其他的 api 交由一般的 controller 控制,從 route 看起來如下
// ViewController
// Get user or user's view
http://localhost/user

// UserController
// Get user '1' api
http://localhost/api/user/1

資料夾目錄如下


接下來開始實作把 api 與 view 切開
首先是設定好 api 的 prefix,修改 「/config/controllers.js」


再來是設定 route 把 view 改為 '/',修改「/config/routes.js」
routes.js


最後是產生 ViewController,在 terminal 輸入
sails generate controller view

並修改 「/api/controllers/ViewController.js」



ps. 或許也可以直接做 single page design,但某些狀況下透過 controller 可以從 server side 將其他訊息一併回給前端

完整的 code 可至 Gist 查看

相關連結
Sails
Node.js
grunt
socket.io
Express.js
codeigniter

Insert CSS style into html head in build process

網頁速度慢除目前看起來最大問題就是 http request 數量太多,因為每次的 request 都需要一定的時間,如果能夠壓縮在同一個 request 是最棒的狀況,前面幾篇有把 Javascript 用 uglify 把檔案壓成一支,以及把小的圖片轉換為 data uri 隨著 html/css 一同載入,這次要做的是把 CSS 直接以 <style> tag 直接塞入 html 的 head 中,讓 CSS 的隨著 html 一起載入,請小心使用

這次的 script 一樣是由 coffeeScript 寫成,以及使用 cheerio 來作 dom select


立馬下載使用



相關連結
image in csshtml from url to uri
html script tags combined a js flie
uglify
coffeeScript
cheerio

image in css/html from url to uri

上次寫了一個單獨一個檔案轉換為 data uri ,但在網站圖片尚未完全確定前這樣做事相當花費時間而且難以驗證檔案,所以再寫了一個 script 夾帶再出 build 流程中,方便的把圖片轉換為 data uri,當然 data uri 沒辦法適用所有的圖片,所以 script 中的 minSize 就是設定要轉換的圖片尺寸上限,單位為 pixel (大約計算出檔案大小),由於 html parse 重寫一次比較麻煩,所以使用了 cheerio 方便做 dom selector

由於許久沒寫 coffeeScript 決定用這 script 快速複習一下



相關連結
cheerio
nodejs image to Data uri
coffeeScript

html script tags combined a js flie

最近每天都在做網頁效能優化,過去 javascript 可能因為很多 plugin 增加了很多 request 次數,或許可以使用 parallel 方式來加速,但始終沒解決浪費頻寬問題,使用 uglify 可以方變得解決需要壓多個 javascript ,但如果網站有一堆頁面都要這樣做一次,每次出 build 都要做一次是非常累人的事,因此寫了一個 script 來處理這個累人的問題。之後再找時間來處理些 error handle 以及,包成一個完整的 module

使用方法很簡單,下載檔案後要先設定好幾個重要的路徑

// javascript 資料夾路徑(相對路徑,相對於 uglify.js這檔案)
JSRootUrl = __dirname + '/js/',

// html 資料夾路徑(相對路徑,相對於 uglify.js這檔案)
viewRoot = __dirname+ '/../application/views',

// 要略過的檔案名稱( html 資料夾)
skipFiles = ['.DS_Store', 'mail'],

// 壓縮完的檔案名稱後需要加上哪些文字,例如 main.min.js
suffix = '.min',

// 要壓縮哪些 scripts 設定( html 資料夾的 tag 名稱)
jsTagRegex = /\\<\/script\>/ig,
設定完後只要下簡單的一行,就會進行兩件事 1. 把 html files 符合 "jsTagRegex" 這規則的 javascript 拿掉,取代為 <script src="XXXXX.min.js"></scrips> 2. 把 html 頁面中會需要用到的 javascript 壓成一支
node uglify


相關連結
uglify

Quick launch nodejs expressjs web server

Expressjs 是一套 nodejs 上非常熱門的 web framework ,提供了相當彈性的功能,豐富的社群支持,是個很棒的 nodejs web framework 選擇,但身為前端工程師常常需求只是 "想要建立一個單純的 web server ",這需求達成方法有很多, apache, nginx 等都可以達到想要的功能,但如果是同時間需要多開幾台 servser 模擬,或好多個專案在不同資料夾中透過 apache, nginx 設定可能不是這麼快速(好吧...應該是我手殘)

立馬下載

使用方法
Step1. 安裝 nodejs & npm (download: http://nodejs.org/download/)

Step2. 安裝 expressjs (http://expressjs.com/) 在 global
$ sudo npm install express -g

Step3. 立馬開始使用
$ node app

預設的 PORT 為 3000,根目錄路徑為 與 app.js 相同路徑,如果還要再多開一個呢?請多開一個 terminal ,然後再下一次" $ node app ",這時候應該會遇到錯誤訊息告訴你 server 已經開啟,所以提供了另一個功能,可以自訂 PORT 以及根目錄

開啟在 web server 在 8000 PORT 根目錄為 web1
$ node app 8000 ../web1

開啟在 web server 在 9000 PORT 根目錄為 web2
$ node app ../web2 9000


* PORT, 根目錄兩個參數前後順序可以自訂




相關連結
Expressjs
apache
nginx

nodejs image to Data uri

前端為了減少 request 數量可以說是用盡各種方式, Javascript 壓成一支, css 壓成一支,圖片用 image sprite 壓成一張大圖,用盡各種方式把 request 數量減少,讓使用者體驗變得更好。

對於圖片來說 image sprite 是一種很好的方法,但是總會問一下自已「能不能更好?」於是找到了 Data uri 的方式,把圖片轉換為字串,跟著 html, css 一起載入, HTML 的img tag 的 src ,或者 CSS 的 backbround-image 一並載入。產生 Data uri 有些線上工具可以使用,但基於懶人精神 懶得按滑鼠、懶得選取檔案、懶得連上網路(那你做 web 幹嘛!?) 所以就寫了一個簡單的工具,目的當然很簡單,不用上網( local 可以解決),不用使用滑鼠( command line 就可以執行),產生完自動幫我複製到剪貼簿(立馬可使用 ctrl + v)

根據 Caniuse 表示 Data uri 在 IE8+, firefox 2.0+, chrome 4.0+, safari 3.1+, opera 9.0+, 以及所有的 mobile browser 都有支援,所以網站如果是支援 IE8 以上的網頁應該是可以安心服用。

Gist - https://gist.github.com/IskenHuang/6434813

使用方法很簡單在下載後的檔案同目錄下輸入

node img YOUR_IMAGE_PATH

馬上就產出 data uri 並且複製到剪貼簿中,立馬享有 ctrl + v 快速產出的快感( Mac only ),產生出來的字串包含了 data:image/png;base64, 所以直接貼入 HTML img 的 src="PASTE_HERE" ,或 CSS background-image 的 url( PASTE_HERE ) 中。

source


相關連結
Caniuse - datauri
Gist - https://gist.github.com/IskenHuang/6434813

Nodejs file upload

在server端需要加入,主要為上傳到暫存資料夾,然後刪除再將檔案移動至想要的資料夾中


html使用form方式加入,使用bootstrap的CSS將畫面美化


相關連結
Twitter Bootstrap
Nodejs