Express + Jade/LESS/Coffee with LiveReload

廢話

2014年的第一篇文,去年算是生中的轉折,從今年開始已不是學生,但是學習不能停止,所以趁著比較有空的時候把TODO中要學的東西全部湊合在一起,混在一起當撒尿牛丸!

平常喜歡自幹習慣了,難得來用用別人已經做好的東西。這邊就先來用Express來搭配其它東西來開發網站。這邊用到的套件有JadeLESSCoffeeScript以及LiveReload

Express

"web applicaion framework for node"

可用於建立網站應用程式。是一套流行的NodeJS套件。

Jade

"Node Template Engine"

擁有自己一套簡潔語法以及新的特性,用來產生HTML格式。

LESS

"The dynamic stylesheet language"

支援VariableMixinNested 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.json

package.json

接著修改package.json,加入connect-coffee-scriptlivereload套件設定。

{
    "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 install

app.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 rulesLESSCoffeeScript的原始檔無法被讀取。

...

app.all('*.(coffee|less)', function (req, res) {
    res.send(404);
});
app.get('/', routes.index);
app.get('/users', user.list);

...

加入LiveReload的設定,讓它能夠認得JadeLESS以及CoffeeScript的支援。 Jade是放在/views裡,而LESSCoffeeScript則是放在/public裡,所以讓sLiveReload個別去監聽資料夾內檔案的變化。

...

var livereload = require('livereload').createServer({
    exts: ['jade', 'less', 'coffee']
});

livereload.watch(__dirname + '/public');
livereload.watch(__dirname + '/views');

...

最後別忘了幫瀏覽器安裝LiveReloadextension

結語

最後只要將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');
About
ScarWu

刀疤

記錄學習過程、生活以及一些想說的話。