19
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Bootstrap 3 RC1をGruntで効率的にカスタマイズ

Bootstrap 3 RC1では、ビルドシステムがmakeからGruntへ変更されています。このGruntを使うと、lessファイルやJavaScriptファイルの変更を監視し、自動でビルド、といったことができます。
RC1ではサイトからLESSの変数をカスタマイズすることができなくなっているので、自分でLESSコンパイルが必要です。そのときに予め用意されたGruntをを使うと楽です。ただこの方法が以前のように書かれていないようなので、調査ついでに試してみました。

事前準備

nodeをインストールしましょう。

grunt-cliのインストール

Gruntを使えるようにします。Grunt 0.3からは、gruntのコマンドラインインターフェースであるgrunt-cliをインストールして利用するようになっています。0.3未満のGruntを使用していた場合は、npm uninstall -g gruntを実行してアンインストールしておきましょう。

grunt-cliはグローバルにインストールしましょう。npm install -g grunt-cliを実行すればインストール完了です。

Bootstrap 3 RC1を入手

ビルドするためにソースコード付きのものをダウンロードします。Getting started · BootstrapDownload latest source codeからダウンロードするか、GitHubからcloneするなりしてください。zipでダウンロードした場合は適当なフォルダに展開しておきましょう。

必要なものをインストール

展開後のフォルダに移動し、npm installを実行すると、必要なものを自動で次々ダウンロードしてくれます。

これで、Gruntでのビルドができるようになりました。

利用方法

ビルドでどのような処理がされるかは、Gruntfile.jsに記述されています。ここでは代表的なもののみ紹介します。

grunt watch

展開したフォルダの直下でgrunt watchを実行すると、js/.js, js/test/tests/unit/.js, less/*.less の監視を開始し、変更があると自動的に以下を実行します。

  • jshintとqunit(JavaScriptファイルの場合)
  • lessファイルコンパイルと圧縮(LESSファイルの場合)

LESSファイルから生成されたCSSファイルは、dist/cssに配置されます。

grunt clean

distディレクトリを削除します。つまり、生成されたファイルを掃除します。

grunt

gruntのみを実行すると、以下を実施します。

  • jshint
  • qunit
  • distディレクトリの削除
  • lessコンパイルと圧縮
  • JavaScriptファイルの結合(concat)と圧縮(uglify)

他にもGruntのタスクはありますので、興味のある方はGruntfile.jsを覗いてみてください。

カスタマイズですが、一度gruntを実行してファイルを生成しておき、カスタマイズ実施中はwatchで自動コンパイル、完成したらgruntでJavaScriptのconcatとuglifyも実行、という流れで使っていけばよいでしょう。

さらに効率的にカスタマイズ

watchタスクにちょっと手を加えるだけでLiveReload(ファイルに更新があると自動でブラウザをリロードしてくれる)がつかえるようになるので、ぜひ利用しましょう。

ブラウザ拡張のインストール

まず、How do I install and use the browser extensions? – LiveReload Help & Supportに、各ブラウザへ対応した拡張へのリンクがありますので、そこからインストールしましょう。

watch実行時にLiveReloadが実行されるようGruntfileを変更

Gruntfile.jsを編集し、watchタスクのoptionとして、livereload: trueを追加してください。以下の様な感じです。

    watch: {
      option: {
        livereload: true,
      },
      src: {
        files: '<%= jshint.src.src %>',
        tasks: ['jshint:src', 'qunit']
      },
      test: {
        files: '<%= jshint.test.src %>',
        tasks: ['jshint:test', 'qunit']
      },
      recess: {
        files: 'less/*.less',
        tasks: ['recess']
      }
    }

確認

あとは、確認対象ファイルをブラウザで開き、ブラウザ拡張のボタンを押せばOKです。watch対象のファイルを編集し保存すると、自動でブラウザがリロードされるはずです。これでさらに効率的なカスタマイズができますね!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
19
Help us understand the problem. What are the problem?