Help us understand the problem. What is going on with this article?

Bootstrap3のcssをless駆動でがしがしカスタムする、というお話

More than 5 years have passed since last update.

目標

Bootstrap3(http://getbootstrap.com/) の自前カスタム環境をローカルに作る。作業の効率化のために自動でless->cssリビルド、すぐにプレビューしながらやりたい。

前提

  • Mac OSX Mavericks & Chrome
  • Twitter Bootstrap v3.1.1
  • ruby, python, node, git, jekyll 等(他にも?)はインストール済み(brew, anyenvが便利だよ!)

手順

1. Bootstrap をダウンロード

適当にディレクトリを作ってそこにgit cloneする。

$ mkdir twbs3
$ cd twbs3
$ git clone https://github.com/twbs/bootstrap.git

2. JSライブラリのセットアップ

package.jsonから必要なライブラリをインストールする。

$ cd bootstrap
$ npm install

3. gruntタスクの追加と変更

Gruntfile.jsを編集する。【慎重にね】
更新差分は以下。

$ diff -bu Gruntfile.org.js Gruntfile.js

--- Gruntfile.org.js    2014-02-23 00:31:01.000000000 +0900
+++ Gruntfile.js    2014-02-23 00:57:20.000000000 +0900
@@ -323,8 +323,12 @@
       },
       less: {
         files: 'less/*.less',
-        tasks: 'less'
-      }
+        // tasks: 'less' //removed
+        tasks: ['dist-css', 'dist-docs', 'exec:jekyllRebuild'] //added
+      },
+      options: { //added
+        livereload: true,
+      },
     },

     sed: {
@@ -355,6 +359,9 @@
       },
       npmShrinkWrap: {
         command: 'npm shrinkwrap --dev'
+      },
+      jekyllRebuild: { //added
+        command: 'jekyll build'
       }
     }
   });

4. LiveReloadプラグインのインストール

ChromeにLiveReloadプラグインを入れる。
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei


↓ 以下はカスタム作業をする時に行う

5. 作業環境を走らせる

grunt でwatchタスクを走らせ、

$ grunt watch

さらにターミナルで新タブ作って、
jekyllで http://0.0.0.0:9001/ にWEBサーバを立ち上げる。

$ jekyll serve

6. Happy LESSing

あとは
http://0.0.0.0:9001/ を表示しながら
がしがしless/*.lessをいじりましょう。
lessが更新されると自動で http://0.0.0.0:9001/ 以下に反映され、さらにChromeのタブがリロードされます。あ、LiveReloadプラグインをonにしとくのを忘れずに。

bodyの背景色をyellowにしたの図

Thanks:
Bootstrap 3 RC1をGruntで効率的にカスタマイズ
http://qiita.com/suzukima/items/bde0a2686e5b2eb4cd1a
各ブラウザ用LiveReloadプラグイン
http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

大ざっぱに以上です。

後日談

使ってみると色々とストレスフルなやり方なので、
Bootswatch本家の開発環境をカスタムしてless駆動で効率的にBootstrapをカスタムする、というお話
http://qiita.com/smaeda/items/992a3ebbed47718131b1
に改良版の投稿をしました。そちらがお勧めです。


告知

というか宣伝ですが、

2chまとめ巡査長β

http://j.inthemaking.net/
というのを作ってみました。PCでも見れますがスマホ用です。
よろしければ暇つぶしに使って感想いただければ嬉しいです。

devweb
やる気のあるコピペプログラマー。
http://j.inthemaking.net/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした