---
# System prepended metadata

title: 前端開發環境設定

---

---
Auther: Folite
CreateDate:  2023-06-15
Tags:
 - SAS
 - nodejs
 - windows
 - gulp
 - development
 - environment
---
# 前端環境
|  軟體   |  版本   |      功能      |
|:-------:|:-------:|:--------------:|
| windows |   11    |    作業系統    |
|   nvm   | 1.1.11  | 切換nodejs版本 |
| node.js | 18.16.0 |  開發工具主題  |
| gulp        |   4.0.2      |自動化建構工具|

# 安裝步驟

## node.js
1. 安裝`nvm`
2. 開啓終端機
3. 下達下列指令安裝`node.js`，本次安裝版本爲lts長期維護版本，`18.16.0`

```powershell
$ nvm install lts
```

安裝完成node.js會有以下

```posershell
Downloading node.js version 18.16.0 (64-bit)...
Extracting node and npm...
Complete
npm v9.5.1 installed successfully.


Installation complete. If you want to use this version, type

nvm use 18.16.0
```

4. 下達`nvm use 18.16.0`使用指定版本的node.js

```powershell
$ nvm use 18.16.0
```

5. 確認`node.js`版本

```powershell
$ node -v
```

## gulp

1. 先建立一個專案

```powershell
$ npx mkdirp my-project
```

2. 進入專案資料夾

```powershell
$ cd .\my-project\
```

3. node專案初始化

```powershell
$ npm init
```

4. 安裝區域`gulp`

```powershell
$ npm install --save-dev gulp
```

會看到以下訊息

```powershell
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

added 351 packages, and audited 352 packages in 25s

13 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
```

5. 編輯`package.json`檔案，再scripts內補上 `"gulp": "gulp --version"`

```diff
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}
```

6. 在終端機執行`npm run gulp`

```powershell
$ npm run gulp
```

看到以下訊息爲功能正常

```powershell

> my-project@1.0.0 gulp
> gulp

[09:31:58] No gulpfile found
```

7. 建立`gulpfile.js`檔案並加上以下內容

```js
function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask
```

8. 在終端機執行`npm run gulp`

```powershell
$ npm run gulp
```

輸出以下訊息表示成功

```powershell

> my-project@1.0.0 gulp
> gulp

[09:41:40] Using gulpfile ~\Documents\my-project\gulpfile.js
[09:41:40] Starting 'default'...
[09:41:40] Finished 'default' after 2.2 ms
```