Bootstrap4 に Font-Awesomeとocticonsとbootstrap-sass を入れてコンパイルする

Facebook にシェア
Pocket
LINEで送る
このエントリーを Google ブックマーク に追加

単なるシェルスクリプトで、かつダウンロードチェックなどもしていないため、そのうち書き直す予定。

前提

MacでHomebrew環境を構築の上、以下を実行。
ざっくりといえば、node.js、wget、grunt-cli、ruby、bundleをインストール。

brew update
brew install node wget
npm install -g grunt-cli
brew install ruby
gem install bundle

以下のスクリプトでコンパイル

ホームディレクトリにbootstrapといったフォルダを作成して、以下スクリプトを設置し、実行。

BOOTSTRAP_VERSION="4.0.0-alpha.3"

wget https://github.com/twbs/bootstrap/archive/v${BOOTSTRAP_VERSION}.zip
unzip v${BOOTSTRAP_VERSION}.zip
cd bootstrap-${BOOTSTRAP_VERSION}/
mkdir fonts
npm install

cd ../
wget https://github.com/FortAwesome/Font-Awesome/archive/master.zip
unzip master.zip
rm master.zip
mkdir -p bootstrap-${BOOTSTRAP_VERSION}/font-awesome/scss
cp Font-Awesome-master/scss/* bootstrap-${BOOTSTRAP_VERSION}/font-awesome/scss/
cp Font-Awesome-master/fonts/* bootstrap-${BOOTSTRAP_VERSION}/fonts/
echo '' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
echo '$fa-font-path: "../fonts";' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
echo '@import "../font-awesome/scss/font-awesome.scss";' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
cd bootstrap-${BOOTSTRAP_VERSION}/
grunt dist


cd ../
npm install --save octicons
cp -r node_modules/octicons bootstrap-4.0.0-alpha.3
echo '@import "../octicons/index.scss";' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
cd bootstrap-${BOOTSTRAP_VERSION}/
grunt dist

cd ../
wget https://github.com/twbs/bootstrap-sass/archive/master.zip
unzip master.zip
rm *.zip
cp bootstrap-sass-master/assets/fonts/bootstrap/* bootstrap-${BOOTSTRAP_VERSION}/fonts/
cp bootstrap-sass-master/assets/stylesheets/bootstrap/_glyphicons.scss bootstrap-${BOOTSTRAP_VERSION}/scss/
echo '' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
echo '$bootstrap-sass-asset-helper: false;' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
echo '$icon-font-name: "glyphicons-halflings-regular";' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
echo '$icon-font-svg-id: "glyphicons_halflingsregular";' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
echo '$icon-font-path: "../fonts/";' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
echo '@import "glyphicons";' >> bootstrap-${BOOTSTRAP_VERSION}/scss/bootstrap.scss
cd bootstrap-${BOOTSTRAP_VERSION}/
grunt dist

成功していれば、$HOME/bootstrapで実行した場合、「$HOME/bootstrap/bootstrap-4.0.0-alpha.3/dist/dist/{js,css}」にそれぞれjsファイルとcssファイルが作成されている。はず。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です