Gulpを使ってSassのコンパイルを自動化する

Gulp を使ってSCSS ファイルを CSS ファイルにコンパイルする処理を自動化したので、その方法を書き残しておきます。

＊Gulpとは

Node.js ベースで作られたタスク自動化ツールのことで、ファイルや出力方法をgulpfile.jsに記述すると複数タスクを1つのコマンドで実行することができるようになります。
例えば SASS などの CSS プリプロセッサを使うときの CSS ファイルへコンパイルする処理や、ファイルの圧縮処理をしたい場合は Gulp を使うことで自動化することができます。

＊参考

＊環境

macOS
npm 6.7.0
Node 11.14.0
gulp 4.0.2
gulp-sass 4.0.2
nodebrew 0.9.8

＊Node.jsのインストール

Gulp を使うには Node.js が必要なので、まだ入れていない場合はインストールしておきます。バージョン管理ができる nodebrew を使うと便利です。

$ brew update
$ brew install nodebrew

# バージョンの確認
$ nodebrew -v

~/.bash_profileに下記を追加して nodebrew を使えるようにします。

export PATH=$HOME/.nodebrew/current/bin:$PATH

下記コマンドを実行して設定ファイルを反映します。

$ source ~/.bash_profile

nodebrew を使って任意のバージョンの Node をインストールします。

# 使用可能なバージョンを確認
$ nodebrew ls-remote

# 指定バージョンをインストール
$ nodebrew install-binary v11.14.0

# インストールしたバージョンを確認
$ nodebrew ls

# バージョンを有効にする
$ nodebrew use v11.14.0

# バージョンの確認
$ node -v
v11.14.0

＊Gulpのインストール

npm ではローカルインストールとグローバルインストールを選択してインストールすることができます。ローカルだとそのプロジェクトのみで使用でき、グローバルだとマシンのどこにいても使用できます。

下記コマンドを実行してグローバルに Gulp をインストールします。

$ npm install gulp -g

プロジェクトディレクトリに移動し、下記コマンドを実行して Node.js 用のプロジェクトファイルpackage.jsonを作成します。いくつか質問されますがデフォルトのまま Enter または yes を押して大丈夫です。（変えたい場合は適宜変更します）

$ npm init

下記コマンドを実行してローカルに Gulp をインストールします。（短縮系のnpm i -D gulpでも同じことができます）インストールが完了すると、node_modulesディレクトリにgulpが作成されています。

$ npm install --save-dev gulp

# バージョン確認
$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2

＊Gulp-sass のインストール

今回はgulp-sassを使って Sass のコンパイルを自動化するので、gulp-sassをインストールします。

$ npm install gulp-sass --save-dev

＊gulpfile.js の作成

プロジェクトディレクトリの直下にgulpfile.jsを新規作成します。
<gulpfile.js>

const gulp = require('gulp')
const sass = require('gulp-sass')

// コンパイル対象のファイルを指定
const devDir = 'dev/'
const dev = {
  'scss': devDir + 'assets/scss/**.scss'
}

// 出力先を指定
const destDir = 'dest/'
const dest = {
  'css': destDir + 'assets/css'
}

// タスクの実行
gulp.task('sass', () => {
  return gulp.src(dev.scss)
  .pipe(sass())
  .pipe(gulp.dest(dest.css))
})

gulp.src()で対象のファイルパスを指定します。複数のタスクを入れたい場合は、.pipe() でつないでいきます。.sass() にオプションを指定してインデントや圧縮方法などを変更することもできます。ちなみに Gulp4 系では gulp.task() でタスクの指定に return を付けないと下記エラーになります。
Did you forget to signal async completion?
また、出力先のdestフォルダは作成していなくても、タスクを実行すると自動で作成してくれます。

ここまでのディレクトリ構成は下記になります。

.
├── dev
| └── assets
|     └── scss
|         └── main.scss
├── gulpfile.js
├── index.html
├── node_modules
├── package-lock.json
└── package.json

下記コマンドを実行するとdestファイルが作成され、コンパイルされた Css ファイルが作成されます。

$ gulp sass

実行後のディレクトリ構成です。

.
├── dest
| └── assets
|     └── css
|         └── main.css
├── dev
| └── assets
|     └── scss
|         └── main.scss
├── gulpfile.js
├── index.html
├── node_modules
├── package-lock.json
└── package.json

＊所感

少ないコードでタスクを自動化できました。タスクを自動化することで、複数人で開発する場合にとても役に立ちそうです。Gulp は 3系と 4系で書き方が異なるので注意が必要です。Node や npm のバージョンによっては動かなかったりすることもあるので、バージョンに意識をして使っていく必要がありそうです。

もぐもぐプログラミング