前端工程師之路(五)

Bower 套件管理工具

雖說 Nodejs 神通廣大，可以讓你只要懂js就可以偷跨領域，不過我們本業還是Web前端工程師，學習Node主要還是希望可以協助我們發展更棒的前端流程，有了之前的Node的理解，接下來的章節，將開始介紹一些協助前端開發的常用工具(這些工具都會架構在Node之上)。

還記得之前提過的npm管理工具嗎? 可以讓你用很簡單的方法安裝nodejs套件，比方

npm install express  //安裝web開發套件

如果你喜歡這種安裝套件模式的話，bower將會是一個很棒的選擇。

Bower 是什麼?

簡單來說，他可以用像是npm的方法來安裝與管理你的 js 函示庫，比方 jQuery
以往當你的專案需要使用jQuery這種第三方函示庫時，會有以下幾種方式

1. 到 jQuery 官網，取得編譯後的 js 再嵌入自己的html中
2. 直接連外部的 cdn 服務
3. 重舊的專案copy過來

由於我們自認為是高階的工程師，怎麼可以用這麼普通的方法取得第三方函示庫，一定得用酷一點的方式XD

如果你使用了bower，如果你要使用 jquery 你只要再專案資料夾中執行

bower jquery

他就會自動幫你下載“`jquery““到你的專案中。

安裝 Bower

實際實作一下比較能體會，我們可以裡用npm安裝bower套件。

請打開cmd命令視窗，由於bower可以安裝全域模式(就是他是給整台電腦用的命令，不需要裝在特定專案裡，所以cmd開在哪個路徑下就無所謂了)，打開cmd後，輸入以下

npm install bower -g

按下enter後應該會開始安裝。

說明一下以上指令的意義，npm install bower 很明顯就是安裝bower這個套件，後面的 -g 很重要，這叫做全域安裝，代表bower是安裝於系統層級，往後不管cmd 路徑在哪裡，都可以使用bower這個套件。

換句話說，如果你忘了加上 -g ，就表示只有這個資料夾可以使用 bower ，你可能會想那我如果 npm install express -g 後是否以後就不用安裝 express了。

確實如你所想，不過一般而言我們不會這樣做，因為你不會希望，當需要升級某個專案時，卻影響到其他不須升級的專案，可能因為不相容而導致錯誤。

安裝完後，你可以試著執行

bower

他會列出 bower 的使用方法

使用 Bower

接下來我們來實際使用一下，首先cmd到你需要安裝套件的資料夾中。

如果你對於下 cmd 路徑感到麻煩，這裡教各位一個比較簡單切換路徑的方式，假設你在桌面上有個資料夾，你需要把 cmd 路徑設於此，你只需要打開這資料夾，並將滑鼠移到資料夾裡，接著按下鍵盤的shift 按鍵，並按下滑鼠的右鍵，開啟功能介面，介面中會多出一個在此處開啟命令視窗，我們選擇他後，就可以直接在這個路徑下啟動 cmd

我們在這裡試著安裝 jQuery

npm install jquery

會開始安裝，預設情況下，他會幫你放在bower_components的jquery裡面

之後你安裝 bower 套件的js後，他都會整理在這裡，你需要在html中嵌入這個路徑，bower_components\jquery\dist\jquery.min.js，或者是你想copy到其他地方。
如果你不喜歡預設路徑，實際上是可以修改的，不過我打算之後再談，因為我們大家都知道，看到bower_components這個資料夾，就是第三方函示庫。

預設安裝最新版本，如果想安裝其他版本的jquery怎麼辦? 我們先看看是否有其他版本，cmd 輸入

bower info jquery

他會列出目前版本編號，假設你需要安裝的是 1.9.1 的 jquery，你可以輸入

bower install jquery#1.9.1

如此便會幫你安裝正確的版本

bower 有一個很棒的功能，就是它會自動幫你安裝好相依的其他還函示庫，舉個例子，如果你需要安裝Bootstrap ，你可能使用以下方式安裝

bower install bootstrap

你會發覺，除了安裝好 Bootstrap 以外，他連 jQuery 也會一起安裝，因為 bower 會察覺，使用 Bootstrap 一定得安裝 jQuery (會尋找建議的版號)。

這樣子你就不會因為少裝了套件而導致不能使用。

附上官網資源，想深入理解可以詳讀
http://bower.io/

朝向Node.js工程師之路 (四)

關於Express與npm

剛過完年，文章再開，這篇就先廢話一下。
如果前幾章有跟著實作的話，相信有感受到nodejs的魅力了！

關於express

之前跟大家介紹的express，其實就是一個專門處理網路服務的框架，拿來處理靜態文件只是很基本的功能，實務上你可以用它來取代你的php，資料庫當然一樣可以串連mysql或者更方便的nosql形式，比方mongoDb。

你可以建立你自己的Api服務器，甚至更大的雲端分散式系統。如果你對網路服務很有興趣，不妨可以先專研express框架，坊間也有專門介紹express用法的書籍。目前前端人才市場如果你會做網頁，也會自己寫express服務，作全端開發(前後端一氣呵成)，這樣的人才是相當搶手的!

提供一些學習資源

express官網

關於npm

nodejs 之所以這麼好用，很大一部分該歸功於npm，他讓使用者不必一直重複造輪子， npm上好用的東西可不是只有express，裡面有上萬個模組，玲瑯滿目各式功能讓你可以很快速的跨越領域，有興趣可以上 npm 官方網站 逛逛，以下列出幾個好用的工具與組件給大家參考。

• express 這不用說了，必學!
• grunt 開發流程自動化，前端工程師必學，可以省下很多時間
• bower 第三方外掛管理，你可以把它想成網頁開發的npm工具
• browserify 讓npm中的模組可以在網頁開發上使用
• pm2 幫你管理執行中的nodejs程式
• mocha 幫忙測試你的js
• codova 用js開發app

以上只提到小小的一部分，想深入理解請自己去google了

難怪人家都說前端是個很大的坑，根本學不完XD

朝向Node.js工程師之路 (三)

朝向前端工程師之路 - 我的第一個Nodejs服務器

上有單元我們實作了Hello world程式，本身程式沒什麼太大意義，主要告訴大家，nodejs如何執行，這單元我們開始實作一些有意義的功能。

node js 可以讓你在5分鐘內寫出一個web服務器

什麼？五分鐘內？
不需要懷疑，可以很快速的實現一些基本功能這正是nodejs的魅力之一!

不知道什麼是web服務器？那麼架站赫赫有名的Apache俗稱 阿帕奇 的軟體應該聽過吧! 我們要實作一個類似的服務。

Npm 套件 - 挑選你的輪子

開始之前先來談件事，當你在製作網頁時，如果你需要做元件互動，你可能會優先考慮在你的html頁面上加掛 jquery ，儘管你知道這些東西都可以自己寫原生js，但是你依然會使用它，這是為了加快程式開發的速度，你不需再再去開發所謂的”輪子”功能，而會直接拿現的輪子裝上去。(當然大前提是輪子是優秀且情境適用的狀況下)

Nodejs其中一個迷人的地方的地方，就是他擁有一個開放又成熟的第三方函式庫社群

Npm官網

這裡面有數以萬計的輪子與各種套件提供你使用，你可以很方便的搜尋到你需要的功能，且快速的安裝他。

你可以嘗試在搜尋框內搜尋你要的功能，比方你可以搜尋你常用的jquery這個套件，套件頁面一般都會有簡單的說明，與安裝使用方法。

使用 npm 安裝套件

安裝套件的方式很簡單，nodejs提供簡單的方法讓你安裝你需要的套件。

首先你可以在c槽根目錄下，新建立一個叫做myapp目錄(選c槽根目錄只是為了讓你切換路徑方便，當然你也可以直接在桌面上開新資料夾)，開啟cmd模式，把路徑切換到myapp裡面。

cmd模式下輸入

cd c:/
cd myapp

你的cmd提示路徑應該是c:/myapp>這代表目前工作路徑在myapp裡面。

我們試著在這裡安裝你所熟悉的jquery套件，請輸入以下命令

npm install jquery

之後你的cmd應該會出現一大串安裝訊息，安裝完成後，你的myapp資料夾裡會出現一個node資料夾，npm的組件安裝都會放在這裡面，點進去看你會看到你安裝的jquery套件。

nodejs 專案都是以資料夾為主，意思就是，今後myapp資料夾就會是node專案的根目錄，往後要備份或是給人家就直接給這一整個資料夾。(直接給資料夾不是最好的做法，這個之後再提)。

使用npm下載的套件

如果在html中使用jquery的方式，你應該會在html文件中加掛

<script src="jquery.js"></script>

但是nodejs中可沒有html標籤讓你使用，如果你要在專案中引用jquery，必須使用require方法。

var $ = require('jquery');

require 會自動幫你載入套件，對應的正確的npm套件資料夾

上述用jquery舉例只是，讓你了解差異，實際上nodejs中沒有dom可以操作，所以jquery並沒有什麼用途(原諒我這個無聊的例子XD)

實作你的第一個Nodejs服務

到此相信你對nodejs使用上應該有一點心得了，接下來開始進入正題，我們要實作一個web服務器。

首先開啟一個資料夾，(要在哪裡開或者資料夾叫什麼名字，還是真的很懶繼續使用剛剛的myapp都無所謂，只要你確定可以在cmd中正確的路徑下執行就可以)，接著開一隻新的js寫下你的程式。(js檔名要取什麼名字都無所謂，大部分的人會習慣以app. js當作入口)

首先安裝一個叫做express的套件(記得要在該安裝的資料夾中安裝喔)

npm install express

開啟一支js檔案，輸入以下程式

var express = require('express');

var app = express();

app.use(express.static('www'));

app.listen(80);

好了之後存js檔，別吃驚，只要短短4號程式，這就是 web服務器。

解釋一下code，第一行的var express = require('express'); 很明顯就是取用剛剛安裝的套件，我們把它取出並設為express變數(變數名是不是叫做express一樣不會有人管你，一般慣例說了方便辨認，變數名稱都會取跟套件一樣的名字)

第二行的var app = express();，常很多新手忘記作，取出的express是一個函數(function)，我們必須要執行他才會取回執行結果，這行的意思是請exptess開個服務器給你，我們把它放在app變數裡。

既然作個web服務器，總是要開個資料夾來放你的html文件與css，image資源，第三行的app.use(express.static('www'));意思是，我們要把www資料夾當成網站的根目錄。

第四行的app.listen(80);是開叫server開啟80port去作連線服務，就是所謂的http服務。

執行前記得在你的專案資料夾建立一個www的目錄，並把你的 index. html還有相關素材放進去。

最後一個步驟，執行它!!

node app.js

畫面上應該沒有反應，很正常，因為我們沒有console. log任何訊息。

這時候你可以很開心的開啟你的瀏覽器，網站輸入http://127.0.0.1/，如果你有在www資料夾中放入你的index. html，你應該可以看到你的首頁。

恭喜你!你可以寫自己的web服務器了！

朝向Node.js工程師之路 (二)

朝向前端工程師之路 - Hello Nodejs !!

這個章節，會帶著你會把Nodejs安裝完成，並寫下你的第一支Nodejs helloWorld程式。

以下流程會以 win 系統為主，如果你是mac 系統，關於安裝與執行部分我相信網路上資源很多，可以自行比照，除了系統執行指令不同，流程都是一樣的。

安裝

首先到nodejs 官網，下載建議的版本，目前nodejs最新版本是v5.5.0，不過在這裡建議大家用v4.2.6(也是官方建議，終究也看過太多前輩踩了雷又退回來)

Install直接下一步到底就好不用想太多

執行環境 cmd

這裡有些東西你必須得了解，這部分是避不掉的。

首先就算你是win系統，你還是得學習所謂的命令模式，就是所謂的cmd下的指令(以前我都說這是dos模式，沒有像win那樣有漂亮的視覺化介面可以操作)，nodejs都是在cmd下執行，別擔心!用久了你會發覺反而比視窗介面方便又更快速。

不過先不用太擔憂，不需要全部學習，我們指需要知道如何在正確的地方(路徑)執行你的js程式就好了。

首先我們先試著啟動cmd模式，在桌面的搜尋框內鍵入cmd(win10會在桌面左下角，搜尋執行的程式那個框就是)，找到後按下enter開啟他。

正常來說，你會看到一個視窗，裡面只有黑色底淺色字，以後你必須在這裡鍵入正確的指令去執行你的js程式，我知道對於不懂電腦的人，看到這個畫面就覺得駭客高手才會進來這裡，其實所謂的cmd模式不過就是把你以前在桌面上的雙擊開啟程式動作，變成在cmd輸入指令開啟程式。

首先為了學習先來惡搞一下，我們在cmd下輸入app後按下enter執行他(或者你亂打一些字試試)

如想像的，你馬上會得到執行錯誤，原因是，你根本沒有app這個程式，用桌面比喻就是你桌面上沒有app這個icon，所以系統回覆你錯誤訊息。

由此可得知，往後你如果看到這個訊息，代表你應該是拼錯打錯字，或者這個路徑下沒這個檔案。

目前你看到的命令列，代表你所在的資料路徑位置，假如是c:/xxx/aaa/這代表現在開啟的是c槽的xxx資料夾裡的aaa資料夾，如果你想看這個資料夾裡有什麼檔案，你可以輸入 dir按下enter ，會列出這個資料夾裡的檔案。如果你想要回到上一層目錄，你可以輸入cd ..，這是回到上一層資料夾的意思，反過來說，如果要再進去某個資料夾，你可以輸入cd bbb，這代表你要進入 bbb 這層資料夾。如果需要換到d槽，只要使用cd d:/就可以直接切換。

上面的路徑使用，熟悉後你應該可以理解，cd這是路徑的指令，後面接的，就是要執行的檔案或路徑名。

以上為何要說明這些無聊的路徑管理呢，以下說明nodejs執行的狀況。

你寫了某隻js程式，假設是做app. js，你需要用nodejs去執行他，你只要輸入 node app. js ,前面的node是指令，之前到官網下載安裝完成後就會有這指令，後面的app. js 是你要執行的程式路徑。

開始第一支Nodejs程式

瞭解如何在cmd下工作後，我們開始嘗試寫下你的第一支nodejs程式，首先用你習慣的文件編輯程式，(你可以使用Dreamweaver甚至是記事本，任何可以建立文件的軟體都可以，一般我們會建議你使用sublime，這是目前最多人使用的js編輯器)，打開一個檔案，輸入以下程式


console. log("Hello World Nodejs!!");

如果你有在寫js，應該會知道，這個js會在主控台輸出你要的物件

輸入完成後，存檔名app. js，為了方便執行，你可以把它拉到c槽根目錄。

接下來我們要用cmd到c槽下去執行他

打開剛剛說明國的cmd模式，由於你的app. js，放在c槽根目錄，所以我們必須先切換到正確的路徑再執行他，輸入cd c:切換到c槽根目錄，路徑切換成功後，你可以明確的看到cmd提升為c:\工作路徑。

執行你的js程式

node app. js

你會看到cmd下一行輸出Hello World Nodejs!!

恭喜你!你完成你的第一支nodejs程式了!!

我知道這是一支很無聊的程式XD ，但是好歹他幫你理解執行環境，讓你邁出第一步，下一章節我們會開始作點有意義的事。

Ps. 如果以上這個簡單的流程與helloWorl程式，如果實作上依然遇到錯誤？
一般而言初學者最常遇到執行路徑錯誤問題，請一定要確認你的執行路徑沒有錯，比方你的app.js儲存在c:/但是你卻在d:/執行，當然是行不通的。

如果你不想切換路徑，另一種方法是直接指定絕對路徑，比方你的js放在c:/home/app.js
你可以直接指定路徑執行 node c:/home/app.js

朝向Node.js工程師之路 (一)

朝向前端工程師之路 - Nodejs序章

首先要說，我打算開始寫一系列文章，對象是給會寫一些程式的網頁設計師，好讓他們可以入門所謂的前工程師 (或許這個詞只是虛招，但是很多教案都用這當幌子)，所以如果你已經知道一些 Node.js 並可以子自己寫一些簡單的小東西，那你就可以不需要繼續看下去了。

你知道Nodejs其實發展一段時間了，也知道它很熱門，想理解卻一直沒有餘力 ，那麼接下來的文章，或許可以幫助你入門。我儘量用最單純簡單的做法，帶著各位實現一些功能，希望可以讓你快速獲得成就感，進而繼續學下去。

首先來談談，你一定聽過不會 Nodejs ，不敢自稱 前端工程師 這句話，到底Nodejs可以作什麼? 為何前端工程師都得學?

Nodejs介紹與歷史
上面介紹正常來說，應該有看沒有懂，以下簡單說明並回答上述問題。

到底Nodejs可以幹嘛? 我覺得Nodejs什麼都能做!! 你可能對這個回答感到疑惑，實際上真是如此，Nodejs可以讓電腦看懂你寫的 Javascript，你可以用Javascript去叫你電腦做任何事，以前你的認知Javascript應該是活在瀏覽器的世界裡，寫js(之後的Javascript我都簡稱js)你可能先做一個html檔案，並掛上js(或是直接寫在html頁面裡)。

你必須要有瀏覽器環境才有辦法看到結果，因為只有瀏覽器才能看懂你的js，能做的事就是用js去指揮你的瀏覽器去做應該要做的事，如果你是網頁設計師絕大部分都是用控制你dom或是css (另外我還是要不厭其煩的說一下jq也是js….)

安裝 Nodejs 後會在你電腦上裝上google v8引擎，總之就是讓你的電腦可以直接看懂js，不須再透過瀏覽器，終究瀏覽器能做的事很有限，實際上電腦可以做很多事，比方你可以寫一些自動化叫你電腦每天都去某些網站幫你抓一些檔案回來(機器人或網路蜘蛛)，你可以自己開發一些執行檔或常駐服務(很久以前我做了自動幫我上班打卡的小程式XD，大家不可以學喔!)，可以開發app(是真的不要懷疑，請google Codova這個詞)，可以作物聯網(我最近都在作XD)，開發網路遊戲(這還算是簡單的喔!)，作網站就不須說了，你甚至可以作自己的Ftp (不是自己抓軟體來裝喔，是自己寫一個FTP)，或者是自己寫一個像是阿帕契一樣的web服務器(幾分鐘內就可以寫好，之後文章我會教大家作)，總之需要電腦作的事Nodej幾乎都可以辦到!!

包含如果你有再用scss寫css，可能用一些奇奇怪怪的軟體(反正按照教學裝了，scss存檔就自動變css了 XD )，這些軟體功能都可以自己做。

另外一個問題，為何nodejs容易跟網頁設計師發生關係(笑)，我想這單存只是因為js，網頁設計師幾乎都有js基礎，入門nodejs自然門檻變得很低，我想這對大家是一個很棒的機會，從只會瀏覽器的網頁設計師，逃到軟體工程師的絕佳路徑。

小弟我很明顯是從 網頁製作 跳到 軟體開發 ，不瞞各位，薪水確實也是三級跳，因為現在什麼都能作呀!

實際上Nodejs也已經不是很新鮮的東西了，曾經一段時間，他也分分合合，直到今日發展也穩定了，最新是 5 (不過我建議大家用4.2比較不會踩雷)，不過Nodejs的人才市場卻很缺乏，我們公司一直找不到所謂的資深人才，想當年我面試跟公司說，我自學一年多，專案人員聽到多感動，回我一句”這就是資深人員了” ，讓我錯愕了一下XD，所以現在開始學習正是好機會!!

待續……. 下一階段就進入實作第一個程式了!

ps. 我第一次用stackedit寫部落格真是開心又方便，大推薦這個工具XD