먼저

이 게시물은 拙文 ぃ tp // 이 m / s까지 / ms / b d2 에 d2 아 8f 37307147의 개량판입니다.
(↑이 투고만으로 완결되어 있으므로 일부러 읽을 필요는 없습니다.)
전작은 Bootstrap 본가의 개발 & 배포 환경( htps : // 기주 b. 코 m / twbs / 보오 tst 등 p )을 통째로 git clone 해 로컬로 직접 실행하고 있었습니다. 그러나 이 방법은 Bootstrap 본가의 jeykyll 배포 절차를 끌어오고 있기 때문에 사이트 전체의 재빌드가 필요하게 되어 '따돌리고 즉석 미리보기'의 생각이 시간이 걸리고 스트레스 맥스가 되기 때문에 그만두겠습니다. 아니 그 외에도 귀찮은 일이 있어・・・

라고 능서는 이 정도로 해・・・

다시 목표

Bootstrap3( ht tp // 게이 t보오 tst 등 p. 코m/ )의 사용자 정의 환경을 가장 빠르고 로컬로 만듭니다. 작업의 효율성을 위해 자동으로 less->css 재구성, 즉시 미리 보고 싶습니다. 이를 위해 Bootswatch의 Github을 사용합니다!

전제

Mac OSX Mavericks & Chrome

Bootswatch ( ht tp // // 보오 tsu tch. 코m/ ) powered by Twitter Bootstrap v3.1.1

ruby, node, git 등 (그 밖에도?)은 인스톨 완료 (brew, anyenv가 편리해!)

절차

1. Bootswatch 개발 환경 다운로드

적당히 디렉토리를 만들어 거기에 git clone한다.

$ mkdir my_bootswatch
$ cd my_bootswatch
$ git clone https://github.com/thomaspark/bootswatch.git

2. grunt 작업 추가 및 변경

Gruntfile.js와 package.json을 패치하십시오.

Gruntfile.js.patch

--- Gruntfile.org.js    2014-02-24 18:56:00.000000000 +0900
+++ Gruntfile.js    2014-02-25 00:17:26.000000000 +0900
@@ -1,8 +1,11 @@
 module.exports = function (grunt) {
+
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-watch'); // added
+  grunt.loadNpmTasks('grunt-contrib-connect'); // added
+  grunt.loadNpmTasks('grunt-notify'); // added

   // Project configuration.
   grunt.initConfig({
@@ -20,6 +23,9 @@
       journal:{}, lumen:{}, readable:{}, simplex:{}, slate:{}, spacelab:{},
       superhero:{}, united:{}, yeti:{}, custom:{}
     },
+    my_swatch: {//added
+      my01:{}
+    },
     clean: {
       build: {
         src: ['*/build.less', '!global/build.less']
@@ -42,6 +48,22 @@
         },
         files: {}
       }
+    },
+    watch: { // added
+      files: ['*/bootswatch.less', '*/variables.less'],
+      tasks: ['my_swatch'],
+      options: {
+        livereload: true,
+      }
+    },
+    connect: { // added
+      server: {
+        options:{
+          port: 9001,
+          hostname: "127.0.0.1",
+          open: true
+        }
+      }
     }
   });

@@ -88,4 +110,14 @@
   grunt.registerTask('default', 'build a theme', function() {
     grunt.task.run('swatch');
   });
+
+
+  //begin-added
+  grunt.registerMultiTask('my_swatch', 'build a theme', function() {
+    var t = this.target;
+    grunt.task.run('build:'+t);
+  });
+  grunt.registerTask('happy_customize', ['connect', 'watch']);
+  //end-added
+
 };

package.json.patch

--- package.org.json    2014-02-25 04:35:24.000000000 +0900
+++ package.json        2014-02-24 19:11:13.000000000 +0900
@@ -18,6 +18,8 @@
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-concat": "~0.3.0",
     "grunt-contrib-less": "~0.9.0",
-    "grunt-contrib-watch": "~0.5.1"
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-contrib-connect": "~0.7.0",
+    "grunt-notify": "~0.2.17"
   }

(↑ 이번에는 Mac 알림 센터에 오류 출력을 리디렉션 해주는 grunt-notify를 추가했습니다)
각각 copipe로 파일에 저장하고,

$ cd bootswatch
$ patch -su < Gruntfile.js.patch
$ patch -su < package.json.patch

3. JS 라이브러리 설정

package.json에서 필요한 라이브러리를 설치합니다.

$ npm install

4. LiveReload 플러그인 설치

Chrome에 LiveReload 플러그인을 넣습니다.
htps // ch 로메. 오, ぇ. 이 m / ぇ bs 잡아 / 싶다 l / ゔ ぇ ぉ 아 d / j는 jbhp 뭉 pc

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

5. bootswatch의 theme(swatch라고도 부른다)로 베이스로 하는 것을 선택한다

원하는 것을 선택하고 디렉토리별 my01이라는 별명으로 복사합니다. 아래의 예는 amelia를 선택한 경우.

$ cp -pri amelia my01

6. 작업 환경을 달리다

grunt로 happy_customize 작업을 실행합니다.

$ grunt happy_customize

7. Happy Customizing!

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



Thanks:
Bootswatch - Free themes for Bootstrap
htp // 보오 tsu tch. 코m/
각 브라우저에 대한 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ー

스케치 이상입니다.

고지

라고 할까 홍보입니다만, 이 엔트리도 ​​관계하고 있습니다만,

2ch 정리 순사장 β

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