Element theme-chalk分析

コンポーネントライブラリスタイル
一つのコンポーネントの実現は複雑な論理を実現する以外に、多様化されたコンポーネントパターンも非常に重要であり、このセクションでは、Elementのスタイルファイルのディレクトリ構造を分析し、自分のスタイルコードライブラリを構築します.
Element theme-chalk分析Element公式サイトにおける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            

転載先:https://juejin.im/post/5b9253285188255c5047059c