Ocean 學習筆記: 08/01/2014

2014年8月25日星期一

快速資料查詢

-- Angular
https://docs.angularjs.org/tutorial/step_02

-- Coffee
http://coffee-script.org/
http://zhang.zipeng.info/library/coffeescript/05_compiling.html

-- Less
http://www.lesscss.net/features/#extend-feature
http://lesscss.org/

--Gulp
http://987.tw/2014/07/09/gulpru-men-zhi-nan/
https://github.com/basecss/gulp-tutorial/wiki/gulp-api

-- Bower
http://bower.io/docs/creating-packages/
http://bower.jsbin.cn/
http://segmentfault.com/a/1190000000349555?page=1#c-1190000000349555-1050000000595146

--REQ
http://requirejs.org/
http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html

2014年8月15日星期五

Gulp.js plugin LiveReload

套件名稱：glup liveReload

功用：當在開發過程中，程式、文件有異動時，能夠讓browser自動重整。

1. 需先安裝好gulp

2. 安裝 livereload

sudo npm install gulp gulp-livereload --save-dev

3. 安裝瀏覽器套件

chrome https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
firefox https://addons.mozilla.org/zh-tw/firefox/addon/livereload/

note : 若是不想使用瀏覽器套件，可以參考 How do I add the SCRIPT tag manually?

4. 編寫 gulpfile.js

var gulp = require('gulp'),

livereload = require('gulp-livereload');

// 'watch' 是 task 的名稱，可以任意定義名稱
gulp.task('watch', function () {
livereload.listen();

// dev/**/*.*的意思是 dev下的,任何資料夾的任何文件。 gulp.watch('dev/**/*.*').on('change', livereload.changed);
});

5. 執行命令

gulp watch

6. 開啟 browser外掛套件

點擊

7. 開啟相關頁面，當修改app下的任何文件，瀏覽器就會自動重整了。

參考資料：

gulp 指南
Michael Hsu.tw 的 Gulp.js-LiveReload 自動刷新頁面
Gulp.js-livereload 不用F5了，实时自动刷新页面来开发

npm：

gulp livereload (內含官方API用法範例)

Gulp.js 使用流程

Gulp 使用步驟：

Note： Gulp需要先安裝 nodejs。

1. 安裝gulp至全域環境

$ sudo npm install gulp -g

2. 將gulp安裝於專案目錄下 (會安裝gulp的node model 於 local)

$ npm install gulp --save-dev

note : --save-dev 會將glup寫入package.js
若是沒有package.js 可利用 npm init 產生。

3. 安裝 gulp 外掛套件

$ npm install --save-dev
ex : $ npm install gulp-coffee --save-dev
//安裝coffeeScript的編譯模組

4. 建立並且編寫 gulpfile.js 檔

Note : gulpfile.js 是 gulp 用來執行些什麼工作任務的依據設定。

5. 運行 gulp

於gulpfile.js所在執行：$ gulp

參考資料：

2014年8月14日星期四

ubuntu install less

Install less：

$ npm install -g less

compiler：
$ lessc styles.less

windows安裝法：
http://contest-start.blogspot.tw/2014/06/nodejs-install-less-middleware.html

install bower

Bower目的是用來管理前端環境library的依賴關係。

Bower 需要 nodejs 與 git。

需先安裝：

git windows ubuntu
nodejs windows ubuntu

Install bower

$ sudo npm install bower -g

Install packages

$ bower install jquery

如需指定版本

bower install #
ex: bower install jquery#1.11.1

uninstall packages

bower uninstall jquery

如此就會將jquery下載到你下命令的路徑資料夾中的 ./bower_components/jquery

Note：在window環境中，需要將git安裝路徑加到環境變數 PATH中，
如果沒有加入在安裝套件時會出現
bower ENOGIT git is not installed or not in the PATH。

參考文件：

ubunto install nodejs

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Note： 1.測試，直接在linux終端機中輸入，node -h。
2. node -v，可查詢版本。

參考資料：

http://www.gtwang.org/2013/12/install-node-js-in-windows-mac-os-x-linux.html
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-an-ubuntu-14-04-server

ubuntu install git

Install Git

$ sudo apt-get install git

Note:如果是windows則是使用msysGit

Install Git GUI

$ sudo apt-get install git-cola

在新目錄中 git init，能夠建立新的git repository

Note: linux上有需多種GUI可選擇。

Reference

2014年8月1日星期五

NodeJS Send Request

NodeJS 發送HTTP請求套件

1. 在package.json 加上request項目

package.json

{

"name": "englistNodeServer",

"version": "0.0.1",

"private": true,

"scripts": {

"start": "node app.js"

"dependencies": {

"express": "3.2.6",

"jade": "*",

"less-middleware": "*",

"socket.io" : "1.0.6" ,

"request" : "2.39.0"

}

2. 打開node.js命令列，進入package.json 同層資料夾下

npm install

3. 編輯檔案 app.js

var request = require('request');

request('http://www.google.com', function (error, response, body) {

if (!error && response.statusCode == 200) {

console.log(body) // Print the google web page.

}

})

4. 啟動app.js

node app.js

即可看到回覆內容

2014年8月25日 星期一

2014年8月15日 星期五

2014年8月14日 星期四

2014年8月1日 星期五

2014年8月25日星期一

2014年8月15日星期五

2014年8月14日星期四

2014年8月1日星期五