9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-02-22

###目標
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でも見れますがスマホ用です。
よろしければ暇つぶしに使って感想いただければ嬉しいです。

9
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?