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ファイルが生成されれば完了です。

参考

• https://qiita.com/sansaisoba/items/242a8ba95bf70ba179d3
• https://original-game.com/gulp-sass-install-and-how-to-use/#gulp-sassgulp-ruby-sass