快速資料查詢

-- 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

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

參考資料：

• gulp官網
• gulp入門指南
• The streaming build system Gulp
• Gulp.js—比Grunt更易用的前端构建工具
• Gulp.js：比 Grunt 更简单的自动化的项目构建利器
• Gulp：任务自动管理工具
• Gulp安装及配合组件构建前端开发一体化
• Gulp 初體驗

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。

參考文件：

• bower.io
• http://bower.jsbin.cn/
• Day 1: Bower —— 管理你的客户端依赖关系
• bower解决js的依赖管理
• http://git-scm.com/book/zh-tw

ubunto install nodejs

1. sudo add-apt-repository ppa:chris-lea/node.js
2. sudo apt-get update
3. 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

• Download for Linux and Unix
• 在 Ubuntu 安裝或升級 Git 版本控制的3種方法
• 安裝Git
• Git Gui

NodeJS Send Request

NodeJS 發送HTTP請求套件

• npm request
• git request

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
• 
  

即可看到回覆內容