gulpでsassをコンパイルしたい
vagrant内にnvmでnode.jsをインストールして、gulpコマンドでsassをコンパイルできるようにしたので、そのメモです。
sassをコンパイルするだけであればnvmを使う必要もないのですが、今後のことも考えてnvmを利用することにしました。
*gulpfile.jsを用意してある前提で進めます。
nvm
nvmのリポジトリを参考に、下記コマンドを実行します。
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
終わったらpathが通っているかを確認します。
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
この2行が追加されていればOKです。
場合によっては.bashrcではなく、.bash_profileなどに書き込まれることがあるようです。
nvmのリポジトリにも記載があるので、
「追加されてない！？」
と慌てる前に確認しましょう。
pathが通っていることが確認できたら一度vagrantからログアウトし、再度vagrant sshでログインしてください。
ログインできたら改めてnvmのバージョンを確認します。
[vagrant@localhost ~]$ nvm --version
0.31.0
これでnvmのインストールは完了です。
node.js
続いてnode.jsをインストールします。
安定版をインストールする場合は
nvm install --lts
これだけでOKです。
自分でバージョンを選びたい場合は
nvm install v*.**.*(バージョン番号)
これでインストールできます。
バージョン一覧を見たい場合は
nvm ls-remote
を叩きましょう。
インストールが終わったら、nodeのバージョンを確認します。
[vagrant@localhost ~]$ node -v
v6.11.4
同時にnpmのバージョンも確認しておきます。
[vagrant@localhost ~]$ npm -v
3.10.10
これでnodeのインストールまで完了しました。
nodeコマンドが使えない時
nvmでnode.jsをインストールした後、デフォルトのバージョンを指定しないとnodeもnpmを使えなくなることがあります。
その場合は
nvm alias default v*.**.*(バージョン番号)
を実行し、デフォルトのバージョンを指定してください。
インストールされているnode.jsのバージョンは
[vagrant@localhost ~]$ nvm ls
-> v6.11.4
default -> v6.11.4
node -> stable (-> v6.11.4) (default)
stable -> 6.11 (-> v6.11.4) (default)
これで確認できます。
gulp
gulpをインストールします。
先にグローバルインストールをしたいので
npm install -g gulp
を叩いてインストールします。
その後、gulpをローカルインストールしたいディレクトリに移動してから
npm install gulp
を実行します。
インストールが終わったら、gulpのバージョンを確認します。
gulp -v
バージョンが表示されればOKです。
ただ、これだけではsassをコンパイルできないので、gulp-sassをインストールします。
npm install gulp-sass
エラーなくインストールできたらgulpコマンドを叩き、cssファイルが生成されれば完了です。