【WebStormでSassを使おう】1:node.jsとGruntの準備

現状自分のマスト環境になっているWebStormでのSassの利用についてまとめます。

まずはnode.jsとGruntの準備から。
Sassはこれらを使って動くためです。

前提

  • WebStormインストール済み
  • WebStormでSassを利用したいプロジェクトを開いた状態

node.jsをインストール

http://nodejs.org/ まずnode.jsをインストールしましょう。

次にWebStormのTerminalより、下記コマンドを打ってください。

node -v

下記のようにバージョン数が出たらOKです。

v0.10.32

Rubyをインストール

http://rubyinstaller.org/
Windowsであれば上記よりインストーラーをダウンロードできます。

node.jsの時と同様にTerminalから下記コマンドを打ってください。

ruby -v

下記のようにバージョン数が出たらOKです。

ruby 2.1.3p242 (2014-09-19 revision 47630) [x64-mingw32]

Gruntをインストール

下記コマンドを打ちGruntをインストールします。

npm install -g grunt-cli

次に下記コマンドを打ちます。

npm init

下記の順の対話型で入力を求められます。

name: {プロジェクト名}
version: (Enterで飛ばす)
description: (Enterで飛ばす)
entry point: Gruntfile.js
test command: (Enterで飛ばす)
git repository: (Enterで飛ばす)
keywords: (Enterで飛ばす)
author: (Enterで飛ばす)
license: (Enterで飛ばす)

Is this ok? (EnterでOK)

入力後、プロジェクトフォルダ内に package.json が作られます。
上記で書いた内容が反映されています。

次に下記コマンドを打ちます。

npm install grunt --save-dev

プロジェクト内に node_modules というフォルダが作られ、このプロジェクト専用のGrunt用ファイルがインストールされます。

次回に続きます。