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」以外のテーマも作れるようにしてるっぽいですね。複数テーマを準備する予定だったのかしらね。というかここいじれば自分でテーマ作ってビルドできるってことか。テーマのカスタマイズ自体は公式にやり方書いてあるけど、根本的に変える場合はここでやるのかしらね。勉強になります。
自分みたいな凡人は先人・天才に頼らないとやっていけませんね。
