Gulpを使ってSassをコンパイルしてみよう

週一でブログを更新するという目標を立てていたのですが、年末までにあと19記事も残っているようです。つらい。
今更感ありますが、今回はgulpについて、インストールから、sassのコンパイルまで書いてみようと思います。

1.Node.jsのインストール

161027_01

まずはNode.jsをパソコンにインストールします。
2016年10月の現時点では、v6.9.1とv7.0.0とで2つありますが、もし迷ったら安定版のv6.9.1がいいかと思います。

ダウンロードできたら、ちゃんとインストールできたか確認するために、Node.jsのバージョンを出してみましょう。
ターミナルを開いてコードを叩きます。

node -v

v6.9.1 という風にバーションが返ってきたらOKです。

2.gulpをインストール

続いて、グローバルにgulpをインストールします。
gulpはターミナルでコマンドを叩いてインストールします。

npm install -g gulp-cli

Macをお使いの方で、エラーが出た!という場合

管理者権限で実行すればOK。

sudo npm install -g gulp-cli

パスワードを聞かれるのでパスワードを入力。これで、コマンドでgulpを使うことができるようになります。

すでに古いバージョンをインストールして新しくしたい場合

一度アンインストールしてから、インストールしてみてください。

npm uninstall -g gulp

コマンドの豆知識

コマンドはショートカットで短く書くことができます。
よく使いそうなのをあげるとこんなかんじ。

i: instal
r:uninstall
rm: remove
un: unlink
-g: –global
-h: –help
-v: –version
-S: –save
-D: –save-dev
-y: –yes
-n: –yes false

3.プロジェクトディレクトリを初期化

プロジェクトのファイルに対して、gulpを使えるように設定をしていきます。
まずは、プロジェクトフォルダを作成し、ターミナルで移動します。

cd プロジェクトフォルダのパス

これで、移動することができます。
例えば、デスクトップにPJファイルを置いてそこに移動したい場合は

cd Users/user-name/Desktop/PJ

という風になります。

Macでフォルダのパスをいちいち書くのが面倒だという人は…

フォルダをターミナルウインドウ内にドラック&ドロップすると、自動でパスを入力してくれます。

または、「システム環境設定」から「キーボード」内の「ショートカット」タブを開き、「フォルダに新規ターミナル」のチェックを付けるにチェックを入れます。
該当フォルダを右クリックすると「フォルダに新規ターミナル」メニューが追加されるので、そこから移動した状態でターミナルを開くことができます。

プロジェクト用に設定ファイルを作成します。

npm init

いろいろきかれますが、よくわからなければ、全部return(Yes)でOKです。
うまくいくと package.json というファイルが作成されます。

{
  "name": "pj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^2.3.2",
    "sass": "^0.5.0"
  }
}

何も設定していないとこんなかんじ。
プロジェクト名や、プラグインなどが記載されているファイルです。

4.プロジェクトフォルダにgulpをインストール

プロジェクトフォルダにgulpをインストールします。

npm install --save-dev gulp

5.プラグインをインストール

161031_04

プラグインを個別でインストールしていきます。
書き方はこんなかんじ。

npm install --save-dev (プラグイン名)

Sassがコンパイルできるよう gulp-sassをインストールしてみましょう。

npm install --save-dev gulp-sass

インストールが成功すると、プロジェクトフォルダの内に node_modules とフォルダができ、その中にインストールされます。

6.タスクを書く

161031_05

作成したプロジェクトフォルダに gulpfile.js というファイルを作成し、タスクを書いていきます。

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

//タスクの定義
gulp.task("default", function() {
	gulp.src("_scss/style.scss") //ファイルの参照先を指定
		.pipe(sass()) //プラグインの実行
		.pipe(gulp.dest("css")); //処理を行ったファイルの保存先を指定
});

書き方

require(“プラグイン名”)
gulp.task(“タスク名”, 処理)
gulp.src(“対象ファイル”) …複数ファイルの指定もできます
pipe() …処理をつなげる
gulp.dest(“保存先”) …処理を行ったファイルの保存先を指定します。

プラグインを読み込み、defaultというタスク名でsassファイルをコンパイルするタスクを登録…ということをしています。
タスク名をコマンドラインに打ち込むと、そのタスクを実行してくれるという流れです。

7.タスク実行

161031_06
コマンドを入力して処理を実行します。

gulp

これで、SassファイルがCSSファイルにコンパイルされるようになります。

サンプルではdefaultというタスクで登録してるので、gulpと入力するだけで実行してくれます。
defaultのところをhogeにすると gulp hoge という風に自分で命令文を設定することもできます。

8.watchタスクを追加

161031_07
毎回Sassファイルを手動でコンパイルするのは面倒なので、常に監視してもらい、変更されたら自動でコンパイルしてもらえるように設定します。

書き方

gulp.watch(“監視するファイル”, 処理)

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

gulp.task("default", function() {
	gulp.watch("_scss/style.scss", function(){
		gulp.src("_scss/style.scss")
			.pipe(sass())
			.pipe(gulp.dest("css"));
	})
});

これでもう一度 gulp コマンドを叩くと、常にsassファイルを監視してくれるようになります。
途中で監視を止めたい場合は、control + Cで OK。

以上!
次回以降は別のプラグインについて取り上げていきたいと思います。

Pocket