大高雄Linux使用者協會

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 2013 Javascript Conference: 你不可不知的前端開發工具

台灣第 2 屆 JavaScript 研討會在 5/18, 5/19 登場，今年報到率到 95% 了，我也給了一場 Talk，關於前端工具介紹，包含 CoffeeScript, Compass, Livereload, Bower Package Manager .. 等，最後介紹主軸 Grunt.js 來整合這些工具。

最後附上 Github 專案，歡迎大家 fork。

Related View

by appleboy at 5:56 AM under bower , coffeescript , compass , grunt , gruntjs , javascript , nodejs (Comments)

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» Javascript command line tool GruntJS 介紹

Update: 補上一張執行後的截圖 2013.03.27

GruntJS 是一套 JavaScript Task Runner，為什麼官網會這樣寫呢？網站上線之前，是不是需要經過測試，壓縮，及品質控管，這些 Task 該如何實現，在 GruntJS 還沒出現之前，大家可以透過 Linux command 的方式來達成，但是對於前端工程師而言，多學習 command line 真的是要他們的命，所以 GruntJS 解決了此問題，將所有的 Task 用 Javascript 方式設定就可以自動佈署或測試。GruntJS 的 Plugin 也非常多且完整，像是大家常用的 CoffeeScript、Handlebars、Jade、JsHint、Less、Sass、Compass、Stylus…等都有支援。更多好用的 Plugin 可以在官網搜尋頁面上找到。

安裝方式

Grunt 可以透過 Node.js 的管理工具 npm 方式來安裝，Windows 只要到 Node.js 官網下載安裝包，直接按下一步即可安裝完畢，Linux 可以透過 NVM 方式來管理 Node.js 版本，可以參考作者之前寫的 Node Version Manager 版本管理 NVM。需要注意的是 Grunt 0.4.x 需要 Node.js >= 0.8.0 版本才可以。

如果之前已經安裝 Grunt 請先移除安裝

$ npm uninstall -g grunt

Linux 請切換到 root 使用者來安裝

$ npm install -g grunt-cli

準備新專案

在使用 Grunt 指令前，請在專案目錄內新增 package.json 及 Gruntfile.js 檔案

package.json: 此檔案紀錄專案 metadata 以便將來做成 npm module，另外也會記載專案內所用到 Grunt plugins 版本資訊，像是 devDependencies 設定。
Gruntfile.js: 此檔案可以用 Coffscript.coffee 撰寫，用來紀錄工作內容及相關 Plugins 載入.

PS. 如果是用 Grunt 0.3.x 版本，請命名為 grunt.js

package.json

此檔案記載專案相關資訊，也包含了 GruntJS 所需要用到的 Plugins，範例如下(官網提供)

{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2"
}
}

建立此檔案後，在專案目錄內，執行 npm install，會發現專案內多了 node_modules 目錄。可以將此目錄名稱加入到 .gitignore，免的不小心 commit 到伺服器。如果不想手動更改 devDependencies 資訊，其實可以透過 npm install grunt –save-dev 方式加入到 devDependencies 裡。

Gruntfile.js

可以透過 Gruntfile.coffee 或 Gruntfile.js 來產生檔案，此命名適用於 0.4.x 版本，如果是 0.3.x 版本請命名為 grunt.js。此檔案會包含底下部份

* wrapper 寫法
* 專案及任務設定
* 載入 Grunt Plugins 和任務內容
* 定義特定任務

拿官網的例子來介紹:

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

// Default task(s).
grunt.registerTask('default', ['uglify']);

};

在 package.json 裡面設定安裝 grunt-contrib-uglify 套件，uglify 任務就是將 Javascript 檔案壓縮，當我們執行 grunt 指令時，Grunt 會執行預設的任務 uglify。上面有提到四點 Grunt 檔案會包含的項目，其中第一點是 wrapper 寫法，也就是上面例子內的

module.exports = function(grunt) {
// Do grunt-related things in here
};

接著注意專案的設定，也就是底下內容

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});

所有的工作項目設定都會寫在 grunt.initConfig 裡面，看到第一行 grunt.file.readJSON("package.json")，將 package.json 內容讀到 pkg 變數，接著參數設定就可以使 <% %> 方式讀取。uglify 工作項目內的 options 設定可以直接參考 grunt-contrib-uglify，我們可以定義多個 target 來區分多個工作內容，範例如下

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
},
my_target_1: {
options: {
sourceMap: 'path/to/source-map.js'
},
files: {
'dest/output.min.js': ['src/input.js']
}
},
my_target_2: {
options: {
sourceMap: 'path/to/source-map.js',
sourceMapRoot: 'http://example.com/path/to/src/',
sourceMapIn: 'example/coffeescript-sourcemap.js'
},
files: {
'dest/output.min.js': ['src/input.js']
}
}
}
});

完成基本 Grunt Plugin 設定，接著將此 Plugin 載入

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

最後定義預設的任務

// Default task(s).
grunt.registerTask('default', ['uglify']);

Grunt 設定檔就完成了，可以來進行測試，我們可以直接下 grunt 指令，系統會自動跑預設任務，也就是 uglify，也或者如果有多個任務時，你只想執行 uglify 任務，請將指令改成 grunt uglify，如果是想要執行 uglify 任務內的 my_target_2 項目呢？請直接下 grunt uglify:my_target_2。

基本介紹到這裡，大家對於 Grunt.js 應該都有基本的瞭解。最後補張執行後的圖

Related View

by appleboy at 7:35 AM under grunt , gruntjs , javascript , nodejs , npm (Comments)

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 壓縮 Javascript 和 CSS 檔案 script command

網站上站前要做的事情非常多，其中一項為大家所知就是壓縮 CSS 跟 JavaScript 檔案，減少 Http request 流量，網路上已經有非常多的 Compressor tool，像是 Google Closure Compiler 或 YUI Compressor，都是用來壓縮 JS 或 CSS 檔案，這次寫了 script 來壓縮整個網站目錄裡的 js 或 css 檔案，不過 script 所使用的 Compressor command 是 Node Base 的 tool，分別是 UglifyJS 及 sqwish 這兩套，當然使用 command 之前，請務必先安裝好 Node.js 最新版本啦，不過沒安裝也沒關係，底下有懶人安裝 script command。這些 tool 對於 Embedded System 在 build firmware 相當有用，可以減少不少 code size 阿。

可以直接看專案說明，就可以不必看底下步驟了

系統環境安裝

由於系統內必須安裝 Node.js，才會有 NPM 指令，我們可以透過 NVM 來管理機器各個 Node.js 版本。別擔心，已經有寫好 script 可以一鍵安裝，非常懶人。

$ git clone https://github.com/appleboy/minify-tool.git build
$ chmod +x ./build/minify
$ ./build/install.sh

上述執行完成，就可以使用 UglifyJS 及 sqwish command 了。

使用方式

接著想針對不同專案來壓縮其目錄內所有的 js 及 css 檔案，執行方式如下

$ ./build/minify your_project_folder_path

如果你想保留原來目錄，而另外產生新的目錄來執行，可以透過 [--output|-o] 參數來執行

$ ./build/minify your_project_folder_path -o output_folder_path

這樣就可以了，非常簡單，目前只有支援 UglifyJS 及 sqwish command，將來預計還會支援各種壓縮工具，如果有什麼好用的工具可以介紹，請歡迎留言。

最後補上 Script 專案目錄: minify-tool

Related View

by appleboy at 10:45 AM under css , embedded system , javascript , nodejs , npm , sqwish , uglifyjs (Comments)

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» Bower 管理網站套件的好工具

bower 是 Twitter 團隊開發的一套網頁工具，用來管理或安裝 Web 開發所需要的 Package，像是 CSS 和 JavaScript，也可以依據套件的相依性來安裝，簡單來說，開發者不用再去煩惱套件相依性問題，以及時間久了想更新最新版本，還要到各 Package 網站來下載，這些步驟都省了，一個指令就可以全部做完上述的步驟。

安裝 Bower 管理套件

透過 Node.js 的 npm 工具來安裝

$ npm install bower -g

使用方式

可以透過 bower –help 來查看如何使用，底下來一一介紹，假設要安裝 jQuery 套件，請執行底下指令

$ bower install bootstrap spine jquery

接著該如何查詢已經安裝的套件:

$ bower list

執行上述指令，會列出專案安裝的套件名稱及版號

/home/www
├── backbone-amd#0.9.9
├── handlebars#1.0.0-rc.1
├── jquery#1.8.3
├── requirejs#2.1.2
└── underscore-amd#1.4.3

移除已安裝的套件:

$ bower uninstall jquery

升級已安裝套件:

$ bower update jquery

搜尋套件:

$ bower search jquery

Bower 設定檔

bower 預設安裝的目錄是 components 所以一般 bower install 後，你會看到專案目錄底下會多個 components/xxxx，要改變路徑其實很簡單，你可以在自己家目錄新增 ~/bowerrc 檔案，或者是在專案裡面增加 .bowerrc 設定檔，檔案內容如下

{
"directory" : "assets/javascript/vendor",
"json" : "component.json"
}

這樣就可以將套件安裝在 assets/javascript/vendor 目錄

Bower 套件相依性

在專案目錄底下新增 component.json 檔案，裡面寫入

{
"name": "xxxxx",
"version": "1.0.0",
"dependencies": {
"jquery": "1.8.3",
"backbone-amd": null,
"underscore-amd": null,
"requirejs": null
}
}

完成存檔後，請在專案目錄底下執行 bower install，會發現所有套件都會被安裝到 assets/javascript/vendor 目錄，版號的定義請按照 semver 標準。

上述 bower 安裝的套件，如果搭配 git 控制的話，就不要將上述安裝的原始擋加入版本控制，可以新增 assets/javascript/vendor 目錄，並且在該目錄丟入 .gitignore，接著在將 assets/javascript/vendor 寫入 .gitignore 即可。

Related View

by appleboy at 3:34 AM under bower , javascript , nodejs , twitter , www (Comments)

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» Node Version Manager 版本管理 NVM

Update: 原作者不想要增加 stable 跟 latest，詳細請看 pull request

本篇不是要介紹 Node.js，是要介紹管理 Node.js 版本的工具，之前是玩 Visionmedia 開發的 n，後來跳到玩 Creationix 開發的 nvm tool，但是發現後者的 bash script 安裝都需要指定版本，但是前者可以使用 latest 或 stable 來直接安裝，這個 command 對我非常重要，也就是下 nvm install stable (直接裝好 v0.8.16)，~~已經發 pull request 給作者了，~~如果想使用，可以直接 clone 我的專案:

$ git clone https://github.com/appleboy/nvm.git
$ . ~/nvm/nvm.sh

或透過 bash 方式安裝 (底下擇一):

$ curl https://raw.github.com/appleboy/nvm/develop/install.sh | sh
$ wget -qO- https://raw.github.com/appleboy/nvm/develop/install.sh | sh

使用方式:

# 安裝最新穩定版本
$ nvm install stable
# 安裝最新開發版本
$ nvm install latest
# 移除最新穩定版本
$ nvm uninstall stable
# 移除最新開發版本
$ nvm uninstall latest

顯示穩定版本及開發版本

$ nvm latest
$ nvm stable

Related View

by appleboy at 10:34 AM under nodejs , nvm (Comments)

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» Node.js Version Management 多版本管理

相信大家對於 Node.js 版本 Release 太快而感到困擾，每次新版出來，就要開始升級原本的版本，加上測試及修改，一定會浪費不少時間在上面，不管是任何語言我都希望能有一套 Version Management 來管理各版本之間的差異，以及讓使用者可以隨時切換版本來使用測試。那今天來介紹一套 Node.js Version Management，這隻程式是用 shell script 下去撰寫，可以安裝多版本在 Linux 本機上面，隨時都可以切換不同版本測試。此作者也是 expressjs Framework 發起者。

相信操作方式非常簡單，可以參考 Readme 來安裝測試，我要另外補充的是在 0.6.3 的版本，官方已經 npm (node package manager) 包在裏面了，也就是安裝好此版本，就可以直接使用 npm 指令。但是在 Node.js Version Management 似乎沒有加上 npm 的指令功能，所以我也發了 pull request 給作者，不知道作者會不會加上去就是了。如果想先使用，可以透過我的 github 來安裝。

安裝 Node.js Version Management

$ git clone https://appleboy@github.com/appleboy/nvm.git
$ cd n
$ cp bin/n /usr/local/bin

使用 npm

安裝 nodejs 0.6.3

$ n 0.6.3

安裝 Coffee-script 套件

$ n npm 0.6.3 install coffee-script

查詢以安裝套件

$ n npm 0.6.3 list

PS. npm 只有大於或等於 0.6.3 版本才有內建

Related View

by appleboy at 5:37 AM under coffeescript , javascript , nodejs , npm (Comments)

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 無痛安裝 NodeJS 和 Node Framework Express

NodeJS 是目前當紅的 Web 2.0 技術，去年 COSCUP 2010 就有 KKBOX 資深工程師 ericpi 來探討這個議題，NodeJS 背後使用了 V8 引擎為基礎，沒看過用純 JS 來當 Server-Side 吧，台灣很紅的 Plurk 也是大量使用 NodeJS，然而每開發一種語言，就會想開始找搭配的 Framework，那就首推 Node Framework Express 來撰寫程式，本篇是要介紹如何在 Ubuntu 10.10 無痛安裝 nodejs + express。

下載 Nodejs 原始碼

直接到官網下載 Stable 的版本吧，目前是 node-v0.4.10.tar.gz，也可以先看看 API Document

# wget http://nodejs.org/dist/node-v0.4.10.tar.gz

安裝 Ububtu 相關套件

$ sudo apt-get install python libssl-dev g++

下面會使用最原始的編譯方式，所以必須安裝 g++ 套件，否則下 ./configure 的時候，會吐出來沒有安裝過的套件。

安裝 Nodejs 套件

兩種方法：1.用 apt-get install nodejs 2. 用 tar 方式原始編譯

原始編譯過程如下:

$ mkdir ~/opt/ && cd opt
$ tar -zxvf node-v0.4.10.tar.gz
$ cd node-v0.4.10/
$ ./configure --prefix=~/opt/node

到這裡，如果 compiler 成功，就會產生出 Makefile，如果中間遇到錯誤訊息，大概都是套件沒有安裝，接著執行

$ make && make install

將執行檔路徑放到 PATH

修改 ~/.bashrc，增加底下

export PATH="$HOME/opt/bin/:$PATH"
export NODE_PATH="$HOME/opt/node:$HOME/opt/node/lib/node_modules"
# 重新執行 shell 或者是重新登入即可
source ~/.bashrc

上面安裝步驟都可以參考 Building and Installing Node.js

安裝 Nodejs 管理套件 npm

npm 就類似 Ruby 的 gem，安裝方式很容易

curl http://npmjs.org/install.sh | sh

假如您是用 apt-get 安裝 nodejs 的話，請修改 install.sh

# make sure that node exists
node=`which node 2>&1`

改成

# make sure that node exists
node=`which nodejs 2>&1`

接下來就是要安裝我們的開發環境 Express 這套 Nodejs Framework

安裝 Express

安裝方式可以參考 Express Guide

$ npm install express -gd

解釋一下 -gd 的參數說明，-g 的用意是 executable install globally，也就是我們要在任何地方都可以執行 express 指令，另外 -d 則是將 node_modules 都安裝到 node lib 的目錄裡面，這樣開 express project 就不用再 npm install -d 了，大家可以透過底下兩個指令來瞭解

$ npm list -g
$ npm list

建立 Express 專案

$ express foo && cd foo

直接執行 node app.js 如下

Express server listening on port 3000 in development mode

看到此訊息就是代表成功了，直接打開瀏覽器 http://localhost:3000 可以看到 Express 歡迎畫面

更多 Express Example 可以參考 github 上面的 Express 專案

Ref:

node.js第二講：安裝node.js與express.js
node.js第一講：簡介

Related View

by appleboy at 7:25 AM under express , javascript , nodejs , ubuntu (Comments)

大高雄Linux使用者協會

大高雄Linux使用者協會

開放源碼社群活動

People

What 小惡魔AppleBOY talks about

Meta

tag cloud

Related View

tag cloud

安裝方式

準備新專案

package.json

Gruntfile.js

Related View

tag cloud

系統環境安裝

使用方式

Related View

tag cloud

安裝 Bower 管理套件

使用方式

Bower 設定檔

Bower 套件相依性

Related View

tag cloud

Related View

tag cloud

安裝 Node.js Version Management

使用 npm

Related View

tag cloud

下載 Nodejs 原始碼

安裝 Ububtu 相關套件

安裝 Nodejs 套件

將執行檔路徑放到 PATH

安裝 Nodejs 管理套件 npm

安裝 Express

建立 Express 專案

Related View