ぱそくま ろご
開発 > Bootstrap > Bootstrapのカスタマイズ - その2(リビルド)

Bootstrapのカスタマイズ - その2(リビルド)

Bootstrapのカスタマイズ - その2(リビルド)

Bootstrapをカスタマイズする前に環境設定が必要です。まずは、

  • Gruntと必要なプラグインのインストール。
  • Bundlerのインストール。(入っていない場合)

を行います。これで環境が構築されます。後はカスタマイズになります。カスタマイズは

  • ソースファイルの修正。
  • リビルド

の手順で行います。まずは環境構築をご紹介します。

Gruntと必要なプラグインのインストール

grunt-cliはGruntとは?を参考にグローバルインストールしてください。 後は必要なプラグイン(モジュール)をインストールします。何が必要なのかはpackage.jsonの中に定義してあるので、npm installだけでOKです。(npm installはpackage.jsonを読んで、そこに定義してあるモジュールをインストールしてくれます。)

Gruntとプラグインのインストール

[paso ~] npm install
loadDep:event-emitter → n ▀ ╢█████ ... OC#package.jsonの内容を元に色々入れてくれます。少々時間が。


Bundlerのインストール

Bundlerはscss-lintモジュールを実行する際に必要です。インストールしていない場合は、インストールしください。 (ちなみにBundlerはruby版のnpmみたいなものです。sass自体がrubyで書かれているので、Bundlerが必要になります。)

Bundlerのインストール

[paso ~] sudo gem install bundler #gemでインストールします。gemが入っていない場合はyumやapt-getでインストールしてください。
Fetching: bundler-1.13.6.gem (100%)
Successfully installed bundler-1.13.6
Parsing documentation for bundler-1.13.6
Installing ri documentation for bundler-1.13.6
Done installing documentation for bundler after 5 seconds
1 gem installed

ここまでくれば、環境構築はおしまいです。後は、ソースを修正し、リビルドをするだけです。 ここではちゃんとリビルドが行えるか、何も修正せずにgruntを実行してみます。

Gruntの実行

[paso ~] grunt
Running "clean:dist" (clean) task
>> 1 path cleaned.
.
.
csslint:docs      369ms  ▇▇ 2%
exec:postcss-docs   1.9s  ▇▇▇▇▇▇▇▇▇ 10%
uglify:docsJs         1s  ▇▇▇▇▇ 5%
Total 19.2s

成功したようです。これで、再度index.htmlをdist/の中に作成し、表示してみてください。特に問題なく表示されていると思います。