Express + Jade/LESS/Coffee with LiveReload
廢話
2014年的第一篇文，去年算是生中的轉折，從今年開始已不是學生，但是學習不能停止，所以趁著比較有空的時候把TODO中要學的東西全部湊合在一起，混在一起當撒尿牛丸！
平常喜歡自幹習慣了，難得來用用別人已經做好的東西。這邊就先來用Express來搭配其它東西來開發網站。這邊用到的套件有Jade、LESS、CoffeeScript以及LiveReload。
Express
"web applicaion framework for node"
可用於建立網站應用程式。是一套流行的NodeJS套件。
Jade
"Node Template Engine"
擁有自己一套簡潔語法以及新的特性，用來產生HTML格式。
LESS
"The dynamic stylesheet language"
支援Variable、Mixin、Nested Rule...等，並可以編譯成CSS供瀏覽器使用。
CoffeeScript
"CoffeeScript is a little language that compiles into JavaScript"
它將JavaScript的語法簡化，並提供一些新的特性來強化，可產生出符合規定且嚴謹的JavaScript程式碼。
它剛出來的時候超夯的，只是我一直都沒有去使用它。
LiveReload
"a happy land where browsers don't need a Refresh button"
寫網頁最常做的事情就是不斷、不斷、不斷的Refresh頁面，它可以在檔案存檔的當下就自動幫你更新頁面，讓你可以即時看見更改後的結果。
它有很多的版本，這邊用到的是NodeJS的版本。
產生並修改專案
Express本身預設的樣板引擎是Jade，另外內建就能支援LESS的middleware，在指令中加入參數-c less就可以了。
express -c less /path/to/project
cd /path/to/project
vim .package.jsonpackage.json
接著修改package.json，加入connect-coffee-script、livereload套件設定。
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.7",
"jade": "*",
"less-middleware": "*"
"connect-coffee-script": "*",
"livereload": "*"
}
}最後就可以用npm安裝套件了。
npm installapp.js
接下來開始修改app.js。
首先修改LESS Middleware的設定，將輸出CSS檔案的資料夾設定到/tmp，並且將壓縮設定開啟。
接著加入CoffeeScript Middleware的設定，同樣也是指定輸出資料夾為/tmp。最後將剛剛的輸出路徑/tmp加入到靜態檔案的路徑中。
將Middleware輸出檔案的路徑指定到/tmp有個好處，這樣設定Git Ignore就可以直接忽略掉這個資料夾，而且輸出的檔案也不會跟原始檔案混雜。
...
app.use(require('less-middleware') ({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'tmp'),
compress: true
}));
app.use(require('connect-coffee-script') ({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'tmp')
}));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'tmp')));
...加入新的Route rules讓LESS及CoffeeScript的原始檔無法被讀取。
...
app.all('*.(coffee|less)', function (req, res) {
res.send(404);
});
app.get('/', routes.index);
app.get('/users', user.list);
...加入LiveReload的設定，讓它能夠認得Jade、LESS以及CoffeeScript的支援。
Jade是放在/views裡，而LESS、CoffeeScript則是放在/public裡，所以讓sLiveReload個別去監聽資料夾內檔案的變化。
...
var livereload = require('livereload').createServer({
exts: ['jade', 'less', 'coffee']
});
livereload.watch(__dirname + '/public');
livereload.watch(__dirname + '/views');
...最後別忘了幫瀏覽器安裝LiveReload的extension。
結語
最後只要將express啟動，並將瀏覽器的LiveReload Extension連線打它就可以開始開發了。
下面是app.js完整的檔案。
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('less-middleware') ({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'tmp'),
compress: true
}));
app.use(require('connect-coffee-script') ({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'tmp')
}));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'tmp')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.all('*.(coffee|less)', function (req, res) {
res.send(404);
});
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
// LiveReload
var livereload = require('livereload').createServer({
exts: ['jade', 'less', 'coffee']
});
livereload.watch(__dirname + '/public');
livereload.watch(__dirname + '/views');