Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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種類あります。
どこでも使えるグローバルインストールとプロジェクトの中でしか使えないローカルインストールの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開発エンジニア職)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away