목표

Bootstrap3( ht tp // 게이 t보오 tst 등 p. 코m/ ) 의 자전 커스텀 환경을 로컬로 만든다. 작업의 효율성을 위해 자동으로 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 플러그인을 넣습니다.
htps // ch 로메. 오, ぇ. 이 m / ぇ bs 잡아 / 싶다 l / ゔ ぇ ぉ 아 d / j는 jbhp 뭉 pc

↓ 다음은 커스텀 작업을 할 때 실시

5. 작업 환경을 달리다

grunt로 시계 작업을 실행하고,

$ grunt watch

또한 터미널에서 새로운 탭을 만들고,
jekyll에서 htp://0.0.0.0:9001/에 웹 서버를 시작합니다.

$ jekyll serve

6. Happy LESSing

나머지는
htp://0.0.0.0:9001/ 을 표시하면서
가시가 less/*.less를 만지자.
less가 업데이트되면 자동으로 htp://0.0.0.0:9001/ 아래에 반영되어 Chrome 탭이 다시로드됩니다. 오, LiveReload 플러그인을 on으로 사용하는 것을 잊지 마세요.



Thanks:
Bootstrap 3 RC1을 Grunt로 효율적으로 사용자 정의
ぃ tp // 이 m / 스즈키 / / ms / b에서 0, 2686, 5b2, b4cd1
각 브라우저에 대한 LiveReload 플러그인
ht tp // //후에 d바 ck.ぃゔぇぉ아 d. 이 m / k w wd d gebase / ar chi c s / 86242-ho w-do-i-in s ta l an d-use-te-b w w r-e x 텐시 온 sー

스케치 이상입니다.

후일담

사용해 보면 여러가지 스트레스 풀한 방법이므로,
Bootswatch 본가의 개발 환경을 커스텀하고 less 구동으로 효율적으로 Bootstrap을 커스텀한다는 이야기
ぃ tp // 이 m / s까지 / ms / 992 A3 에베 d47718131b1
에 개량판의 투고를 했습니다. 그쪽이 추천입니다.

고지

라고 할까 홍보입니다만,

2ch 정리 순사장 β

htp //j. 어서 마킨 g. 네 t/
라는 것을 만들어 보았습니다. PC에서도 볼 수 있지만 스마트 폰용입니다.
괜찮으시면 여가 시간에 사용해 감상해 주시면 기쁩니다.