###### tags: `教學文件`
# 前端工具 歡樂考題

>考試名稱 : ** gulp / webpack 前端技術考題（ gulp / webpack自動化工具 ）**
考試描述 : **禁止上網找答案，不能看書或是看講義**
作答時間: ** 30 分鐘**
考試開放時間:
提供答案 **開**

## 1. 開發 gulp 的語言

1. - [x] nodejs
2. - [ ] javascript
3. - [ ] php
4. - [ ] java

## 2. 安裝 Gulp 的方式

1. - [x] npm install --save-dev gulp
2. - [ ] yarn install sass -g
3. - [ ] brew install gulp
4. - [ ] npx install gulp --save-dev

## 3. 下列哪個是 gulp的設置文檔

1. - [x] gulpfile.js
2. - [ ] gulptask.js
3. - [ ] gulpfiles.js
4. - [ ] gulp.js

## 4. 在 gulp 任務裡，哪個是順序執行任務的語法

1. - [ ] dest
2. - [ ] src
3. - [x] series
4. - [ ] parallel

## 5. 在 gulp 任務裡，哪個是來源檔案的寫法

1. - [x] src('**/*.js')
2. - [ ] dest('**/*.js')
3. - [ ] watch('**/*.js')
4. - [ ] task('**/*.js')

## 6. 檔案路徑的寫法，何者為非

1. - [ ] `*.js` 第一層目錄裡所有的js
2. - [ ] `**/*.css` 第二層目錄裡所有的css
3. - [x] `['*.js' , '!a*.js']` 第一層目錄裡所有的js，包含a開頭的js
4. - [ ] `**/*.*` 第二層目錄裡，所有的檔案

## 7. gulp-sass 的用途是

1. - [x] sass(scss) 編譯用的
2. - [ ] css 壓縮用的
3. - [ ] 檢查scss 語法是否正確
4. - [ ] sass 合併用的

## 8. gulp 執行順序下列何者為非？

1. - [ ] `series(missionA , missionB)` 先執行 A 任務，再執行 B 任務
2. - [ ] `parallel(missionA , missionB)` 同時執行A , B 任務
3. - [ ] `series(missionC , parallel(missionA , missionB))` 先執行 C 任務，在同時執行 A , B 任務
4. - [x] `series(missionC , [ missionA , missionB])` 先執行 C 任務，在同時執行 A , B 任務

## 9. 解決跨瀏覽器的問題，可以用 gulp 哪個套件？

1. - [ ] gulp-rename
2. - [x] gulp-autoprefixe
3. - [ ] gulp-file-include
4. - [ ] gulp-nodemon

## 10. 在gulp 的任務導出有分：公有任務與私有任務 ，私有任務的導出，通常是用

1. - [x] exports.default
2. - [ ] output.default
3. - [ ] export.default
4. - [ ] import.default

## 11. webpack 的核心概念，下列何者為非？

1. - [ ] entry
2. - [ ] output
3. - [x] export
4. - [ ] loader

## 12. webpack配置文件是

1. - [ ] webpack.js
2. - [x] webpack.config.js
3. - [ ] webpackfile.js
4. - [ ] webpackconfig.js

## 13. entry 的用途是？

1. - [x] 入口，導入開發的js
2. - [ ] 整合js 用的
3. - [ ] webpackfile.js
4. - [ ] webpackconfig.js

## 14. webpack 如何監聽 js 檔案的修改（在發現原始碼發生變化時，自動重新構建出新的輸出檔案）

1. - [ ] 終端機輸入指令 npm i webpack
2. - [ ] 終端機輸入指令 webapck run watch
3. - [x] 終端機輸入指令 webpack -w
4. - [ ] 終端機輸入指令 webpack -d

## 15. mini-css-extract-plugin 這個plugin 用途？

1. - [ ] 檢查 css 語法用的
2. - [ ] 合併 css 檔案
3. - [x] 從 js 裡產生 css 檔
4. - [ ] 壓縮css 用的

## 16. CleanWebpackPlugin 這個plugin 的用途是？

1. - [ ] 打包程式碼用的
2. - [ ] 清除套件用的
3. - [x] 刪除舊的檔案
4. - [ ] 檢查 js 用的

## 17. 在 HtmlWebpackPlugin 這個plugin裡，template的這個參數的用途？

1. - [ ] 樣板功能
2. - [ ] 輸出檔案
3. - [x] 來源檔案
4. - [ ] 載入資訊用的

## 18. 如果要全域載入jquery 要用哪個plugin

1. - [ ] IgnorePlugin
2. - [x] ProvidePlugin
3. - [ ] html-webpack-plugin
4. - [ ] clean-webpack-plugin

## 19. babel-loader 的用途是？
1. - [ ] 檢查js 是否寫錯
2. - [ ] 壓縮 js 用的
3. - [x] es6 -> es5
4. - [ ] 監聽 js

## 20. webpack 裡 執行 devServer 服務器的指令是？

1. - [ ] npm i webapck
2. - [ ] webpack
3. - [x] webpack-dev-server
4. - [ ] npm run server