現代前端工具

CSS 預處理器

寫成某個語法(sass、scss、less、stylus)，經轉換後仍然是 CSS
因為 css 的樣式不好維護，所以有預處理器來解決 CSS 的問題

css 的問題：

• 全域互相干擾
• 沒有變數
• 沒辦法組合

開始使用 sass

在 CLI 這樣操作

安裝：

npm install -g sass

轉換：前面為 sass 的檔案，後面為轉換成 css 的檔案

註：另外會多一個 s.css.map 的檔案，負責把 css 檔案對應到 scss 的檔案，這樣右鍵檢查的時候，雖然是 css 檔案負責 style，但因為有對應所以瀏覽器會顯示的是 sass 檔案的對應到的位置

sass style.scss s.css

自動偵測： 當 scss 的檔案有改動的時候會自動轉換，就不用手動自己轉換

sass --watch style.scss s.css

基本操作

設定變數：顏色變數的名稱可以跟設計部門協調要如何命名

$primary-color： red

h1 {
    color: $primary-color
}

設定 mixin：把常用的 style 組合在一起

@mixin full() {
    width: 100%
    height：100%
}

.box {
    @include full() //或寫成 +full()
}

巢狀語法

// sass
.section {
    width: 100%;
    height 100%;
    padding: 20px;
    margin: 20px;

    .section_title {
        color: red;
    } 
}

// css
.section .section_title {
    color: red;
}

"&" 把相關的寫在一起

.box {
    background-color： red
    &:hover {
        background-color：yellow
    }
}

@import 寫在第一行把其他檔案引入

// 引入存放變數的檔案
@import variable.scss

%name 建立模板，@extend 引入模板

// 建立 btn 模板
%box {
    width: 100px;
    height: 100px;
    padding: 10px;
}

// 引入 btn 模板
.box {
    &_white {
        @extend %box
    }
    &_black {
        @extend %box
    }
}

// 轉換成 css
.box_white, .box_black {
    width: 100px;
    height: 100px;
    padding: 10px;
}

如果需要微調，用 mixin 帶參數進去，如果沒有要微調直接用 extend，因為 mixin 編譯出來的是分開寫， extend 會寫在一起

類似陣列、物件的寫法

• 陣列：direction-types：center, start, end
• 物件：(center：center, start：flex-start, end：flex-end)

@each：類似 map 的用法，把上面的物件寫法一起使用

@each $type, $value in direction-types {
    .flex_#{$type} {
        display： flex;
        justify-content： $value;
    }
}

@for：迴圈的用法

// sass
@for $i from 1 through 3 {
    .box#{$i} {
        width: 10px * $i 
    }
}

// css 
.box1 {
    width：10px;
}

.box2 {
    width: 20px;
}

.box3 {
    width: 30px;
}

sass 簡單範例實戰

1. 設定顏色變數，方便管理顏色
   ex. $red-01：#FF5733
2. 設定字體變數，語意更清楚
   ex. $font-size-small：14px $font-size-normal：16px
3. 開頭 css 名稱相同的，用 "&" 集中起來

規模大的話，可以把變數都寫在一個檔案、mixin 寫在一個檔案、每個 page 自己一個 css，然後在 main.css 把所有東西都 import 進來

1. 打包東西，把相似的都用巢狀寫在一起
2. 設定變數
3. 把不同頁的 css 分不同檔案寫
4. 設定 mixin
5. 把不同檔案 import 進來

Babel

把 JS 的新語法轉換成舊的語法

開始使用 Babel

在 CLI 這樣寫

1. 初始化，會產生 package.json 的檔案

   npm init
   

2. 安裝，page.json 就會產生 babel 的 depencies

   npm install --save-dev @babel/core @babel/cli
   

3. 設定指令，添加 script 在 package.json

   // 表示輸入 build 會把 src 資料夾裡的檔案執行 babel，並把轉換過的檔案放到 lib 資料夾
   "scripts": {
    "build": "babel src -d lib"
   }
   

4. 執行

   npm run build
   

gulp

• 把好幾個 task 寫在 gulpfile 裡面，告訴 gulp 有哪些工具，該怎麼執行
• 搭配 gulp 的 plugin 去管理這些 task，把 task 集中在一個地方，是一個任務管理器
• 適合小網站開發

開始使用 gulp

1. 安裝

   npm install --global gulp-cli
   npm init
   npm install --save-dev gulp
   

2. 建立一個 gulpfile，把要執行的 task 寫在這裡

   function defaultTask(cb) {
   // place code for your default task here
   cb();
   }
   exports.default = defaultTask
   

   ex. gulp-babel

   1. 搜尋 gulp babel，找到文件
   2. 依照文件安裝 gulp-babel

      npm install --save-dev gulp-babel @babel/core @babel/preset-env
      

   3. 依照文件使用
      ```
      const { src, dest } = require('gulp'); // 引入 gulp 的 plugin
      const babel = require('gulp-babel'); // 引入 plugin
      function defaultTask() {
      return src('src/*.js') //抓出 src 資料夾下所有 js 的檔案
      .pipe(babel()) // 經過 babel 轉換
      .pipe(dest('dist')) // 轉換過後會放到 dist 這個資料夾裡面
      }

   exports.default = defaultTask
   ```

其他 Task:

• gulp-sass
• series：把多個任務包起來 (compileCSS, compileJS)，會有先後順序
• parallel：多個任務同時跑
• gulp-uglify：縮小 js 檔案 (去掉空白、換行)
• gulp-clean-css：縮小 css 檔案
• gulp-rename：經過 uglify 的檔案改名成 .min.js

1. 寫完之後測試

   gulp
   

Webpack

為甚麼需要 Webpack

想要把東西給別人用，但因為執行環境不同，例如 node.js vs 瀏覽器的 js，使用的語法不完全相通，所以需要 webpack 把東西包裝過才能讓別人用

• 是一個 module bundler
• 把資源包在一起，經過轉換後，讓你可以在瀏覽器上面使用
• 這跟 gulp 是不一樣的東西

開始使用 Webpack

1. 初始化，產生 package.json

   npm init -y // -y 可以跳過一些設定
   

2. 安裝(在官方網站：documentation -> guide -> getting started)

   npm install webpack webpack-cli --save-dev
   

3. 建立一個 src 的資料夾，把要經過轉換的的檔案放到 src 裡面
4. 啟用 webpack
   webpack 的預設設定會去找 src 裡 index.js，作為程式的入口點進行打包，打包完之後的東西會放在 dist 的資料夾裡

   npx webpack // npx 會找這個資料夾底下的 webpack
   

5. 把 index.html 裡引入的 js 檔案改成 dist/main.js

   // 原本引入的 js
   <script src="src/index.js"></script>
   // webpack 後改變成經轉換的 js
   <script src="dist/main.js"></script>
   

6. 新增檔案 webpack.config.js 設定檔改寫

   const path = require('path');
   module.exports = {
   mode：'development' // 預設是 production，用 development 的模式是開發模式，打包出來的東西比較好看懂
   entry: './src/index.js', //程式入口點
   output: {
    filename: 'main.js', // 輸出的檔案名稱
    path: path.resolve(__dirname, 'dist'), // 輸出的檔案路徑
   },
   };
   

補充：
可以在 package.json 裡 script 的地方加上 "build"："webpack"，當要執行時輸入 build，就會執行 webpack

npm run build

loader：載入 loader，讓 webpack 知道要怎麼去解析該檔案

ex. css-loader：載入進來後，webpack 就知道要怎麼去解析 .css 的檔案

1. 安裝：

   npm install --save-dev style-loader
   npm install --save-dev css-loader
   

2. 在 index.js 加上 import css

   import css from './style.css'
   

3. 在 webpack.config.js 加上 rules

   module: {
   rules: [
    {
      test: /\.css$/i, // 對 .css 的檔案套用 loader
      use: ['style-loader', 'css-loader'], 要套用的 loader
    },
   ],
   },
   

4. 在 src 建立 style.css 的檔案，把 css 寫進去
5. 執行 npm run build

原理：

• 把 css 檔案裡的東西當作字串包起來，透過 js 動態的放到 header 的 style 裡面

webpack-dev-server

可以偵測更改過的檔案，然後自動把更改過的檔案 complie

1. 安裝

   npm install --save-dev webpack-dev-server
   

2. 在 webpack.config.js 加上 devServer

   devServer: {
    contentBase: './dist',
   },
   

3. 在 package.json 新增指令，寫在 scripts 裡

   "start": "webpack-dev-server --open",
   

4. 執行

   npm run start
   

5. 當檔案改過之後，就會自動更改，不用再 build 一次

source-map

把原本的程式碼跟打包過後的程式碼有一個對應關係

1. 在 webpack.config.json 加上 source-map

   devtoool：'inline-source-map'
   

[筆記] webpack 新手教學之淺談模組化與 snowpack

Node.js require/module.exports 用法

採用 CommonJS 標準：

• ruquire('模組名稱/自訂的檔案')：引入模組，可以引入內建的模組，或是引入自己寫的模組
• module.exports：把自訂檔案中自己寫的 function export 出去，此時 require 就會把自訂檔案裡的 function 引入

自訂模組：

// 存在 utils.js 的檔案裡
function double(n) {
    return n * 2
}

module.exports = double

引入模組：

// 在 main.js 的檔案引入
var double = require('utils.js')
console.log(double(5)) // 10

[筆記] 簡易 Regular Expression 入門指南

Regular Expression 正規表達式

• / 字串放這裡 /：找尋是否包含裡面的字串
• /[字串放這裡]/：找尋是否包含字串中的任一個字(只要有一個符合就符合)
  • /[0-9]/、/\d/：是否包含數字
  • /[a-z]/：是否包含小寫字母
  • /[A-Z]/：是否包含大寫字母
  • /[a-zA-Z0-9]/、/\w/：是否包含數字或字母
• /./：任意字元
• /^/：開頭
• /$/：結尾
• /{}/：重複的部分
• / /i：ignore，忽略大小寫
• / /g：global，全都要
• /+/：一個以上
• /()/：比對後 () 內的東西

ex. 找尋手機號碼
條件：

1. 10 位數
2. 09 開頭
3. 每個字元都都是數字

寫成這樣：

/^09\d\d\d\d\d\d\d\d$/
/^09\d{8}$/