要達到此功能需要
- less (編譯核心，能在command line中下命令將less檔轉為css檔)
- less-middleware (此middleware提供自動轉譯功能)
example use eclipse ：
Eclipse 需要安裝nodejs plugin才能開發nodejs專案,沒有的話要使用command line來建立專案。
eclipse install nodejs plugin please reference here
Step1. Create nodejs express project (建立nodejs express專案)
- File > New > Node.js Express Project
Step2. Enter Project Name & Choose Template Engine 、StyleSheet Engin
- Project Name Enter your Project name. (輸入你想要的名稱)
- Template Engin Choose ejs. (選擇ejs樣板引擎)
- StyleSheet Engin Choose less. (選擇less樣式引擎)
Step3. Edit package.json (編輯package.json檔)
{
"name": "lessTest",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.2.6",
"ejs": "*",
"less-middleware": "*"
}
}
note: 以上"*"可自行指定版本號。
Step4. Edit app.js add following code (編輯app.js並加入以下程式碼片段)
//note：目前撰寫時的less-middleware是1.0.3，新版本與過去的版本用法會有不同
/* old version less-middleware 這是舊版 less-middleware 0.1.x
app.use(require('less-middleware')({
src:path.join(__dirname, '/public'),
compress:true
}));
*/
//這是1.0.x
app.use(require('less-middleware')(path.join(__dirname, '/public')));
Step5. Create style.less file (建立less檔)
- \public\stylesheets\style.less
body {
padding: 50px;
font: 50px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #0AB7FF;
}
Step6. Run npm install (安裝使用到的模組)
- package.json > click right mouse button > Run As > npm install
Note:eclipse 會幫你檢查package使用到的套件幫你執行 npm install。
Step7. Run app.js (執行app.js)
- app.js > click right mouse button > Run As > Node Application
Step8. Use Browser open url (用瀏覽器開啟頁面)
- http://localhost:3000/
Step9. Open style.css
打開style.css可看見已將less內容轉譯成css並且壓縮過內容
body{padding:50px;font:12px "Lucida Grande",Helvetica,Arial,sans-serif}a{color:#00B7FF}
Note:在nodejs中改變內容需要停止node.js在重新啟動方能載入改變內容，nodejs是為了效能如此設計，
但若想在開發過程中方便除錯，則可在package中加入supervisor項目後，在執行nam install。
但若想在開發過程中方便除錯，則可在package中加入supervisor項目後，在執行nam install。
Note:在eclipse node.js project中按下F5重整後，即可看到eclipse 對package.json執行npm install後所產生的模組資料夾，node會在此資料夾中找尋模組，若不想使用刪除掉模組與其package.json項目即可。
最後結果：
package.json
{
"name": "lessTest",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.2.6",
"ejs": "*",
"less-middleware": "*",
"supervisor":"*"
}
}
app.js
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
/* old version less-middleware
app.use(require('less-middleware')({
src:path.join(__dirname, '/public'),
compress:true
}));
*/
app.use(require('less-middleware')(path.join(__dirname, '/public')));
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
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'));
});
style.less
body {
padding: 50px;
font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
style.css
body{padding:50px;font:12px "Lucida Grande",Helvetica,Arial,sans-serif}a{color:#00B7FF}
npm 操作命令
查詢node 模組
更新node 模組
$ npm update [模組名稱]
更新node 全域模組
$ npm update [模組名稱] -g
npm 操作命令
移除node 模組
npm uninstall [模組名稱] -g
npm ls
查詢node 全域模組
npm ls -g
$ npm update [模組名稱]
更新node 全域模組
$ npm update [模組名稱] -g
沒有留言:
張貼留言