scssを利用して作成するのにどういう構成がいいのかな~って考えてたんだけど、
自分アホなので、頭使うよりここは有名なリポジトリからパクろうと思い立った。
という事で「element-ui」でやってるやり方を参考にしよう。
element-uiのソースを読んでみる。
まず、ビルドはどうしているのだろうか。Makefileがあるから、
きっとmake ***で何かしてるんだろう。というわけでMakefile
# build all theme build-theme: npm run build:theme install: npm install install-cn: npm install --registry=http://registry.npm.taobao.org ・・・・
お。build-themeっていうのがある。多分これっぽい。
npm run build:themeのエイリアスですか。
そしたら、package.json見てみましょ。
"scripts": { "bootstrap": "yarn || npm i", "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js", "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk", "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
node build/bin/gen-cssfileしてから
gulp build --gulpfile packages/theme-chalk/gulpfile.jsでビルドして、
cp-cli packages/theme-chalk/lib lib/theme-chalkでリリース用のディレクトリにコピーって流れかな?
gen-cssfileは何してるのかしら。
var fs = require('fs'); var path = require('path'); var Components = require('../../components.json'); var themes = [ 'theme-chalk' ]; Components = Object.keys(Components); var basepath = path.resolve(__dirname, '../../packages/'); function fileExists(filePath) { try { return fs.statSync(filePath).isFile(); } catch (err) { return false; } } themes.forEach((theme) => { var isSCSS = theme !== 'theme-default'; var indexContent = isSCSS ? '@import "./base.scss";\n' : '@import "./base.css";\n'; Components.forEach(function(key) { if (['icon', 'option', 'option-group'].indexOf(key) > -1) return; var fileName = key + (isSCSS ? '.scss' : '.css'); indexContent += '@import "./' + fileName + '";\n'; var filePath = path.resolve(basepath, theme, 'src', fileName); if (!fileExists(filePath)) { fs.writeFileSync(filePath, '', 'utf8'); console.log(theme, ' 创建遗漏的 ', fileName, ' 文件'); } }); fs.writeFileSync(path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), indexContent); });
components.jsonを読み込んで何やらループしてる模様。
components.jsonは何かいてあるのかしら
{ "pagination": "./packages/pagination/index.js", "dialog": "./packages/dialog/index.js", "autocomplete": "./packages/autocomplete/index.js", "dropdown": "./packages/dropdown/index.js", "dropdown-menu": "./packages/dropdown-menu/index.js", "dropdown-item": "./packages/dropdown-item/index.js", "menu": "./packages/menu/index.js",
element-uiの各コンポーネントの名前定義っぽいですね。
コンポーネントの一覧でループして、それぞれのコンポーネントのSCSSを読み込むための
@import "./dialog.scss";
↑みたいなのを一個づつ書いてindex.scssっていうファイルを作成してる感じかな?
次は、gulp build --gulpfile packages/theme-chalk/gulpfile.js
'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var cssmin = require('gulp-cssmin'); gulp.task('compile', function() { return gulp.src('./src/*.scss') .pipe(sass.sync()) .pipe(autoprefixer({ browsers: ['ie > 9', 'last 2 versions'], cascade: false })) .pipe(cssmin()) .pipe(gulp.dest('./lib')); }); gulp.task('copyfont', function() { return gulp.src('./src/fonts/**') .pipe(cssmin()) .pipe(gulp.dest('./lib/fonts')); }); gulp.task('build', ['compile', 'copyfont']);
ほうほう。gulp-sassとgulp-autoprefixerとgulp-cssminを使ってる模様。
gulp-sassはscssのコンパイラでしょ。
autoprefixerはベンダプレフィクスつけるやつよね。
cssminはcssのミニファイズしてくれるやつかな。
あと、Webフォントのコピーをしてる感じかー。
compileでsrc配下の.scssファイルを丸ごとビルドする感じなのね。
なるほろ。なるほろ。
element-ui使うときって↓とかでcss一個しか読んでないけど、こうやって各コンポーネントのcssを一個にまとめてたのね。なるほろ。なるほろ。
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
ソース読んで見ると、「gen-cssfile.js」で「theme-chalk」以外のテーマも作れるようにしてるっぽいですね。複数テーマを準備する予定だったのかしらね。というかここいじれば自分でテーマ作ってビルドできるってことか。テーマのカスタマイズ自体は公式にやり方書いてあるけど、根本的に変える場合はここでやるのかしらね。勉強になります。
自分みたいな凡人は先人・天才に頼らないとやっていけませんね。