オリジナルはてなブログテーマをGruntでLessを自動コンパイルして作るための環境設定

オリジナルテーマを作る

Lessで編集できる

このへんを見てると、作り方が載っていました。ただせっかくLessでBoilerplateを編集できるのだから、Gruntでタスク管理して楽チン編集したいと思いました。
デザインテーマ制作の手引き - はてなブログ ヘルプ
http://178.hatenablog.jp/entry/2013/09/09/074302

Gruntでタスク管理したい

ググってみると、sankakuvalidatorさんのブログが出てきました。これを大いに参考にしました。
はてなブログのテーマを作っていたらgruntでlessをコンパイルする環境ができていた - 三角Validator

環境を設定する

git cloneする

$git clone https://github.com/distkloc/SankakuValidator.git

sankakuvalidatorさんのリポジトリをクローンします。

viewフォルダindex.html作成

$mkdir view
$cd view
$touch index.html

viewフォルダを作って、そこへindex.htmlを作成します。

projectName変更

Gruntfile.coffeeに書いてあるprojectNameを自分のものにします。

projectName: 'naoyashigaTheme'

index.htmlをサンプルブログテーマにする

次にindex.htmlに自分のサンプルブログテーマのソースを貼付けます。そしてCSSの読み込み先を修正します。

<link rel="stylesheet" type="text/css" href="./naoyashigaTheme.css"/>

こうするとGruntのパスの設定で「view/naoyashigaTheme.css」が当てられます。直し方がわからないので直接書きました。

<link rel="stylesheet" type="text/css" href="http://localhost:9000/naoyashigaTheme.css"/>

gruntコマンドでLessをコンパイル

$grunt

これでviewフォルダ以下のindex.htmlが呼ばれて、lessファイルを修正すると自動更新してくれるようになりました。

これでテーマを楽チンに制作する準備が整いました。しかしここでやる気がなくなったので、テーマ制作はやる気が出たらまたすることにします笑。