Node.jsのgulp超便利！ プログラム「だけじゃない」HTMLコーディングのお供編

こんにちは。
開発チームのワイルド担当、まんだいです。

しばらく見ない間に、HTMLのコーディング周りの環境が色々と変化しているのにびっくりしている昨今です。
今日は、SASS（SCSS）の導入手順と、自動コンパイルの環境を整備するところをおさらいしたいと思います。
今回はSCSS記法そのものには触れませんが、近いうちにこちらも記事にしたいと思います。

CSSしかなかった頃から見ると、とんでもなく便利なので（今更）。

また、今回はwindows 10環境をメインに書いていきますが、Node.jsのインストール以降はやることに差はありませんので、参考にしていただけると幸いです。

 

Node.jsのインストールする

Node.jsが導入されていない環境の場合は、まずNode.jsのインストールから始めなければいけません。
と言っても、windowsの場合は、インストーラをダウンロードして実行するだけですので敷居は低いでしょう。

Node.jsのトップページにある、Download for Windows (x64)の下にあるリンクからダウンロードします。
LTS（Long Term Support）扱いの4系（2016年7月現在）の方が安定して使えますのでオススメです！

 

必要なnpmをインストールする

Node.jsに付属しているnpmを使って、必要なモジュールをインストールしていきましょう。

今回必要なモジュールは

• gulp
• gulp-sass

の2つです。

gulpというのは、所謂タスクランナーでブックマークレット作成が捗りすぎるVisual Studio Codeの使い方 | 株式会社ビヨンドでも書いてありますので合わせてどうぞ！
要は、手間が掛かる作業を自動化しようぜというためのツール、という訳で、今回はgulpにSCSSのコンパイルと所定のパスにコンパイル済みのCSSを配置するという作業を自動的にやってもらうことにします。

ここから先は、コマンドプロンプト、もしくはPowerShell上で作業を行います。

まずは、適当な場所にディレクトリを作成します。
よくやるのは、Cドライブの直下に開発用のディレクトリを作成し、その下にプロジェクト毎にディレクトリを配置するというやり方です。
今回は、Cドライブ直下にdevelopmentというディレクトリを作成し、更にその下に、sass_testというディレクトリを作成します。

mkdir development
cd development
mkdir sass_test
cd sass_test

 
最後に作ったsass_testの中に移動します。

次に、Node.jsで何かを始める際のお約束として、npm initを実行し、package.jsonを作ります。

npm init

 
色々と聞かれますが、後からでも編集は可能ですので、エンター連打で今回は構いません。

そして、gulpのインストールですが、gulpは、グローバルとローカルにそれぞれインストールする必要があるツールですので、まずはグローバルにインストールしてみます。

npm install gulp -g

 
-gオプションを付けると、グローバルにインストールされます。

さっきからグローバルグローバルと言っていますが、グローバルってどういう事かというと、

• コンソールコマンドとして動作させるのがグローバル
• プロジェクト用に作成したディレクトリ内に配置して、JSファイルから呼び出すためのインストールがローカル

という感じでしょうか。
ついでに次に出てくるローカルの説明も入れちゃいましたが、こういうニュアンスです。

そして、次にローカルへインストールします。

npm install gulp --save-dev
# --save-devオプションはpackage.jsonに記載するためのものなので、別環境でも作業する事がないなら不要

 
package.jsonという単語が出てきましたが、これはgitなどのリポジトリに置いて、別の環境でリポジトリをクローンした後、開発がすぐに始められるように、予め必要なパッケージを列挙したファイルの事です。
複数人で開発を行う場合、誰かが環境を構築し、gitで展開 → npmで一括インストールの流れで環境を整えるのがすこぶる速くなります。

続いて、gulpでsassを使うためのモジュール、gulp-sassをインストールします。

npm install gulp-sass --save-dev

 
こちらはローカルのみです。

以上で必要なモジュールは揃いました。

 

gulpfile.jsを整備する

次に、いよいよ自動でscssをcssにコンパイルする部分を作っていきます。

gulpのタスクは、設定ではなく、プログラムそのものです。

なので、ここから先は、サーバーサイドJS（といっても簡単なものですが）になります。

gulpは起動時に、まずgulpfile.jsというファイルを読み込みます。
ここから更に別のファイルを読み込んでタスクを実行していく事もできますが、今回はgulpfile.jsに全てのタスクを書いていきます。

先に今回のgulpfile.jsをさらしておきます。

var gulp = require('gulp');
var sass = require('gulp-sass');

var from = 'path/to/scss/*.scss';
var dist = 'path/to/css';
 
gulp.task('sass', function(){
    gulp.src(from)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(dist));
});

 
ソースを順に説明しますと

• 1、2行目で先ほどインストールしたgulpとgulp-sassというモジュールを読み込みます。
• 4、5行目でscssファイルの保存場所とcssの出力先を設定
• 7行目からがタスクと言われる処理の固まりの始まり。gulp.taskの第1引数は、タスク名になっています。今回は「sass」というタスク名にしました。
• 8行目でscssの保存場所を指定し、scssファイルを読み込みます。
• 9行目でSCSSをCSSにコンパイルしています。一連の処理をpipe()というメソッドでチェーンしていますので、意味合いが分かりやすいですね。
• 同じく9行目ですが、コンパイル時にエラーが発生した場合の処理を書いています。これを書かない場合、SCSSの文法エラーでgulpが停止します。エラー時の挙動を示す事で、gulpがエラーで落ちなくなります。
• 10行目は、出力先にコンパイル済みのCSSを書き込む処理になります。

説明は以上です。

実行は、以下のコマンドになります。

gulp sass

 
SCSSファイルが存在しない場合は、何も起こらず終了になります。

sass().on('error', sass.logError)が小技が効いてていいなと思います。

 

watchして、自動的にコンパイルする

先の状態でも、SCSSからCSSをコンパイルする事はできますが、SCSSを書く → コンパイルするためgulp実行 → CSS作成 という手順をやるのは辛いものがあります。
ファイルの更新を検知して、更新されたら自動的にコンパイルが実行され、CSSになっているという状況がいいですよね。

そのためのツールがgulp.watch()メソッドになります。

gulp.watch()を組み込んだバージョンがこちら。

var gulp = require('gulp');
var sass = require('gulp-sass');

var from = 'path/to/scss/*.scss';
var dist = 'path/to/css';
 
gulp.task('sass', function(){
    gulp.src(from)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(dist));
});
 
gulp.task('watch', ['sass'], function(){
    gulp.watch(from, ['sass']);
});

 
13行目以降が追加したコードになります。順に説明していきましょう。

• 13行目では、新たなタスクとしてwatchを追加しました。第2引数に配列を指定していますが、これについては後述します。
• 14行目でgulp.watch()メソッドが登場していますね。こちらは、第1引数のパス内のファイル更新を監視し、更新された場合、直ちに第2引数で指定したタスクを実行します。ここは配列なので、複数のタスクを実行することもできます。

ファイルの更新監視がこんなに簡単に実現できるなんて、夢のようですね。

追加したwatchタスクを実行する場合のコマンドは以下の通りです。

gulp watch

 
ただ、こちらのコマンドは実行が終わっても終了はしません。
ファイル監視を行って、更新があった度にsassタスクを実行しますからね。
終わってもらっちゃ困ります。

また、先ほど出ていたgulp.task()メソッドの第2引数ですが、sassタスクを定義した時の第2引数は匿名関数でした。
gulp.task()メソッドは可変個の引数を取るので、引数の数によって、指定する値が変わってきます。
2つの場合は、タスク名と処理内容を書いた匿名関数になり、3つの場合は、タスク名と匿名関数を実行する前に実行するタスクが列挙できるようになっています。
こちらもgulp.watch()メソッドと同様、配列で指定ができるので、複数のタスクを順に実行する事ができます。

タスクランナーは何もSASSのコンパイルのために存在する訳ではありません。
もしかすると、皆さんの日常業務の中でも、プログラムに限らず、必ず行っている行動を登録できれば、一手間減っていい感じになる事だってありますので、実務に限らない使い方ができるかも知れませんよ！

 
以上です。