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エンジニアを募集しています。エイチームグループのエンジニアとして働きたい！という方は是非、以下のリンクから応募してください。
皆様からのご応募、お待ちしております！！