前端筆記-Gulp-Mac版本安裝

Gene
4 min readJul 5, 2021

--

好想要安裝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 詳細的運作我們後面再說吧!

--

--

Gene
Gene

Written by Gene

— Do or Do Not. There is no Try!

No responses yet