Node環境を整えてCoffeeScript+lessをvim vim しちゃうメモ
JavaScriptを直接記述するのはそれなりに骨が折れそうだった
解決するアプローチとしては
- JSLint
- JSHint
- CoffeeScript
と3つあるとして、JSLintは厳しすぎる、JShintは悪くなさそうだけどなんかまぁ環境を整えるのが面倒そうなのでとりあえずCoffeeScriptに入門してみることにした。
Nodeのインストール
MacならBrewではいるけど、いちおうバージョン管理とかしっかりやっておきたいので少し調べた。
Nodeをどれで管理するか
このエントリが詳しい。
node.js の環境管理ツール nodebrew - Block Rockin’ Codes
nvm, nave, n, nodeenvと比較して、さらにPerlで実装したnodebrewまで盛りだくさん。nodebrewがいいかなーとも思ったんですが、zsh使わないし*1まあnvmが資料がおおくて楽かなって感じなのでnvmにした。
nvmでのインストール
基本的には以下を参考にした
Node.jsとnvmを初めてインストールするときのハマりポイントと対策 - ess sup
git clone git://github.com/creationix/nvm.git ~/.nvm cd .nvm source ./nvm.sh
Macの場合は必要なかったけどUbuntuではなぜか必要になった2点
sudo apt-get install build-essential sudo apt-get install libssl-dev
build-essentialってのはgcc以外になにかと必要らしい。
参考::Ubuntu のデフォルトでは gcc でコンパイルできないので build-essential を入れておく | BlueSky Lab.
opensslもあったらいいかもだけど(注意か警告だかwarnだか出ていた)けど、別に困ることはなかった。
あとはインストール
nvm install v0.6.12 #現時点での最新版
あとは設定を .bashrc に反映させておきましょう
echo source ~/.nvm/nvm.sh >> .bashrc echo nvm use v0.6.12 >> .bashrc
npmのインストール
これは公式に従ってそのまんま
curl http://npmjs.org/install.sh | sh
Coffee-Scriptのインストール
npmでやってくれます。 -g オプションで現在使用している node のバージョンのところにいれてくれる。便利。
npm install -g coffee-script
Coffee-Scriptについてのいろんな例はこちらから。実際にコンパイルしながら見比べてみるとよくできてるなーって、感心します。むしろコンパイルされたjsあんまりよくわかんないんですけど!!!!
今日から始めるCoffeeScript | tech.kayac.com - KAYAC engineers' blog
CoffeeScript基礎文法最速マスター | 株式会社インフィニットループ技術ブログ
試しにちょっと動かしてみる
Pythonではお馴染み、リスト内包記法
ary = (i*i for i in [0...10]) console.log ary
コンパイルは coffee -c hoge.coffee
これのコンパイル結果が
(function() { var ary, i; ary = (function() { var _results; _results = []; for (i = 0; i < 10; i++) { _results.push(i * i); } return _results; })(); console.log(ary); }).call(this);
こんな感じになる。すごい。-cのコンパイルオプションで-bにすると匿名関数の最初と最後のラップの部分はなくなる。実行は
node hoge.js
#[ 0, 1, 4, 9, 16, 25, 36, 49, 64, 81 ]
CoffeeScript用のVim設定
autocmd FileType coffee setlocal dictionary=$HOME/dotfiles/vimfiles/javascript.dict,$HOME/dotfiles/vimfiles/jQuery.dict autocmd FileType javascript,coffee setlocal omnifunc=javascriptcomplete#CompleteJS autocmd FileType coffee set tabstop=4 shiftwidth=4 NeoBundle 'git://github.com/kchmck/vim-coffee-script.git' autocmd BufWritePost *.coffee silent CoffeeMake! -c | cwindow | redraw!
この記事が参考になりました。
VimでCoffeeScriptを書く準備 - いろいろな何か
インデントもシンタックスハイライトもコンパイルも全部やってくれる!CoffeeScript+Vimなら鉄板になりそうですね。
こんな感じで
やり方さえわかっていれば簡単にNode環境が作れるので、簡単にCoffeeScriptできちゃいますね!
さて、ついでにLess環境を整えましょう。LessとはSass(Scss)のようにメタCSS言語みたいなやつです。CoffeeScriptみたいな感じですかね。CSSの中でも変数を定義したりネストしたものをコンパイルして展開できます。
Lessの導入
npm install -g less
これだけです。記述の仕方や参考の資料は以下など
はじめてのCSSメタ言語はLessがおすすめ! « NAVER Engineers' Blog
LESS初心者向けのナニカ - Archiva
実際にコンパイルするときは
lessc arg.less
こんな感じで引数を与えてやると標準出力に出力されます。だから lessc hoge.less > hoge.css とかやればいいですね。
やっぱりSassの方がいいじゃん!って人は、次のエントリでSassの導入をかくつもりなんで読んでください。個人的にはまあRailsでないのだし無理にSassにこだわらなくてもLessでできるならそっちのほうが楽かなって感じです。
Vimの設定
もっと便利にLessしてみましょう
"NOTE:この順番で記述しないと補完と自動展開ができない "lessの自動変換 NeoBundle 'git://github.com/plasticscafe/vim-less-autocompile.git' autocmd BufRead,BufNewFile *.less set filetype=less "自動で変換 let g:less_autocompile=1 "圧縮しない let g:less_compress=0 "less補完 NeoBundle 'git://github.com/groenewege/vim-less.git' autocmd BufNewFile,BufRead *.less set filetype=css
plasticscafe/vim-less-autocompile · GitHub
一番目は*.lessのファイルを食わせて動的に書きだしてくれるプラグインです。情報は少ないですがREADMEを見るかぎりではこんな感じで設定できました。
groenewege/vim-less · GitHub
二番目はLessのSyntax highlightです。もういっこ似たようなのがあった気がしましたが、こっちのほうがなんとなくよさそうだったので選びました。
以上
これで快適CoffeeScript+Less Lifeですね!JSHintもそのうち整えたくなったら整えます。