--- 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 ```