Home » Gulp

Gulp 入門教學 - 安裝 Gulp.js

現在前端的技術越來越多了,連帶的若要將專案發佈到主機上之前,您可能需要進行以下的步驟:
1.將 Babel、TypeScript 及 CoffeeScript 編譯成 JavaScript
2.將 LESS、SASS、SCSS 或 Stylus 編譯成 CSS
3.再把 Jade、Slim 或 Haml 編譯成 HTML
4.合併 HTML 頁面跟 layout
5.將 CSS 加上前綴
6.再把 CSS 和 JavaScript 各自成併成單一檔案
7.壓縮 CSS 和 JavaScript 並產生 Source Map
8.壓縮圖片
9...

看了這一連串的工作是不是頭的暈了呢?以上都還沒加上各種測試工作咧!如果在瀏覽器上查看發現有錯要進行小變更時,以上動作可能得再來一次了 XD。因此就有像是 Gulp.js 這樣的自動化建置工具出現啦!只要我們把要執行的各種動作都寫成一個個任務後,就能輕鬆完成一連串的動作囉!

不過在開始安裝 Gulp.js 之前,我們得先安裝 Node.js 才能使用方便的 npm 工具,再透過 npm 來安裝 Gulp.js 及相關的外掛套件工具。

Node.js 官網:https://nodejs.org/en/
gulp_tuts_install_gulp_js_0
理論上會自動判斷瀏覽者的系統並提供相對應版版本的安裝程式供人下載,如果想選擇其它系統或是版本的話,可以自己再去點 Downloads 後下載。

安裝的方式就跟大部份程式一樣,就是下一步、下一步、下一步、安裝、完成。
接著先開啟命令提示字元或終端機並分別輸入(Windows 及 Mac 都相同)

1
node --verion
1
npm --verion

若安裝過程沒問題的話,就會看到各自的版本號了
gulp_tuts_install_gulp_js_01

接下來我們先來安裝全域的 Gulp 工具,先輸入

1
npm install --global gulp

如果在 Mac 上安裝有問題的話,記得先加上 sudo 指令

1
sudo npm install --global gulp

gulp_tuts_install_gulp_js_02

大概等個一下下時間就會安裝完成了,這時我們可以藉由查看版本號來確認是否安裝完成。再輸入

1
gulp --version

gulp_tuts_install_gulp_js_03

目前準備工作都差不多了,接著就是先建立一個專案的資料夾,然後再將命令提示字元或終端機切換進入到該資料夾中。這時要分別針對專案安裝各自的 Gulp 套件

1
npm install gulp

這邊要注意一下喔!一開始安裝全域的是有加上 -global 參數,這邊是針對專案的就不需要了(若最後有出現 WARN 先別管它,不影響)
gulp_tuts_install_gulp_js_04

等它結束後查看資料夾,應該會看到一個 node_modules 資料夾,這其中會放置一些套件程式
gulp_tuts_install_gulp_js_05

這時候再輸入一次

1
gulp --version

你就會看到除了全域之外還多了一個是本地的 Gulp 版本號內容
gulp_tuts_install_gulp_js_06

最後讓我們在專案資料夾中新增一個檔名為 gulpfile.js 的文件,然後用編輯器來開啟它。然後先建立一個任務項目:

檢視原始碼 JavaScript
1
2
3
4
5
var gulp = require('gulp');
 
gulp.task('hello', function(){
	console.log('Hello Gulp.js');
});

因為我們需要用到 Gulp,所以透過 require() 的方式來把它載入。接著使用 gulp.task(任務名稱, Fn) 的方式來建立一個新的任務。筆者這邊先建立一個名叫 hello 的任務,當執行這任務時輸出 'Hello Gulp.js' 字串。

好的,存檔完成後,我們再切換到命令提示字元或終端機來執行任務囉。透過 Gulp 執行指定任務的語法很簡單,就是 'gulp 任務名稱':

1
gulp hello

順利的話就會看到任務啟動及執行結果了
gulp_tuts_install_gulp_js_07

雖然看起來好像沒什麼了不起的,但...至少能確認整個 Gulp 是能運作了,接下來筆者會一一分享如何來進行那...一連串的動作。

發表迴響