[試著把切版專案升級到 gulp4.0 吧] Day18 CSS 的處理

第 11 屆 iThome 鐵人賽

DAY 18

Modern Web

試著把切版專案升級到 gulp4.0 吧系列第 18 篇

11th鐵人賽 gulp

ayugioh2003

2019-10-04 17:04:47

1238 瀏覽

談完了 HTML 的處理，接下來要談 CSS 的處理了。在這個專案中，除了會用到 SCSS 來撰寫 CSS 外，也會另外引入 BS4 的 SCSS 來幫助切版。

一、首先下載處理 CSS 時需要的套件，以及 Bootstrap4

npm install gulp-sourcemaps --save-dev # 產生 source map
npm install node-sass gulp-sass --save-dev # 將 sass bang 成 css
npm install gulp-postcss --save-dev # 將 CSS 做更進一步的轉換。如使用未來的 CSS、加瀏覽器前綴詞等等
npm install autoprefixer --save-dev # 為 CSS 加入瀏覽器前綴詞
npm install gulp-clean-css --save-dev # 壓縮 CSS 檔案，減少檔案容量

npm install bootstrap

二、在 gulpfile 中建立 scss task

import gulp from "gulp";
import autoprefixer from "autoprefixer";

const $ = require("gulp-load-plugins")();


/*****************************************************
 * CSS 處理 block
 *****************************************************/
export function scss() {
  // PostCSS AutoPrefixer
  // const processors = [
  //   autoprefixer({
  //     browsers: ["last 5 version"]
  //   })
  // ];
  const processors = [ 
    autoprefixer()
  ];

  return gulp
    .src(["./source/stylesheets/**/*.sass", "./source/stylesheets/**/*.scss"])
    .pipe($.sourcemaps.init())
    .pipe(
      $.sass({
        outputStyle: "nested",
        includePaths: ["./node_modules/bootstrap/scss"]
      }).on("error", $.sass.logError)
    )
    .pipe($.postcss(processors))
    .pipe($.cleanCss())
    .pipe($.sourcemaps.write("."))
    .pipe(gulp.dest("./public/stylesheets"));
}

三、在根目錄新增 .browserlistrc 檔案，並在裡面貼上以下文字

# Browsers that we support

last 5 version
> 1%
IE 10 # sorry

四、在 CLI 界面執行 scss task

> gulp scss

[15:59:14] Requiring external module @babel/register
[15:59:32] Using gulpfile D:\Users\Chu\Desktop\鐵人賽：試著把切版專案升級到gulp4吧\Sweataste-gulp4.0\gulpfile.babel.js
[15:59:32] Starting 'scss'...
[15:59:37] Finished 'scss' after 5.06 s

五、最後就可以在 public 資料夾底下看到 stylesheets 資料夾，裡面有 .css 與 .css.map 檔案。

├── gulpfile.babel.js
├── package.json     
├── public/
│   └── stylesheets/
│       ├── all.css
│       └── all.css.map
└── source/
    └── stylesheets/
        ├── all.scss
        ├── components/
        ├── helpers/
        └── pages/