はてなブログのテーマを作っていたらgruntでlessをコンパイルする環境ができていた
- はてなブログのboilerplateが公開されている
- このboilerplateにはコンパイル前のlessとコンパイル後のcssが含まれている
- どうせならlessで書いてコンパイルしたい
- gruntを使えばlessファイルの保存を検知して自動コンパイルするタスクが組める
- gruntを使うにはnode.jsのパッケージ管理ツールnpmが必要
- 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に置いておいた。