ajike switch

Gruntの導入から説明するBootstrap3 LESSのカスタマイズ – 環境設定編

はじめてBootstrap LESSをがっつりカスタマイズしたので、今回はその覚え書きです。
Bootstrap3 Lessを使用するにあたり、Gruntを導入したほうが俄然便利なため、今回はGruntの導入から説明いたします。

Botstrap LESSでカスタマイズする理由

前もって言ってしまうと、基本的なカスタマイズは公式サイトのカスタマイズページで十分すぎるくらい出来てしまいます(以前見た時よりも、ものすごく項目数が充実しているような気が…)。
そのため、わざわざLESSを使い、さらには環境を整えてやる必要があるかと言われれば、使用目的によっては不要かもしれないですね。
ただ、LESSでのカスタマイズだと公式サイト以上の編集が容易にスピーディーにでき、もしも途中で大幅な仕様変更があった場合でも柔軟に対応できます。
また、構造把握や管理がしっかりできるので、今後もBootstrapを使用していくつもりなら一度は経験したほうがいいかと思います。
大規模なフレームワークは構造把握が面倒なのですが、よくわからないまま使用してしまうと思わぬエラーにつながる恐れがありますし、作りがとてもよく出来ているのでとても勉強になりますよ。

コンパイル方法の変更

Bootstrap3になってからコンパイル方法がGruntになったので個人的には使いやすくなりました。
いままでは、makeコマンドを使用してコンパイルしていたようなのですが、今回からGruntになりました。
こういうのが苦手な方は、ちょっと「うっ」となってしまうかもしれないですが、Gruntfile.jsというタスクを実行するファイルが既に用意されているので、Gruntが入っている環境ならばコマンドを叩くだけで実行されます。
もちろんlessをコンパイルするだけならば、Koaraなどのコンパイラを使ってもいいとは思うのですが、コンパイル以外のタスクを実行できますので、これをきっかけに導入することをお勧めします。

Grunt.jsとは

Grunt.jsは、サーバーサイドのNode.jsというJavascriptを使用したビルドツールです。
コーディングの手助けをしてくれるタスクを自動で行ってくれます。
使用方法は、お馴染みの黒い画面になりますが、実行だけならば基本的にはscssとかと大差ないです。

では具体的にどんなことができるのかというと、一部ですが以下などです。

  • sass,lessなどのメタ言語のコンパイル
  • HTML,css,jsなどをminify化
  • CSS Spriteの自動生成
  • 画像を最適化
  • ファイルの結合
  • スタイルガイドの生成

フロント側コーディングの簡単な部分だけ抜粋しましたが、まだまだ多くのことができます。

Grunt.jsのインストール

Gruntを実行するためにNode.jsをインストールする必要があります。

Node.jsのインストール
以前、StyleDoccoでスタイルガイドページを導入するにて、Node.jsのインストールをしましたので、既に済んでいる人は必要ありません。
まだの人は、下記からダウンロード・インストールしてください。
Node.js

Node.jsのインストールが完了しましたら、ターミナルやコマンドプロンプトにて、grunt-cli をインストールします。
コマンドを起動後、次のものを記述してください。

Mac

sudo npm install -g grunt-cli

Windows

npm install -g grunt-cli

Macの場合、パスワード入力を求められる場合がありますが、実行するとインストールがどんどん進みます。

これで、Gruntを使用できるようになっているはずです。
Gruntの使い方を始めるととても長くなってしまうので、それはまた別の機会に…

Bootstrap LESSのダウンロード

下記のgithubからデータをまるっとダウンロードしてください。
bootstrap
解凍した、bootstrapフォルダは任意の場所に置きます。
データを見ると、ものすごく色々なファイルがあるかと思いますが、さわるところは大体決まっているので簡単な説明です。

・/Gruntfile.js
Gruntの実行タスクを記述するファイルです。
デフォルトで主要なタスクは記述されているので、無理に編集する必要はないです。

・/less/
各lessファイルが格納されています。
このファイルを編集してカスタマイズを進めます。

・/js/
bootstrapのjsプラグインが格納されています。
最終的にbootstrap.jsに結合されて出力されますので、いらないプラグインがある場合は、Gruntfile.jsを編集します。

・/dist/
Gruntfile.jsがデフォルトのままだと、このフォルダにcssとjsがコンパイルされます。

・/assets/
jquery.jsやrespond.min.jsなどのライブラリです。
個人でライブラリを持っていない場合は、必要なものを使ってください。

Gruntfile.jsについて

前述通り、Gruntfile.jsには初めから実行タスクが記述されていますので、大幅にいじる必要はないと思いますが、制作を進める上で便利な変更点をあげます。

コンパイル先を編集

デフォルトだと、dist以下に書き出されてしまうのですが、そのままだと使いにくいですね。
私が普段している構造を例にカスタマイズ方法を説明します。


shared
 └css
 └js
 └img
 └bootstrap
   └dist
    ・
    ・
    ・

このような構造にしているためcssとjsは、distではなく、/shared/cssなどに出力したいとします。
そこで、Gruntfile.jsを編集します。

ファイルを開いてみると、長々とコードが書かれているのですが、38行目辺りに次のように書かれている部分があります。


    concat: {
      〜
      bootstrap: {
        src: [
          'js/transition.js',
          'js/alert.js',
          'js/button.js',
          'js/carousel.js',
          'js/collapse.js',
          'js/dropdown.js',
          'js/modal.js',
          'js/tooltip.js',
          'js/popover.js',
          'js/scrollspy.js',
          'js/tab.js',
          'js/affix.js'
        ],
        dest: 'dist/js/<%= pkg.name %>>.js'
      }
    },

    uglify: {
      〜
      bootstrap: {
        src: ['<%= concat.bootstrap.dest %>'],
        dest: 'dist/js/<%= pkg.name %>>.min.js'
      }
    },

    recess: {
      options: {
        compile: true
      },
      bootstrap: {
        src: ['less/bootstrap.less'],
        dest: 'dist/css/<%= pkg.name %>>.css'
      },
      min: {
        options: {
          compress: true
        },
        src: ['less/bootstrap.less'],
        dest: 'dist/css/<%= pkg.name %>>.min.css'
      },
      theme: {
        src: ['less/theme.less'],
        dest: 'dist/css/<%= pkg.name %>-theme.css'
      },
      theme_min: {
        options: {
          compress: true
        },
        src: ['less/theme.less'],
        dest: 'dist/css/<%= pkg.name %>>-theme.min.css'
      }
    },

これを見れば、大体の人はわかるかと思うのですが、“dest: ‘dist/”とパスが書かれている辺りをどんどん変えていけばいいだけです。
そのため、先ほどの構造の場合ではcss(less)の部分を、次のように書きかえればOKです。


    recess: {
      options: {
        compile: true
      },
      //bootstrap.lessをbootstrap.cssにコンパイルする
      bootstrap: {
        src: ['less/bootstrap.less'],
        dest: '../css/<%= pkg.name %>.css'
      },
      //bootstrap.lessをminifyしてbootstrap.min.cssにコンパイルする
      min: {
        options: {
          compress: true
        },
        src: ['less/bootstrap.less'],
        dest: 'dist/css/<%= pkg.name %>.min.css'
      },
      //theme.lessをbootstrap-theme.cssにコンパイルする
      theme: {
        src: ['less/theme.less'],
        dest: '../css/<%= pkg.name %>-theme.css'
      },
      //theme.lessをminifyしてbootstrap-theme.min.cssにコンパイルする
      theme_min: {
        options: {
          compress: true
        },
        src: ['less/theme.less'],
        dest: '../css/<%= pkg.name %>-theme.min.css'
      }
    },

※ついでに何をしてる部分かコメント書いています

jsも同様に編集すれば、コンパイル先を変更できます。

これにて、書き出し準備が整いました。
長くなってしまったので次回のカスタマイズ編で、Grunt実行~Bootstrap less構造の説明をします。

Bootstrap3 LESSのカスタマイズ -カスタマイズ編

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×