WindowsのAtomで自動コンパイルしてくれるSassの環境を構築する

少し前にWindowsのRubyでSassの環境を構築しました。
WindowsでRubyをインストールしてSassの環境を構築する
しばらく使ってみて、Sassで開発進めよう！という気にはなったのですが、手動でコマンドを実行しないといけない点や、ファイルごとにコマンドを実行する点、これを自動化できたらより作業が捗るだろうなと思い、Node.js + Atomの環境も試してみることにしました。

Atomは私が普段から使用しているエディタです。
Atomのプラグイン「sass-autocompile」を使えば、scssファイルを保存したと同時に自動でcssファイルにコンパイルしてくれるようです。
「sass-autocompile」はNode.jsとnode-sassを利用するプラグインなので、早速インストールします。

ちなみに、今回構築した環境は以下の通りです。

• Windows 10 Home 64bit
• Node.js 8.9.4 64bit
• Atom 1.23.3

Node.jsをインストール

まずWindowsにNode.jsをインストールします。
Node.js

公式サイトにアクセスすると「8.9.4 LTS Recommended For Most Users（安定版）」と「9.4.0 Current Lastest Features（最新版）」が表示されるので、安定版をダウンロードします。

ダウンロードしたファイルを実行してインストールを実行します。インストールには特にオプションなど選択はありません。「次へ」で数分で完了します。

コマンドプロンプトからNode.jsの動作を確認します。
以下のコマンドを実行して、バージョン情報が表示されれば成功です。

> node -v
v8.9.4

次にNode.jsのパッケージ管理コマンドであるnpmコマンドのバージョンを確認します。

> npm -v
5.6.0

node-sassをインストール

npmコマンドを使ってnode-sassをインストールします。

> npm install -g node-sass
C:\Users\user\AppData\Roaming\npm\node-sass -> C:\Users\user\AppData\Roaming\npm\node_modules\node-sass\bin\node-sass

> node-sass@4.7.2 install C:\Users\user\AppData\Roaming\npm\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.7.2/win32-x64-57_binding.node
Download complete  ] - :
Binary saved to C:\Users\user\AppData\Roaming\npm\node_modules\node-sass\vendor\win32-x64-57\binding.node
Caching binary to C:\Users\user\AppData\Roaming\npm-cache\node-sass\4.7.2\win32-x64-57_binding.node

> node-sass@4.7.2 postinstall C:\Users\user\AppData\Roaming\npm\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\user\AppData\Roaming\npm\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
+ node-sass@4.7.2
added 185 packages in 634.22s

外出先で実行したのでダウンロードに時間がかかったかな。。。5分ほどかかりました。
以下のようにnode-sassコマンドでバージョンが確認できればインストール成功です。

> node-sass -v
node-sass       4.7.2   (Wrapper)       [JavaScript]
libsass         3.5.0.beta.2    (Sass Compiler) [C/C++]

sass-autocompileをインストール&設定

Atomに「sass-autocompile」をインストールします。
sass-autocompile

Atomを起動して「Install Packages」から「sass-autocompile」を検索して、インストールを実行します。

インストールが完了したら設定画面を開きます。

主な設定項目です。

Compile on Save	scssファイルを保存すると同時にコンパイルしてくれます。今回の目的がこれなのでオンにします。
Compile with ‘compressed’ output style	オンにするとcssを圧縮された状態でコンパイルしてくれます
Filename pattern for ‘compressed’ compiled files	コンパイル後のcssファイル名のルールです。デフォルトでは「$1.min.css」となっており「.min」が付加されますが、特に必要ないので「$1.css」とします。

実際にsassを使ってみる

それでは実際にsassの自動コンパイル環境を使ってみます。
ここで、インストールの一連の流れでnode-sassとsass-autocompileが関連付けされていない可能性があるため、一度Atomを再起動します。

Atomを起動し、sample.scssファイルを新規作成し適当にsassを記述します。
Ctrl + Sでファイルを保存すると、自動的にコンパイルされsample.cssが作成されました！成功です！

ちなみにsassの記述に誤りがあると、エラーメッセージが表示されます。
構文チェックも自動でやってくれるので、今後の作業効率がだいぶ上がりそうです。