建立一個 gulp 專案

• 下載 nodeJS：建立伺服器環境、使用 npm。
  • npm：用來下載管理工具套件。
• 安裝全域 gulp：使用 gulp 命令列。
• 初始化 gulp 專案：package.json
  • 專案的資訊整合在此，如專案訊息、所用資源列表、客製化指令等。
  • 執行 gulp init 會依據 package.json 資訊下載專案資源。
• 建立 gulpfile

專案需求

• nunjucks 版型、樣板渲染
• sass：用 vscode livesass 套件轉譯
  • 加 hash 碼
• js 壓縮
  • 壓縮
  • ES6
  • 加 hash 碼
• 圖片壓縮
  • base64
  • 優化壓縮
  • 加 hash 碼
• 其他流程管理
  • 本機虛擬伺服器
  • live reload
  • 多瀏覽器同步
  • 資料夾清空、刪除
  • 流程錯誤提示

安裝 nodeJs

直接從官網下載穩定版本的 nodeJS，全域安裝在本機。

使用 npm

安裝 nodeJs 時就自帶安裝了。

安裝全域 gulp

npm install gulp -g

• -g：全域

建立 gulp 專案

• npm init：初始化 gulp 專案
  • 會以一問一答方式，幫你建立專案管理檔 "package.json"

• npm install <packages>

  1. npm install gulp 安裝專案的 gulp
  2. 安裝其他想要用的套件...

• 設置 gulp 命令檔 gulpfile.js

  • gulpfile.js，使用 node 寫法，會引入 npm 套件、使用 nodeJs 的方法。