Gulpでフロントエンド開発を自動化してラクをする

効率的にコーディングをするためのnpmパッケージはたくさんありますが、 何かを変更するたびに毎回コマンドを実行しないといけないのは面倒です。 ここでは、変更を検知してコマンドを自動的に実行できるGulpと、実行するタスク（gulp-sass, gulp-pug, gulp-babel）を作っていきます。

効率的にコーディングをするためのnpmパッケージはたくさんありますが、 何かを変更するたびに毎回コマンドを実行しないといけないのは面倒です。 ここでは、変更を検知してコマンドを自動的に実行できるGulpと、実行するタスク（gulp-sass, gulp-pug, gulp-babel）を作っていきます。

Gulpによる自動化

タスクランナーとは

フロントエンド開発においFて、SassからCSSへの変換、テンプレートからHTMLへの変換、画像の圧縮など様々なタスクがあります。 これらを、自動的に実行してくれるのがタスクランナーです。 タスクランナーにはGrunt, Gulpなどがありますが、ここではGulpを導入します。

Gulpの導入

Gulpはnpmパッケージなので、npmコマンドでインストールします。プロジェクトのルートディレクトリで以下を実行します。

npm install gulp gulp-cli --save-dev

まずは、SassをCSSに変換するタスクを定義するために、以下のパッケージをインストールします。

npm install sass gulp-sass --save-dev

gulpfile.jsの作成

Gulpで実行したいタスクは、gulpfile.jsというファイルに記述していきます。 プロジェクトのルートディレクトリに、gulpfile.jsを用意します。

const { src, dest } = require('gulp');
const gulpSass = require('gulp-sass');

function taskSass() {
  return src('sass/**/*.scss')
    .pipe(gulpSass())
    .pipe(dest('css/'))
}

exports.sass = taskSass

gulpfile.jsはNode.jsで記述します。
1行目は、gulpパッケージからメソッド（ここではsrcとdest）を呼び出しています。 srcメソッドは、プロジェクトから指定したパスにマッチするファイルを読み込みます。destメソッドは、指定したディレクトリに処理したものを出力します。

4〜8行目は、Sassを変換するタスク（taskSass）です。戻り値にgulpのメソッドストリームを指定します。 sassディレクトリ配下にあるすべてのscss拡張子ファイルを、sassコマンドを通してcssディレクトリに出力するというタスクです。

10行目で、呼びされる際のデフォルトのメソッド（ここではtaskSass）を指定しています。

exports.sassに指定したメソッドは、以下のコマンドで実行できます。 正常に実行されると、以下のようなメッセージが出力されます。

gulp sass
// 以下のような内容が出力される
[08:34:56] Using gulpfile ~/Projects/someProject/gulpfile.js
[08:34:56] Starting 'sass'...
[08:34:56] Finished 'sass' after 1.6 ms

複数タスクを同時に実行させる

別のタスクを用意して、複数のタスクを実行させましょう。 テンプレートエンジンであるPugをHTMLに変換し、さらにインデントをきれいにするタスクを登録します。

const { src, dest, series, parallel } = require('gulp');
const gulpSass = require('gulp-sass');
const gulpPug = require('gulp-pug-3');
const gulpBeautify = require('gulp-beautify');

function taskSass() {
  return src('sass/**/*.scss')
    .pipe(gulpSass())
    .pipe(dest('css/'))
}

function taskPug() {
  return src('resource/pug/**/*.pug')
    .pipe(gulpPug())
    .pipe(gulpBeautify.html({ indent_size: 2 }))
    .pipe(dest('public/'))
}

exports.default = parallel(taskSass, taskPug)

exports.defaultに指定しているのは、taskSassとtaskPugを並列(pararell)に実行するというものです。 1行目、gulpからseriesメソッドとparallelメソッドを呼び出していることに注意してください。 タスクを直列(series)、または並列(parallel)に実行することができます。series,parallelは更に入れ子にすることもできます。

gulpタスクを実行します。

gulp default
//または以下（defaultは省略できる）
gulp

// 以下のような内容が出力される
[08:58:59] Using gulpfile ~/Projects/someProject/gulpfile.js
[08:58:59] Starting 'default'...
[08:58:59] Starting 'taskPug'...
[08:58:59] Starting 'taskSass'...
[08:58:59] Finished 'taskSass' after 72 ms
[08:58:59] Finished 'taskPug' after 79 ms
[08:58:59] Finished 'default' after 81 ms

ファイルの変更を監視して自動実行(watch)

タスクを実行してファイルを変換することはできました。ですが、それでも毎回gulpコマンドを叩かなければなりません。 そこで、ユーザの変更を監視して自動的にタスクを実行できる機能を利用します。
gulpパッケージからwatchメソッドを追加で読み込みます。

const { src, dest, series, parallel, watch } = require('gulp');

// ...(省略)

exports.watch = function() {
    watch('sass/**/*.scss', taskSass);
    watch('pug/**/*.pug', taskPug);
}

gulp watchコマンドを実行すると、監視している状態になります。

gulp watch

// 以下のような内容が出力される
[09:03:04] Using gulpfile ~/Projects/someProject/gulpfile.js
[09:03:04] Starting 'watch'...

ためしにsassファイルを編集してみます。すると自動的にtaskSassタスクが実行されることがわかります。

[09:03:04] Using gulpfile ~/Projects/someProject/gulpfile.js
[09:03:04] Starting 'watch'...
[09:03:19] Starting 'taskSass'...
[09:03:19] Finished 'taskSass' after 373 ms

プロジェクトの起動時に一度gulp watchコマンドを実行しておけば、あとはwatchメソッドで監視対象にしておいたファイルを編集するたびに 自動的にGulpのタスクが実行されます。SassをいちいちCSSに変換する手間から開放されます。

その他タスク

Webpack

Webpackはモジュールバンドラーというもので、アプリケーションで読み込むJavaScriptなどのファイル群をまとめて出力してくれるものです。 Javascriptのモジュールは互いに依存しあっていることが多いため、その関係を考慮しながら順番に読み込むのは大変です。 Webpackはその依存関係も含めて一つのファイルにまとめる（バンドル）することができます。 任意の形式のファイルに対して特定のタスクを実行して出力する事ができるので、タスクランナーのような使い方もできます。

Browserify

npmパッケージ化されているライブラリを、requireメソッドを呼ぶことによりブラウザ向けJavaScript内で利用できます。 node_modulesディレクトリの中からわざわざライブラリを探してパスを指定しなくて済みます。

npm install browserify --save-dev

Babel

JavaScriptでは、ES2015から新しい書き方も導入されました。しかし、IEなどのブラウザではES2015に対応していません。 またJavaScriptには、TypeScriptやDart、CoffeeScriptなど様々な拡張言語(AltJS)があります。 これらはブラウザで処理できないので、処理できるようなJavaScriptに変換してあげる必要があります。
以下はES2015以降の記法をブラウザ向けに変換させる場合です。preset-envというプリセットを適用しています TypeScript変換用のpreset-typescript、React変換用のpreset-reactなども存在します。

const taskBabel = () => {
    return src("resource/es2015/**/*.js")
      .pipe(babel({
        presets: ["@babel/preset-env"]
      }))
      .pipe(dest("public/js/"))
    }

また、Babelの設定を.babelrcというファイルに書くこともできます。 Babelの実行時に、存在する.babelrcを自動的に読み込んでくれるようになります。

{
  "presets": ["@babel/preset-env"]
}

BrowserSync

gulp watchで自動的に変更しても、反映を確認するためにはブラウザをリロードする必要があります。 このリロードを自動的に行なってくれるBrowserSyncというものがあります。

const sync = require('browser-sync').create();

.. （省略）

function taskBrowserSync(cb) {
  sync.reload();
  cb();
}
exports.watch = function () {
  sync.init({
    server: 'public/'
  });
  watch('resource/sass/**/*.scss', series(taskSass, taskBrowserSync));
  watch('resource/pug/**/*.pug', series(taskPug, taskBrowserSync));
}