mac に vim + chrome の LESS な作業環境をつくる
はてなブログのテーマの作業にて、この度今更ながら LESS を初めて触れる。
これがまた想像以上にフレンドリーで、軽く感動を覚える。
less is more / hooverine
ということで、
macos x 10.9 (mavericks) 上で、Google Chrome と MacVim Kaoriya 使っての LESS な作業環境を建てるまでの流れをメモっておきたいと思います。
言い換えれば、はてなブログのテーマの作業環境を建てる、と言うことにもなりますか。
使う道具は、;
- パッケージ管理 ... Homebrew
- ブラウザー ... Google Chrome
- エディター ... MacVim Kaoriya
これらはいずれも、導入済みであることを前提に、
また、MacVim については、プラグイン NeoBundle ありきで話を進めます。
手続きとして、大きく 2 つの目的で、それぞれ。 ;
- LESS をインストールする
- Homebrew で node.js をインストール
- node.js package manager (npm) で less.js をインストール
- 自動更新 & リアルタイムプレビューの仕組みをつくる
- Chrome に拡張機能 Tincr をインストール
- MacVim にプラグイン vim-less-autocompile をインストール
な感じのアウトラインになるはずかと思います。
では入ります。
LESS のインストール
step 00. Node.js をインストール
npm -v 辺りでイイ返事があるのなら、この step.00 は飛ばして良いかと。
node.jp が入っていない場合は、この node.jp をインストール。
なぜ node.jp かは、これが持つ node package manager (npm) を使いたいからで、
npm のどうしてかについては、less は npm を使ってインストールするので。
と言うことで。
homebrew 使って node.jp をインストールします。
% brew install node
step 01. LESS モジュール (less.js) をインストール
npm 使って less を入れます。;
% npm install --global less
確認。;
% lessc -v lessc 1.7.0 (LESS Compiler) [JavaScript] % type lessc lessc is /usr/local/bin/lessc
CSS 自動更新 & リアルタイムプレビューの準備
step 02. Google Chrome へ拡張機能 Tincr のインストール
Tincr のサイト、トップページにある [Download Tincr] をクリック。
たぶん見慣れた機能拡張インストールの UI へ遷移すると思います。いつもの要領でインストール。
インストールができたかどうか。
Chrome の [デベロッパー ツール] を開き、ここに [Tincr] パネルが追加されていれば OK。
[Tincr] パネル開いての [Configuration] については、閉じたローカル作業なら何もしなくても動いてくれry
step 03. MacVim へプラグイン vim-less-autocompile のインストール
最後のステップです。
neobunde 使って当該プラグインをインストールします。
vimrc に以下記載し、;
NeoBundle 'git://github.com/plasticscafe/vim-less-autocompile.git'
リフレッシュ。macvim 再起動しても良いですが... ;
:so
neobundle インストール。;
:NeoBundleInstall
おしまい。
作業環境は揃いました。
結構、さらりと行くもんだ、と思いませんか?
これで、
vim で *.less ファイルを編集し、
:w で保存すると、内容がリアルタイムで chrome の html ページに反映される、な感じでもみもみ出来る訳です。
と。ここで本文は、おしまいです。
あ、ちなみに。
これで実際の作業フローはどんな感じなのか、については、別の機会にと思っています。
話変わって、これより下では、どうでも良いことを付け足しておきます。
備忘録。
作業しながら取り溜めていたメモ、この堰を切りますよ、と。
LESS とは
LESS は Leaner CSS の略。
簡単に一言で言ってみると、CSS でのコーディングを手助けしてくれるもの。そんな位置づけで良いのだそう。
本家サイトによれば、"CSS プリプロセッサで、CSS を拡張したもの"で、wiki では《動的スタイルシート言語》とか言っている。*1
一番最初に腑に滲みた説明は、技術評論社 の「第1回 LESSのメリットと導入方法:LESSで3倍ラクするスマートフォンコーディング」かと。
ここでは LESS を 《CSSの拡張メタ言語》と表現している。
"CSS の拡張メタ言語" とは? となるが、これについては《CSSの言語自体を拡張し、CSSには存在しない機能を追加するもの》とのこと。
仲間として、Sass とか Stylus とかがいるらしい。
仕組み
less という言語は less.js という仕組みがつかさどる。
less は、つまり less.js に同意と捉えて良いかしら?
で。
less.js とは。
less.js は コンパイラ。
ユーザーは、less のお作法でコードを書き、リソースを用意する。
その拡張子は、.less。
この .less ファイルを、コンパイラ less.jp を使って css ファイルに展開する、という流れ。
こんなイメージ ? ;
↓我、編集する
*.less ファイル
+-------------+ +-------------+
| LESS | --((less.js))--> | CSS |
+-------------+ コンパイル +-------------+
↓生成される
*.css ファイル
な ?
less.js は lessc で呼び出せる
lessc とは、コマンド。
less.js をインストールすると、
《コマンドラインからコンパイラーを呼び出せる》lessc が使えるようになる、とのこと。
Compile .less files to .css using the command line
via. Usage | Less.js
ちょっと引用箇所としてはズレてますけど、分かり易いかと思ったので。
ターミナルで、less ファイルを css ファイルにコンパイルすることができる。;
% lessc foo.less foo.css
less.js は node.js の モジュール。
less.js は node.js のサードパティ的モジュールのひとつ。
なので中身は javascript とか。
なのでなので、node package manager (nmp) でインストールできる。
こんなとこかしら。
Tincr
tincr とは。;
プレビュー確認はChromeのTincrを使うと自動更新してくれるので楽です。
開いたHTMLの上でDeveloper Tools開いておくだけでCSSが更新されると自動更新してくれます。
インポータンなことは、作業時、[デベロッパツール] を開いておく、と言うこと。
[⌘] (command)+ [⌥] (option) + [i] 同時押し*2。これを開いた状態にしておかないと自動更新は機能しないとのこと。
vim-less-autocompile
イメージとして、
上述のターミナル起動して、lessc コマンドで...な手続きを自動的にやってくれる、そんな感じかと。
less の導入作業の中で気になったこと
node.js のインストールで使う fomula は node
まず、node.js の fomula は node で良いと言うこと。
実に取るに足らない基本的な話ではあるのですが、それが nodejs だとか何だとかでゴチャついていて気持ち悪かったので、ここでキメておこうかと。;
% brew search node leafnode node nodenv homebrew/versions/node04 homebrew/versions/node06 homebrew/versions/node08
brew install node で npm も入る、で良い
次に、brew install node とすれば、npm も入る。
npm は一緒にインストールされない、という記述を幾つか見ますが、そうではありませんでした。
例えば実際、今回のケースですとこんな感じ ;
% brew install node ==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/node-0.10.28.mavericks.bottle.tar.gz ######################################################################## 100.0% : **snip** % npm -v 1.4.13
入ってます。
PATH の指定は特にしなくても良い様子
rc ファイルとかに /usr/local/share/npm/bin とか NODE_PATH とか、とにかく path を通せ、との諸説あり。
ここでは、特に何もせずとも問題なく動いてくれている様子。
global でインストールすれば、問題ない、と言うことなのでしょうか。;
and then you will have the lessc command available globally.
via. Usage | Less.js
実際こんなことでしたし...;
% npm install --global less /usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc
おしまい。
*1:wiki の "動的" というのがよく解らないんだけど、どうやら《スタイルシートを動的に生成する言語》としての "動的" みたいです。それでも、ピンと来ないのですが、ま、そういうこととして(笑
*2:いちいちメニュー辿ると結構かったるいので、このショートカット、覚えてしまうと楽です。Win は確か、[Ctrl]+[Shift]+[i] だったかと。
