Node.js:Yarn 專案初始化、gulp.js 任務管理工具安裝與使用

2019/03/24 1,569 3 網站技術 , 伺服器 , 學業筆記 , JavaScript , Node.js , Gulp

《上一篇:Windows 環境安裝 Node.js 以及 npm & Yarn 兩款熱門 JavaScript 套件管理程式》我們已經完成安裝 Node.js,也同時完成安裝 npmYarn 這兩個套件管理程式啦!那接下來就是開始準備我們的專案!這篇採用 Yarn 當作主要的專案管理工具,至於優點於上一篇也都說過了,本篇就不多做敘述。

這一篇要將專案建立出來,並且安裝 gulp.js 這款任務管理工具,以讓未來開發更加自動化!不過這篇不會講到如何用 gulp.js 做自動化工作,只會講到安裝、執行方法與工作流程應該放哪,工作流程其實就是放在「gulpfile.js」中,工作流程可以幫助我們做非常多事情,使得很多繁瑣的工作不用人來做!還讓前端工程師可以提早下班!😂 舉例來說,圖片壓縮、SASS 編譯、CSS Sprites(一種適用於 CSS 的圖片處理技巧,將多張圖合成一張並用 CSS 做取用,減少下載要求量)等,不過因為需要實際安裝一個套件並且執行來做示範比較適合,因此此篇先暫時不講這段,先把前段基礎打好再開始也不遲!

從現在開始,終端機(命令提示字元)是你的好幫手,檔案總管也別忘記,可以讓你少用點終端機,本篇 IDE(整合開發環境)採用 VS Code。創建專案前,請先想好專案名稱,請使用英文+數字命名,到時候專案目錄就是使用這個名稱唷!開始吧!

首先在使用者目錄(通常是 "C:\Users\使用者")下新建專案目錄(資料夾),這邊設定為「mnya」,因此專案名稱就是「mnya」。

你需要知道的終端機(命令提示字元)基本指令:

dir ← 目錄資料顯示
cd ← 切換目錄,進入下層目錄指令為cd 下層目錄名稱,回上層目錄指令為cd ..

如果要跳出執行狀態請使用快捷鍵 Ctrl + C。

▲ 跟著上圖的數字操作:
【1】建立好目錄後,開啟終端機(命令提示字元),輸入指令cd mnya進入專案目錄。
【2】接著輸入指令yarn init初始化專案,這邊會先一行行詢問您專案名稱、版本、描述等,問題內的括弧是預設值,這邊都可以按 Enter 跳過,因為事後都可以直接從「package.json」修改,所以直接按 Enter 到底直到 Done!
⚠ 再次注意!「mnya」為本範例專案名稱,您可以自訂!

▲ 跟著上圖的數字操作:
【1】接著來安裝 gulp.js,接續上張圖的最後,輸入指令yarn add gulp --dev,意思是使用 Yarn 安裝 gulp.js 至開發模式。
【2】看到 Done 代表安裝完成。
【3】接著用檔案總管開「mnya」目錄,用 IDE 打開「package.json」,就可以看到專案初始資訊與安裝的套件資訊。詳細如下:

{
  "name": "mnya", // 專案名稱
  "version": "1.0.0", // 專案版本:1.0.0
  "main": "index.js", // 程式入口點(進入點)
  "license": "MIT", // 授權方式
  "devDependencies": { // 套件資訊區
    "gulp": "^4.0.0" // 套件 gulp 版本資訊
  }
}

如果想知道「package.json」更多資訊,請參考 npm-package.json 官方資料(原文)。接下來教您使用 gulp.js:

▲ 跟著上圖的數字操作:
【1】直接輸入指令gulp無法使用,要用指令yarn run gulp才能執行,為了讓未來更加方便使用它,我們輸入指令npm install gulp -global將 Gulp 安裝於全域下。
【2】完成後指令gulp就可以跑啦!只不過現在還缺乏工作流程檔「gulpfile.js」。
【3】直接在專案目錄下新增「gulpfile.js」,重新於終端機輸入指令gulp就可以運作啦!只是現在「gulpfile.js」裡是空的,不會發生任何事情,如前文所述,因為要真正跑一個套件才能示範,因此我決定下一篇直接用一個套件做示範,我們下篇見!😉

《下一篇:Node.js:Gulp 運行 gulp-connect 套件,建立前端開發伺服器(Gulp 大展身手!)》

Node.js 系列教學文章

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇