前端的一些工具

前端常用到的工具建議介紹。

JQuery

It's JS Library.You Might Not Need jQuery

出現背景為:很久以前眾多瀏覽器的支援程度不一，造成寫程式碼的困難，而JQuery則可以大幅降低在不同瀏覽器中不支援的問題發生。

使用

在HTML檔案中引入。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

$就代表JQuery!

代理事件 : ().on('click','.btn-delete',(e)=>{})

存取附近節點 parent()

清空內容 : empty()

Bootstrap

幫你寫好很多CSS、JS可以用Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

CSS預處理器

寫的時候可以寫一些新的語法，再將其轉換(編譯)成可以支援該瀏覽器的CSS

SASS

Sass: Install Sass (sass-lang.com)支援SCSS和CSS

安裝 $npm install -g sass

編譯 $sass input.scss ouput.css

自動編譯 $sass --watch input.scss ouput.css

壓縮(去除空行、格) $sass --style=compressed input.scss ouput.css

參數與結構化	模組化	自動化
Nesting	Import	Condition
Variables (新版css也有)	Extend	Loop
	Mixin
	Functions

& 自己的意思，例如要加上btn:hover則在btn{}裡加上&:hover

  .apply-form__title{...}
  //可以改成
  .apply-form{
      &__title{
          ...
      }    
  }

引入 import 檔案(要引入的通常命名以_開頭)

Extend 和 Mixin 都是可以讓很多不同Class套用同一個樣式，但Mixin可以傳入參數且CSS會重複多次，可以另開一個_mixin.scss在import進來。用法如下:

//Extend
%btn
.btn{
    &-primary:@extend %btn;
    &-secondary:@extend %btn;
    &-warning:@extend %btn;
}
//Mixin
@Mixin btn{
    padding:...
    color:...
}
.btn{
    &-primary:+btn;
    &-secondary:+btn;
    &-warning:+btn;
}

condition & loop 在flow control裡Sass: Flow Control Rules (sass-lang.com)

.apply-form
      {
        &__title {
          margin: 0;
          font-size: 36px;
          font-weight: bold;
        } 
        &__desc {
          margin-top: 32px;
          font-size: 14px;
          line-height: 1.5em;
        }
        &_notice {
          color: #e74149;
          font-size: 16px;
          margin-top: 20px;
        }
      }

通常作法

utils常用變數、樣式整理成Mixin
顏色、排版置中、hover
components 會跨頁的元件
button、標題、圖片wrapper
layout 不會重複的
pages

Babel

It's a JS complier.把程式碼轉換為舊的格式。

$npm init
$npm install --save-dev @babel/core @babel/cli
在package.json中的scripts新增"build": "babel src -d lib"(代表code會寫在資料夾src，產生檔案放在lib)
在根目錄新增.babelrc
貼上下面資料，之後依自己使用的套件等去做設定。
```
{
    "presets": ["@babel/preset-env"]
}
```
$npm run build

Gulp

task manager.

確認node、npm、npx都有裝好 (--version)
$npm install --global gulp-cli
$npm init
$npm install --save-dev gulp
$gulp --version
new file gulpfile.js

paste

function defaultTask(cb) {
  // place code for your default task here
  cb();//callback -> mission completed
}

exports.default = defaultTask

gulp

將任務放進來

以下都在gulpfile.js設定

基礎用法

const {src,dest} = require('gulp');
function defaultTask(cb) {
    return src('src/*.js')//來源為src內的所有js
        .pipe(dest('dist'))//放到dist內，需用Pipe連接動作。
    cb();
    }
    exports.default = defaultTask

+bable

ref :gulp-babel - npm (npmjs.com)

const {src,dest} = require('gulp');
const babel = require('gulp-babel');
function defaultTask(cb) {
    return src('src/*.js')
        .pipe(babel())
        .pipe(dest('dist'))
    cb();
    }
exports.default = defaultTask

+sass

ref:gulp-sass - npm (npmjs.com)

const {src,dest} = require('gulp');
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
function defaultTask(cb) {
    // return src('src/*.js')
    //     .pipe(babel())
    //     .pipe(dest('dist'))
    // cb();
    return gulp.src('src/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
    }
exports.default = defaultTask

兩個放一起

series照順序做、parallel平行做(互不干擾的時候用的)

const {src,dest,series,parallel} = require('gulp');
const babel = require('gulp-babel');
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
function compileJS(){
    return src('src/*.js')
        .pipe(babel())
        .pipe(dest('dist'))    
}
function compileCSS() {
    return gulp.src('src/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
    }
//exports.default = series(compileCSS,compileJS)
exports.default = parallel(compileCSS,compileJS)

一些常用的Plugin

gulp-uglify : 用在壓縮JS
gulp-clean-css : 用在壓縮CSS
gulp-rename :重新命名，通常壓縮過的檔案取作檔名.min.js 用法為.pipe(rename({extname:'.min.js'}))

Webpack

Bundle!!!!!把模組包在一起!之前用EXPORTS只能在NODE.js使用，瀏覽器不行!所以可以透過這個工具讓其正常運作。

$npm init
$npm install webpack webpack-cli --save-dev
$npx webpack
會將/src/index.js為預設入口點；出口點/dist/main.js

在webpack.config.js裡去做預設設定

const path = require('path');
module.exports = {
  mode: 'development',//不會壓縮，default = production
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
      //可設為'bundle.[hash].js'
    path: path.resolve(__dirname, 'dist'),
  },
};

CSS也可以用引入的

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

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

實戰

babel-loader
babel-loader | webpack
sass-loader
sass-loader | webpack

webpack server(動態看每次的更動)

//webpack.config.js
output: {
    ...
},
devServer: {
   static: {
        directory: path.join(__dirname, 'dist'),
   },
   compress: true,
   port: 9000,
},
module: {...}

  //package.json
  "scripts": {
        "start": "webpack-dev-server --open",
      "build": "webpack",
      "test": "echo \"Error: no test specified\" && exit 1"
  },

source map 在devtool debug時可以連到原始程式碼
in webpack.config.js
```
entry{},
devtool: 'inline-source-map',
output:{}
```
HtmlWebpackPlugin自動產生一個.html
HtmlWebpackPlugin | webpack

前端的一些工具

JQuery​

使用​

Bootstrap​

CSS預處理器​

SASS​

通常作法​

Babel​

Gulp​

將任務放進來​

一些常用的Plugin​

Webpack​

CSS也可以用引入的​

實戰​