後輩に聞かれても困らないgulpを使ったsassのコンパイル環境を構築する方法

Ateam Hikkoshi Samurai Inc. Advent Calendar 2017 25日目です。

最後は17新卒のフロントエンド、@diaが担当致します。
よろしくお願いします。

今回はgulpを使ったsassのコンパイル環境の構築について書いていこうと思います。
配属当初、自分あれこれで調べながら環境構築をしておりました。
とにかくwebで調べて環境を作ることはできたのですが、人に教えられるかと言われると、教えられない状態でした。
自分の言葉で説明してより理解をしようと思いこのテーマにしました。

sassをコンパイルするにはgulpが必要→gulpを使うにはnpmが必要→npmを使うにはnode.jsが必要…
お使いイベントかな？

目次

1.node.jsの導入
2.npmの導入
3.gulpの導入
4.gulpにsassをコンパイルさせる

node.jsの導入

まずはnode.jsをインストールする必要があります。
sassをコンパイルしてくれるgulpはnpm（パッケージ管理ツール）を使って導入するのですが、npmを使うためにnode.jsが必要になります。

実際のインストールにはnodebrewを使ってnode.jsを導入します。
（nodebrewとはnode.jsのバージョンを管理してくれるツールです。)

nodebrewの導入にはターミナルで以下のコマンドを実行します。

$ curl -L git.io/nodebrew | perl - setup

curlというコマンドでファイルのダウンロードをしています。
git.io/nodebrewがダウンロード先のURLです。

これでnodebrewもといnode.jsを導入することができました。
ちゃんと導入されているか確認しましょう。
以下のコマンドで確認できます。

$ node -v

導入に成功していればバージョン情報が表示されます。
これで最初のステップは終了です。

npmの導入

node.jsが使える環境ができたので、次はnode.jsのパッケージを管理してくれるnpmを導入します。
…と言いましたが、実はnodebrewを導入した段階で既に入っています。

こちらも確認してみましょう。

$ npm -v

gulpの導入

さて、次はsassのコンパイルをしてくれるgulpの導入です。
npmを使ってインストールします。

gulpとはタスク管理ツールです。
あらかじめタスクを登録しておくことで、ブラックボックス的に処理を実行するしてくれます。
複雑なフローをすっ飛ばしてコマンド1つで結果が得られるワケですね。素晴らしい。

gulpにはインストール方法が２種類あります。
どこでも使えるグローバルインストールとプロジェクトの中でしか使えないローカルインストールの2つです。

・グローバルインストール：どのディレクトリでもgulpが使える
・ローカルインストール：インストールしたディレクトリ内でしかgulpが使えない

という違いがあります。
「会社で後輩に教える」というシチュエーション前提なら、僕はローカルインストールを選びます。
プロジェクトごとにgulpのバージョンが全て同じとは限らないので、グローバルインストールだと思わぬところで躓く可能性が考えられるからです。

グローバルインストールのコマンドはこちら。

$ npm install -g gulp

ローカルインストールのコマンドはこちら。
ローカルインストールしたいプロジェクトにターミナル上で移動してから実行してください。

$ npm install gulp --save-dev

これでプロジェクトにgulpがインストールされました。
以下のコマンドで確認してみましょう。

gulp -v

次にgulpでsassをコンパイルさせる為のプラグインをインストールします。

npm install -D gulp gulp-sass

やった、ついにsassのコンパイルができる。
というワケではありません。
gulpはタスク管理ツールなので、タスクに「sassをコンパイルして」という処理を追加してあげる必要があります。

gulpにsassをコンパイルさせる

gulpfile.jsというファイルを作成します。
ここにsassをコンパイルする為のタスク作成していきます。
ファイルの中身は以下の通り。

//プラグインの読み込み
var gulp = require("gulp");
var sass = require("gulp-sass");


//sassのコンパイル
gulp.task("compile", function() {
  gulp.src("scss/*.scss") 　　　　　　　　　　　　　//ファイルの参照先を指定
  .pipe(sass()) 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//プラグインの実行
  .pipe(gulp.dest("css"))　　　　　　　　　　　　 //処理を行ったファイルの保存先を指定
});

これは「自動でsassをコンパイルして、指定のフォルダに出力する」という意味です。
このタスクに「compile」という名前をつけています。
つまり「gulp compile」とターミナルでコマンドを叩くだけで、勝手に上記の処理をやってくれます。
便利ですね。

これでsassのコンパイル環境が整いました。
後輩に教えると時にスムーズに教えられそうです。

追伸

株式会社エイチーム引越し侍では、一緒にサイト改善をしてくれるWebエンジニアを募集しています。エイチームグループのエンジニアとして働きたい！という方は是非、以下のリンクから応募してください。
皆様からのご応募、お待ちしております！！

エイチームグループ採用サイト（Web開発エンジニア職）