GulpJS 簡介

這一陣子為了開發前端程式需求，開始使用了node做為javascript server 的建構。
gulpjs 為基於Nodejs 的自動化套件，主要用來處理前後端任務，選擇他的原因當然是因為他大量而方便的套件，簡單幾個步驟，就可以做為網頁的開發server了。

GulpJS 安裝

Step 1

安裝NodeJS 使cmd指令可以使用npm，為了使用多node的框架，趕快去官網下載，將其安裝囉。
Node

Step 2

安裝完node後，也要關心環境變數是否設定完成，可以開啟terminal 或是 cmd 指令
輸入

npm install -g gulp

而如果出現錯誤訊息，就代表node環境相關設定沒有完成，可以重新下載安裝或設定。

Step 3

完成簡單基本的安裝後，再來就是思考你的網站架構，架構出來後在其路徑資料夾內安裝進一步的套件。
這邊假設一個可能基本網頁的架構
如下：

web
├index.html
├css/
├scss/
└js/

Step 4

為了安裝進一部的套件，用terminal 或是 cmd 指令開啟這個資料夾。

cd ..\web

然後安裝 gulp node套件
輸入

npm install gulp gulp-connect --save-dev
// 同 npm install gulp gulp-connect -D

這算是基本的安裝

Step 5

創建一個 gulpfile.js 檔案來啟動server
檔案配置會變成如下
如下：

web
├gulpfile.js
├index.html
├css/
├scss/
└js/

var gulp = require('gulp');
var connect = require('gulp-connect');
 
gulp.task('webserver', function() {
  	connect.server({
    	post: 80
	});
});
 

gulp.task('default', ['webserver']);

Step 6

最後在資料夾裡面起動gulp

gulp

基於node的gulp server就架起來囉
然後瀏覽器就應該會可以看到你的首頁了