week13(2021/7/5~2021/7/11)

[Lu-yeom]

日期：110年7月7日20:00~22:30
進度：[FE201] 前端中階：那些前端會用到的工具們 - CSS預處理器

---

課程筆記：

一、什麼是 CSS 預處理器？
CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，以供項目使用。
CSS預處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在CSS中使用變量、簡單的邏輯程序、函數（如右側代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

二、SCSS 簡介

• 先用CMI安裝sass
  npm install -g sass
• 可輸入sass --version查看版本
• 建立style.scss
  mv style.css style.scss
sass style.scss s.css
  會出現兩個檔案style.scss和s.css.map，map會保留原本的程式碼，方便debug。
• 編輯style.scss

  
  $primary-color: #333;

div { color: $primary-color; }

  * 執行```sass style.scss s.css```後查看s.css，會發現程式碼改變如下：  

div { color: #333; }

/# sourceMappingURL=s.css.map /

  * 其他指令  
    * ```sass --watch style.scss s.css```，會偵測style.scss是否有改動
  * 巢狀Nesting  

$font-stack: Helvetica, sans-serif; $primary-color: #333;

body { font: 100%-stack; color: $primary-color; }

div { color: $primary-color; }

.box { h1 { font-size: 24px; } }

  * Mixins(如同function)  

$font-stack: Helvetica, sans-serif; $primary-color: #333;

@mixin full() { width: 100%; height: 100%;

}

body { font: 100%-stack; color: $primary-color; }

div { color: $primary-color; }

.box { @include full(); h1 { font-size: 24px; } }

s.css會轉換如下：

body { font: 100% -stack; color: #333; }

div { color: #333; }

.box { width: 100%; height: 100%; } .box h1 { font-size: 24px; }

/# sourceMappingURL=s.css.map /

  * &hover  
  原本在css設定hover如下：

div:hover { color: red; }

可簡化如下：

div { color: $primary-color;

&:hover { color: red; } }

三、實戰範例：  

$grey-01: rgba(0, 0, 0, 0.3) $error-01: #e74149;

$font-size-title: 36px; $font-size-normal: 16px; $font-size-small: 14px;

body { background: $grey-01; }

.wrapper { max-width: 645px;
background: white; margin: 0 auto; box-shadow: 1.8px 2.4px 5px 0 $grey-01; border-top: solid 6px #fad312; margin-top: 129px; padding: 54px 35px; }

.apply-form { &__title { margin: 0 0 35px 3px; font-family: MicrosoftJhengHei; font-size: $font-size-title; font-weight: bold; color: #000000; }

&__desc { margin-top: 32px; font-size: $font-size-small; line-height: 1.5em; }

&__notice { color: $error-01; font-size: $font-size-normal; margin-top: 20px; } }

四、其他CSS預處理器：  
* [less](https://lesscss.org/)  
* [stylus](https://stylus-lang.com/)  

[Lu-yeom]

日期：110年7月9日-7月11日
進度：[FE201] 前端中階：那些前端會用到的工具們 - Babel、gulp、webpack

---

課程筆記：

一、babel 簡介
可以把Javascript最新語法ES6轉換成ES5
Babel官網

二、babel 實戰
可參考ES6-重點紀錄 開發環境建置(上) - Babel 編譯工具

三、gulp 簡介
任務自動化管理工具，把各種task寫在一起，讓任務依序按照流程做完。
Gulp官方網站

四、初探 gulp
可參考Gulp 安裝與介紹

五、gulp 實戰
範例

const { src, dest } = require('gulp')

function defaultTask() {
  return src('src/*.js')
    .pipe(dest('dist'))
}

exports.default = defaultTask

CMI輸入gulp執行後，會發現多出一個dist資料夾，裏頭有指定名稱的js檔案

gulp-babel用法gulp-babel

const { src, dest } = require('gulp')
const babel = require('gulp-babel');

function defaultTask() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(dest('dist'))
}

exports.default = defaultTask

CMI輸入gulp執行後，指定dist資料夾內的js就可以轉換

gulp-sass用法gulp-sass

const { src, dest } = require('gulp')
const babel = require('gulp-babel');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');

function compileJS() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(dest('dist'))
}

function compileCSS() {
  return src('.src/*.scss')
    .pipe(sass().toString('error', sass.logError))
    .pipe(dest('./css'))
}

exports.default = defaultTask

引入程式碼，可轉換指定資料夾src中的scss檔案

gulp還有series功能，可將任務排序，指定執行順序

const { src, dest, series } = require('gulp')
const babel = require('gulp-babel');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');

function compileJS() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(dest('dist'))
}

function compileCSS() {
  return src('.src/*.scss')
    .pipe(sass().toString('error', sass.logError))
    .pipe(dest('./css'))
}

exports.default = series(compileCSS, compileJS)

但其實這兩個任務其實不會互相干擾，可利用parallel功能平行作業

const { src, dest, series, parallel } = require('gulp')
const babel = require('gulp-babel');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');

function compileJS() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(dest('dist'))
}

function compileCSS() {
  return src('.src/*.scss')
    .pipe(sass().toString('error', sass.logError))
    .pipe(dest('./css'))
}

exports.default = parallel(compileCSS, compileJS)

• 其他常用功能
  • gulp-uglify

    
    const { src, dest, series, parallel } = require('gulp')
    const babel = require('gulp-babel');
    const sass = require('gulp-sass');
    const uglify = require('gulp-uglify');
    sass.compiler = require('node-sass');

function compileJS() { return src('src/*.js') .pipe(babel()) .pipe(uglify()) .pipe(dest('dist')) }

function compileCSS() { return src('.src/*.scss') .pipe(sass().toString('error', sass.logError)) .pipe(dest('./css')) }

exports.default = parallel(compileCSS, compileJS)

  * [gulp-minify-css](https://www.npmjs.com/package/gulp-minify-css)  
  可新增改名功能```.pipe(rename({ extname: '.min.js'}))```  
  * [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css)  

const { src, dest, series, parallel } = require('gulp') const babel = require('gulp-babel'); const sass = require('gulp-sass'); const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); const cleanCSS = require('gulp-clean-css'); sass.compiler = require('node-sass');

function compileJS() { return src('src/*.js') .pipe(babel()) .pipe(uglify()) .pipe(rename({ extname: '.min.js'})) .pipe(dest('dist')) }

function compileCSS() { return src('.src/*.scss') .pipe(sass().toString('error', sass.logError)) .pipe(dest('css')) .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(rename({ extname: '.min.css'})) .pipe(dest('css')) }

exports.compileCSS = compileCSS exports.default = parallel(compileCSS, compileJS)

六、為什麼需要 webpack？  
webpack就是幫我們編譯我們的Preprocess成瀏覽器看得懂的內容然後打包成一包的完成檔案然後拿去server上傳上去。  
一般我們的專案會有兩個很重要的資料夾src與dist，這兩個資料夾是什麼？  
* src : 專門放我們Preprocess的檔案，包括es6、pug、sass、vue、jsx等檔案，這個資料夾不會丟上去server部署。  
* dist : 經過webpack編譯打包後，產生出瀏覽器看得懂的html、css、js，要部署也是這個資料夾去部署。  
[webpack官網](https://webpack.js.org/)  
[webpack教學](https://neighborhood999.github.io/webpack-tutorial-gitbook/Part1/)  

七、webpack與gulp的差別  
gulp是task manager，可以管理task，自行決定順序，但無法做其他事。  
webpack是bundle，會將各種loader捆在一起，並且可執行loader。