---
tags: 工作筆記,gulp, pug, html
---
# (工作筆記) 用 gulp 將 pug(jade) 轉為 html

### 先安裝 node.js 跟 npm
安裝 npm 的同時就會順便裝node.js
記得要安裝的是穩定版本(stable edition)

### 再安裝 npm plugin
gulp
gulp-pug
gulp-watch
pug
(gulp-plumber/gulp-load-plugins/gulp-pug-lint)

---
gulp-cli(?)
看網路上其他人也有裝 但不確定裝的必要性為何

### 終端機常用指令
1. 查看npm/node版本

npm -v / node -v 

2. 從npm安裝plugin(如果有主機帳密的話就不要用sudo)

sudo npm install _(外掛名)_

3. 表列所有安裝的plugin

npm list -g--depth=0

4. 進入路徑
cd
5. 顯示gulp版本

gulp --version

### 步驟
1. 先建立檔案資料夾(空)
2. 用vs code或終端機進到該資料夾
3. 建立package.json，前者是一步步設定文件，後者是快速設定出樣板，這邊json不太需要修改，快速生成就可

npm init / npm init -y

5. 安裝 **gulp,pug,gulp-watch,gulp-pug**
開 package.json 的 devDependencies 會看到plugin 名字就成功

6. 在資料夾內新增 **html (空 反正就是compile後匯出的位置)跟 gulpfile.js**(讓gulp指定匯出位置跟資訊)
這兩項要手動建立

7. **在gulpfile.js裡面輸入**
(就是設定匯出的資訊類型/匯到哪個路徑)

var gulp = require('gulp');
var pug = require('gulp-pug');
var watch = require('gulp-watch');

gulp.task('pug', function () {
  return gulp.src('./index.pug')
    .pipe(pug({
      doctype: 'html',
      pretty: true
    }))
    .pipe(gulp.dest('./html/'));
});

gulp.task('watch', function () {
  return watch('./index.pug', { ignoreInitial: false })
    .pipe(gulp.dest('pug'));
});

8. 建立一個.pug檔，在terminal 輸入 **gulp pug**

主機名:190711-dodot-knowledge 主機名$ gulp pug
[14:13:41] Using gulpfile ~/Desktop/190711-dodot-knowledge/gulpfile.js
[14:13:41] Starting 'pug'...
[14:13:42] Finished 'pug' after 224 ms

像這樣就表示成功 compile 出 html 檔了！

---
### 可能遇到的問題補充：
1. 顯示 gulp command not found
2. 'gulp' is not recognized
### 解決：
在command line 輸入

npm install -g gulp

### 解答參照：
https://stackoverflow.com/questions/39195128/gulp-is-not-recognized-as-an-internal-or-external-command