Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9008

VagrantにNode.js、node-sassをインストールして自動コンパイル

$
0
0

仕事で、node-sassを使うことになったので、インストール手順をまとめます。

■環境
OS: macOS Mojave 10.14.5
VirtualBox: 6.0.10
Vagrant: 2.2.5
ゲストOS: CentOS7
Node.js: v12.13.0
nvm: v0.35.0

nvmのインストール

nvmはNode.jsのバージョン管理(インストール・切り替え)ができるツールです。

githubに書いてある通りにインストールしていきます。
https://github.com/nvm-sh/nvm

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
$ export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
$ nvm -v
Node Version Manager (v0.35.0)

バージョンが表示されれば、インストールOK。

Node.jsインストール

nvmがインストールできたので、Node.jsをインストールします。

$ nvm install --lts

--ltsをつけることで、最新のLTSをインストールできます。

LTSとは、Long Term Supportの略で、「長期サポート」的な意味で、ダウンロードページに「推奨版」と書いてあります。
https://nodejs.org/ja/download/

記事執筆時点でのLTSは12.13.0。

ちなみに、下記のコマンドでインストールできるバージョン一覧を確認できます。

$ nvm ls-remote

バージョンが表示されれば、インストールOK。

$ node -v
v12.13.0

node-sassのインストール

Node.jsがインストールできたので、次にnode-sassをインストールします。
npmというコマンドを使いますが、これはNode.js用のパッケージマネージャーです。
(Node.jsをインストールすれば使用できます。)

$ npm install -g node-sass

オプションに-gを付ける事で、グローバルインストールできます。

package.jsの編集

package.jsというファイルができているので、下記のように記述します。
これは「npm run start」というコマンドを使って、package.json の scripts に指定された内容を実行するためです。
これにより、sassの自動コンパイルが可能になります。

"scripts": {
    "watch:sass": "node-sass src/sass -o dist/sass -w -r --output-style compact"
}

この場合、src/sassディレクトリ内の監視をスタートし、Sassファイルが更新されたらコンパイルします。

nodeの起動

起動します。

$ npm run start

下記のコマンドでもOKです。

$ npm start

Viewing all articles
Browse latest Browse all 9008

Trending Articles