はてなブログのテーマを作っていたらgruntでlessをコンパイルする環境ができていた

hatena grunt
  1. はてなブログのboilerplateが公開されている
  2. このboilerplateにはコンパイル前のlessとコンパイル後のcssが含まれている
  3. どうせならlessで書いてコンパイルしたい
  4. gruntを使えばlessファイルの保存を検知して自動コンパイルするタスクが組める
  5. gruntを使うにはnode.jsのパッケージ管理ツールnpmが必要
  6. nodebrewならnode.jsのバージョンも管理できる

ということなので、はてなブログのテーマを作ろうとしたら何故かnodebrewのインストールから始めることになった。

nodebrewのインストール

この辺り読んで入れた。僕はnodebrew installしてしまったけど、nodebrew install-binaryにしたほうが速いしいいと思う。
知らずにnodebrew installしたら大変時間が掛かってたいへん大変だった。

gruntのインストール

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17

このへん。プラグインについては、まずgruntを入れて

npm install grunt --save-dev

lessをコンパイルする grunt-contrib-less と

npm install grunt-contrib-less --save-dev

ファイルを監視して何かをする grunt-este-watch と

npm install grunt-este-watch --save-dev

サーバーに繋いでLiveReloadする grunt-contrib-connect を入れた。

npm install grunt-contrib-connect --save-dev

grunt-contrib-watchではなくてgrunt-este-watchにしたのは軽いから。

Node.js - grunt-este-watchとgrunt-contrib-connectで軽快ファイル監視とLiveReload - Qiita [キータ]

Gruntfile.js作成

grunt-contrib-lessでlessファイルのコンパイルを自動化する。 - タチコマ好きなエンジニアのブログ

この辺りを参考にさせてもらった。僕のGruntfile.jsはこちら。

grunt-contrib-lessの設定は、開発環境用と

development: {
    options: {
        paths: '<%= less.production.options.paths %>'
    },
    files: {
        '<%= projectName %>.css': '<%= projectName %>.less'        
    } 
}

clean-cssで圧縮してcss出力する本番環境用に分けた。

production: {
    options: {
        paths: ['less'],
        cleancss: true
    },
    files: {
        '<%= projectName %>.min.css': '<%= projectName %>.less'        
    }
},

pathsは開発/本番どちらも同じにしたいので、開発は本番のプロパティ値を参照するようにした。cssはプロジェクトのルートに出力するようにした。

ちなみに<%= %>はgruntのテンプレート機能で、自分で定義したものを使ったり、他のプロパティから参照したり、jsをインラインで実行できたりする。詳しくはここ。

grunt-este-watchについては、

esteWatch: {
    options: {
        dirs: ['./', 'less/'],
    },
    'less': function(filepath) { return 'less:development' }
}

カレントディレクトリとlessディレクトリのlessファイルに更新があれば、grunt-contrib-lessの開発環境用タスクが動くという感じ。

そしてgrunt-contrib-connectは、

connect: {
    server: {
        options: {
            livereload: true,
            port: 9000,
            open: 'http://localhost:<%= connect.server.options.port %>/view/'
        }
    }
},

こんな感じでlivereload: trueにしておくと、grunt実行時にLiveReloadに必要なスクリプトをhtmlファイルに自動でインジェクトしてくれる。これをやっておけばブラウザのLiveReloadエクステンションとかはいらない。あとopenにURLを指定することでデフォルトのブラウザを使って自動でそのページを開いてくれるようになる。/view/以下にテスト用のindex.htmlなどをおいているのでそこを指定。

CSSコンパイル

あとはプロジェクトのルートで

grunt

を実行すればターミナルが待機状態になり勝手にブラウザでview/index.htmlが開く。そしてlessファイルを修正すると自動でコンパイルしてブラウザ再読み込みが走る。これはたのしい。

貼り付け

良い塩梅にデザインできたら

grunt less:production

で圧縮して出力されたcssをはてなブログのデザインCSSに貼り付けておしまい。css出力先をdropboxとかにしてはてなブログ側で外部css読み込みしておけば一々コピペとかしなくて捗ると思う。

はてなブログテーマのらくちん制作環境 - kyabana's blog

でも僕は様々なしがらみがあってやっていない。人間誰しもしがらみを持って生きているからしかたがないことだと思う。

ソースはGitHubに置いておいた。

distkloc/SankakuValidator