Ocean 學習筆記: 06/01/2014

2014年6月28日星期六

nodejs auto less to css

nodejs可以配置模組使web環境在http連線近來時會將less編譯成css。

要達到此功能需要

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

install nodejs expreee

在網頁開發上

Java 環境有 Servlet + jsp
Ruby 環境有 Rails
Nodejs 官方則推薦使用 express 來做網頁開發

express 在 template engines (viwer)部分還能選擇使用 ejs 或是 jade等樣板引擎。

express請參考：

http://expressjs.com/guide.html (英文指南)
http://expressjs.jser.us/guide.html (中文指南)
https://www.npmjs.org/package/express (npmPackage)
https://github.com/visionmedia/express

express 安裝前需先安裝好nodejs

Install Express (安裝 Express)：

Step1. open nodeJs command line (打開nodeJs 命令操作環境)

Click Start (開始 ) -> Node.js Folder -> Node.js Command Prompt

Step2. install express (安裝express)

npm install express

Install Express-generator (安裝 Express-generator)：

Step3. install express-generator

npm install -g express-generator (使用-g 全域安裝，在機器上任何地方都可用)

PS.express-genrator 是web專案結構產生工具

Express Command (Express 命令)：

express --help

Usage: express [options]

Options:

  -h, --help          output usage information
  -V, --version       output the version number
  -e, --ejs           add ejs engine support (defaults to jade)
  -H, --hogan         add hogan.js engine support
  -c, --css   add stylesheet  support (less|stylus|compass) (defaults to plain css)
  -f, --force         force on non-empty directory

Create Web Projet (建立web專案)：

Step4. create web project (建立nodejs web 專案)

express --css less --ejs mytest

當然也能使用eclipse整合環境來開發nodejs，請參考：

Eclipse install nodejs plugin

在eclipse上安裝nodejs plugin即可直接用eclipse開啟nodejs web project。

2014年6月26日星期四

Eclipse install nodejs plugin

讓Eclipse 支援 nodejs

需先安裝好nodeJs

IDE：

Eclipse
Enide Studio 2014

Step1. open nodeJs command line (打開nodeJs 命令操作環境)

Click Start (開始 ) -> Node.js Folder -> Node.js Command Prompt

Step2. install Nodeclipse CLI

npm install -g nodeclipse

Step3. install Express

npm install -g express-generator
npm install -g express

Step4. install nodeclipse (安裝nodeclipse)

select Help > Install New Software
Enter the update site URL into the Work with text box： (在work with中輸入)
http://www.nodeclipse.org/updates/
click add (點擊 add)

PS.
1.可加裝javascript 編輯器方便javascript開發

JSDT or VJET (可使用Eclipse中的 Help > Eclipse Marketplace... 安裝)
在搜尋欄中可輸入JSDT

參考文件：

http://www.nodeclipse.org/updates/ (nodeclipse)
http://www.oschina.net/project/tag/148?lang=28 (各種javascript plugin)

2014年6月2日星期一

Node.js Install less & less-middleware

Node.js 現今已有非常方便的windows安裝版，可方便於測試與學習。

為了讓Node.js支援LESS，需要安裝less-middleware。

Step1. download node.js

官網 http://nodejs.org/
windows choose -> Windows Installer (.msi) 64bit or 32 bit

Step2. open nodeJs command line

Click Start (開始 ) -> Node.js Folder -> Node.js Command Prompt

Step3. install npm install less (提供less編譯功能)

npm install less

PS.編譯指令 lessc [來源檔案.less] [目地檔案.css]

Step4. install less-middleware (提供自動編譯處理)

```
npm install less-middleware
```

參考資料 (Reference)：

https://www.npmjs.org/package/less
https://www.npmjs.org/package/less-middleware
http://stackoverflow.com/questions/11219637/using-less-with-node-js
http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco/Using-LESS-in-nodejs
http://www.hongkiat.com/blog/less-auto-compile/
http://www.hksilicon.com/kb/articles/480014/LESS-MiddlewareNodejsLESS
http://lesscss.org/

Node學習參考資料 (Node Reference)：

http://nodejs.org/api/
http://nqdeng.github.io/7-days-nodejs/#3.2.4

sublime-text install package control

Sublime text 可以藉由安裝Plugin來加強這個編輯器的功能，為了方便安裝與管理擴充套件，我們我先安裝一個叫 package control的套件。

How do install sublime text package control

Step1. Open Console. (開啟控制台)

Ctrl + ` OR View -> Show Console

Step2. paste the appropriate Python code. (貼上python 程式碼)

sublime text 3:
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

sublime text 2:
import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

記得按下 Enter。

安裝完畢後，即可使用Ctrl + Shift + P 來安裝套件。

參考資料 (Reference)：

https://sublime.wbond.net/installation#st2 (English)
http://docs.sublimetext.tw/package-and-plugin/ (中文)

套件：

Emmet (增加編輯速度)
http://docs.emmet.io/ (Emmet)
http://docs.emmet.io/cheat-sheet/ (使用說明)
ConvertToUTF8 (解決sublime-text對UTF8支援)
https://github.com/seanliang/ConvertToUTF8

2014年6月28日 星期六

壓力測試文章與效能調校文章收集