gulpもgruntも使わずにbootstrap4をカスタムビルド

bootstrapのカスタマイズのメリット

bootstrap4はsassで作られているので,変数を設定することでフォントを変えたり,デフォルトの文字色を変えることが出来る.

他のcssを用意して上書きするのに比べて,この方法には以下のメリットがある.

  • cssファイルが1つにまとまる
  • ルールが1つになるため,どのルールが優先されるか気にする必要が無くなる
  • デザインに統一感が生まれやすくなる
  • bootstrapがsassで定義したマクロが使える

デメリットは

  • public CDNを使うことができなくなるため,他のサイトでbootstrapがキャッシュ済みであることを期待できなくなる
  • めんどくさい

なお,この方法を使うとbootstrapのコンパイル済みのCSSを配信するCDNは当然使えなくなるため,npm install bootstrap@4.0.0-alpha.5するなど,パッケージマネージャでローカルにファイルを保存する必要がある.

_custom.scssを編集する方法(間違い)

Bootstrap 4 ships with a _custom.scss file for easy variable overrides.

Customization options · Bootstrap

bootstrapの公式ドキュメントにこう書かれているので,その通り_custom.scssを編集してビルドすることにした.

結論から言うと,この方法はつらく,間違いである.

.gitignoreを編集

普通node_modulesディレクトリはgitの管理外にあるが,_custom.scssはプログラマが手でルールを書く必要があるため,このファイルだけはgitに補足させる.

/node_modules/*
!/node_modules/bootstrap/
/node_modules/bootstrap/*
!/node_modules/bootstrap/scss/
/node_modules/bootstrap/scss/*
!/node_modules/bootstrap/scss/_custom.scss

もうこの時点でつらくなってくる.

bootstrapのビルドコマンドを指定

bootstrap/package.json at v4-dev · twbs/bootstrapを見ればわかる通り,bootstrapをビルドするために必要なパッケージは数多い.

これを自分のアプリケーションのpackage.jsonに記述すると本来必要だったパッケージがわかりにくくなり,bootstrapの将来の更新で不整合が生まれるのも不安になってくる.

そこで,自分のpackage.jsonではgruntコマンドの探索に必要なgrunt-cliだけをインストールし,npm runでnode_modules/bootstrapに移動してもらい,そこでnpm installを行ってもらうことにした.package.jsonを抜粋する.

{
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.5",
    "grunt-cli": "^1.2.0"
  },
  "scripts": {
    "build:bootstrap": "cd node_modules/bootstrap && npm i && grunt dist-css",
    "watch:bootstrap": "cd node_modules/bootstrap && grunt watch"
  }
}

これで無事bootstrapはビルドされる.

この方法の問題点

  • _custom.scssがnpm installする度に上書きされてリセットされる
  • cd node_modules/bootstrap && npm iで大量の重量級パッケージがダウンロードされ,インストールされる
  • gruntを利用したbootstrapのビルドはとても重く,ビルド待ちが長くなりつらくなる

@importする方法

問題点がかなり多かったため,_custom.scssを編集するのはやめることにした.

代わりに,scssファイルからbootstrapを@importする単純な方法を使うことにした.

現時点のこのサイトのdefault.scssを抜粋する.

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, Meiryo, Roboto, Arial, sans-serif;

@import 'node_modules/bootstrap/scss/bootstrap-flex';

blockquote {
    @extend .blockquote;
}

scssを@importする単純な方法で万事解決した.

また,scssを@importしたあとにもスタイルを書けるため,scssのbootstrapのルールを使って,<blockquote>にクラス指定がなくても.blockquoteクラス指定をつけた時と同じスタイルに設定することなどが出来る.

このブログはpandocを使ってmarkdownからhtmlに記事を変換しているため,これができるとスタイル指定が楽である.生htmlタグを書いて手動でクラスを設定する必要が無くなる.

このファイルのビルド手順を記述.package.jsonを抜粋する.

{
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.5",
    "highlight.js": "^9.7.0"
  },
  "scripts": {
    "default.css": "cat default.scss node_modules/highlight.js/styles/solarized-dark.css|sass -I . --stdin --scss"
  }
}

node-sassにはパイプでコマンドを実行すると65536 byteで出力が止まってしまう残念な仕様があったため,portageでインストールしたruby-sassを使っている.

ruby-sassのcssをimportして連結できない仕様は,catコマンドを使って繋げてしまうという荒業で回避している.

dart-sassはこの記事を書いた時点ではまだまだアルファ版であり,bootstrapをビルドすることは出来なかった.

感想

  • _custom.scss早く廃止して
  • sassの@include@extendは便利
  • gulp vs grunt vs catはcatの勝利
  • dart-sassが実用化されてビルドが高速化することに期待したい
このエントリーをはてなブックマークに追加 fb-like g-plusone