---
# System prepended metadata

title: '[FE201] 前端中階：那些前端會用到的工具們'
tags: [Frontend]

---

# [FE201] 前端中階：那些前端會用到的工具們
###### tags:`Frontend`
[TOC]
## jQuery

> Lightweight Footprint
Only 30kB **minified** and gzipped. Can also be included as an AMD module

* minified 簡單化+單純化，把壟詞贅字刪掉

jQuery 是一個 **JavaScript library**

### jQuery 為什麼會出現

2006 年附近是個瀏覽器百家爭鳴的時代， IE, Chrome, Opera, Safari, Firefox ... 然後使用者比率也差不多，所以寫一種 JS 要最多寫五種以上的版本，所以 JQuery 就誕生並獲得人氣拉~

### 語法 + 實作(note)

`$ === jQuery`，用`.()`來把元素轉換成 JQ 元素

$().val('defautl-val') //設定預設值
$().val() // 取得值
.ready() // 

## bootstrap

[好模板網站](https://bootswatch.com/)

使用前記得要先引入 stylesheet 和 js

> 要注意版本，有些語法在最新版本不支援，例如 badge 的某些語法 [資料](https://github.com/twbs/bootstrap/issues/31217)

### Grid system

通常以 12 column 為預設

## CSS 預處理器

> 有些筆記是補充影片的部分

程式碼 => SCSS 或 SASS => CSS

```css=
/* 常用指令: */
--watch 看指定的檔案有沒有改變，有改變就做壓縮
--style=compressed 就是minify，把註解空格拿掉
/* 常用符號: */
& 重複上一層的選擇器的字串
/* 常用顏色變數命名: */
primary
secondary
warning
text
background
/* 常用檔案命名: */
_mixins.sass
_variables.sass
_components.sass 會跨頁的元件
_layouts.sass 會跨頁, 更大的, 比較少出現元件
/* 一些 SCSS 程式碼: */
@import filename

%btn
@extend %btn 引入 attribute，用"," 來一次做完

@mixin name 包住要重複使用的屬性
@include name 釋放 mixin
或是用 +name 釋放 mixin
跟 extend不同，可以使用變數、隨著"+'會重複出現多次、通常用在一組功能

@function => 可以回傳數值 用@return、通常用在一個屬性之下做運算

@each $type in $types
	.flex-#{$type}

@each $key, $value in $types
	.flex-#{$type}
用 $arr: value, value2 或是 $obj: (key: value, key2: value2)

@for $i from 0 through 5
	.h#{5 - $i + 1}
		font-size: 1 + 0.2rem * $i

@if $i / 2 == 0
	do soth
@else
	do soth
```

## gulp

src dest series parellel, babel, sass, uglify, minify/css, rename + gulp
就是個管理流程的 library， 函式可以自己寫或去 npm 找現成的，[Babel: Using Plugins](https://gulpjs.com/docs/en/getting-started/creating-tasks/#compose-tasks)

這次練習有用到 babel，有些地方它沒轉換好。gulp 就只是自動幫你跑那些 library，如果 library 出錯，gulp 執行後的檔案也會出錯，不會因為你用自動工具 gulp 就不會出錯XD，詳見[Gulp 練習紀錄](/77oQIV9MQoaQMWXi9e03cw)

## webpack

* ECMA 這個規範寫出來的，不同==執行環境==所使用的模組、模組化規範不一樣，瀏覽器的版本不一定會支援這些語法，所以就有了 webpack 誕生
* 瀏覽器不支援的功能，用額外的工具來轉換就可以了
* Webpack 把不同模組包在一起讓瀏覽器可以執行它們的工具，連 CSS 也可以 import啦
* 使用 webpack 的原因之一是原生的瀏覽器沒辦法打包 npm 安裝的模組，而 webpack 除了解決這個問題之外，還順便擴展了「模組」的定義，任何資源都可以視為一個模組，搭配強大的 ==loader== 與 ==plugin== 系統
* ==要轉換的檔案/你寫的 raw 程式碼，通常會放在 src，輸出到 dist==
* 想要壓縮 module的話可以把 production mode 打開

npm, npx, global