好想要安裝Gulp喔!
前言
因為好想體驗什麼叫做前端自動化,聽起來很酷,我必須先想辦法把 Gulp 安裝起來,通常安裝完就忘記了,所以我要記下來!
先安裝 Node.js
因為 Gulp 是基於 Node.js 下的套件,所以必須先下載 Node.js,讓我們到官網下載。
這邊有兩種版本可以下載 ,LTS:是長期支持版,優點是穩定,Current是最新版,第一次操作我們用LTS版就好。
安裝完後我們打開終端機,輸入
node -v
出現版本號就代表安裝完成了。
另外我們輸入
npm -v
也會跑出版本號,因為 node.js 安裝時也會安裝 npm,他是 node.js的套件管理工具,我們需要透過它來安裝 Gulp !
全域安裝 gulp-cli
首先我們要在全域安裝 gulp-cli ,他可以讓我們在終端機可以使用 gulp 指令
npm install gulp-cli -g
如果 mac 版本會跳錯的話,請使用管理員權限的語法
sudo npm install gulp-cli -g
這邊的 -g 代表我們安裝在全域環境,或做本機環境,代表所有專案都能使用,相對的不要加 -g 就是下載在當前資料夾的專案環境。
安裝完畢我們使用 gulp -v 查看,有出現版本號就代表 gulp-cli 安裝完成了!
gulp -v
專案安裝 gulp
接著專案中我們還是要安裝gulp,讓gulp功能可以在專案使用,我們先初始化 npm
npm init
接著出現的這些都按 enter 初始化就可以,如果懶得按 enter 可以這樣打
npm init -y
初始化後會出現一個 package.json 檔案,紀錄著與 npm 指令息息相關的一些相依套件的資訊,我們接著要使用 npm 指令在這個專案中安裝 gulp 功能
npm install gulp --save
當中 --save 是代表我們安裝gulp套件的資訊要記錄在 package.json 裏
安裝後就會看到 gulp的版本號,代表安裝完成
建立簡單的 gulp 專案
我們來實作一個簡單的 gulp 專案來試試看 gulp 的威力,我們創建 source 資料夾與 public 資料夾 , source 資料夾裡放 index.html
index.html 我們寫一個簡單框架
接著我們建立一個 gulpfile.js 檔案
在 gulpfile.js 輸入
var gulp = require('gulp');
gulp.task('copyHTML',function(){ return gulp.src('./source/**/*.html') .pipe(gulp.dest('./public/'))});
以上是要實作一個任務將 source 裡所有的 html 檔案複製到 public 資料夾裡,目前先不需理解程式碼是怎麼運行的。
配置完後我們在終端機輸入
gulp copyHTML
執行 gulp copyHTML 任務後就會成功生成複製後的檔案了!
至於 gulpfile.js 詳細的運作我們後面再說吧!