Element theme-chalk 分析

閒不住的李先森發表於2018-09-07

元件庫樣式

一個元件的實現除了能實現複雜的邏輯,多樣化的元件樣式也是非常重要的，這一節我們將會分析 Element 的樣式檔案的目錄結構，並且搭建一套自己的樣式程式碼庫

Element theme-chalk 分析

在 Element 官網中 theme-chalk 的檔案目錄結構

theme-chalk

很明顯, Element 的樣式檔案 theme-chalk 是一個 gulp 打包的專案。

開啟 package.json 檔案。

  "scripts": {
    "build": "gulp build"
  },
複製程式碼

看出來專案的構建是從 gulp build 開始的。

那就再開啟 gulpfile.js 檔案。

整個的配置檔案內容也比較少，就直接把解釋寫在程式碼中了。更詳細的 gulp 資料，檢視 gulp


'use strict';

var gulp = require('gulp');   
var sass = require('gulp-sass');   // gulp 編譯 scss檔案的外掛
var autoprefixer = require('gulp-autoprefixer'); // 根據設定瀏覽器版本自動處理瀏覽器字首的外掛
var cssmin = require('gulp-cssmin');  // 壓縮css檔案的外掛

gulp.task('compile', function() { // 新建 compile 任務
  return gulp.src('./src/*.scss')  // 匹配所有的 src目錄下的 scss 檔案
    .pipe(sass.sync())  // 同步編譯匹配的檔案
    .pipe(autoprefixer({ // 設定瀏覽器自動字首
      browsers: ['ie > 9', 'last 2 versions'],   // 相容 ie9 以上的版本  以及 其他瀏覽器最後的2個版本
      cascade: false   //檔案不快取
    }))
    .pipe(cssmin())   //編譯後的scss檔案進行壓縮
    .pipe(gulp.dest('./lib'));   //將編譯後的檔案放在 lib 目錄下
});

gulp.task('copyfont', function() {    // iconfont 圖示編譯任務
  return gulp.src('./src/fonts/**')   // 匹配 iconfont 目錄下的所有檔案 
    .pipe(cssmin())   // 壓縮匹配檔案
    .pipe(gulp.dest('./lib/fonts'));   // 將檔案輸出帶 lib/fonts 目錄下
});

gulp.task('build', ['compile', 'copyfont']);   // 執行gulp 

複製程式碼

簡單的看過 gulpfile.js 檔案之後，也就清楚了為什麼我們執行 npm install Element-ui 之後，樣式檔案為什麼會跑到了 element/lib/ 下去了。

接下來，我們就開始看 theme-chalk 的原始碼檔案 -- src 檔案

// src 目錄
|-- common  // 公共樣式
    |-- popup.scss   // 定義彈出元件的樣式
    |-- transition.scss  // 定義Element css動畫樣式
    |-- var.scss  // 定義變數
|-- date-picker  // 定義時間日期選擇樣式
|-- fonts //icon 字型
|-- mixins  // 混合樣式  包含一些全域性的函式 等
    |-- _button.scss   // button 元件樣式 
    |-- config.scss   // 配置檔案 例如 樣式庫字首名配置
    |-- function.scss   // 全域性的樣式函式
    |-- mixins.scss   // 全域性的樣式混合定義
    |-- utils.scss  // 工具樣式混合定義
|-- alert.scss   // 單獨 Alert  元件 的樣式定義 
...
|-- index.scss   // Element 庫 全部的元件樣式檔案

複製程式碼

相關文章