Gulpでワークフローを効率化しよう！

f:id:bobchan1915:20190226065328p:plain

動機

メモを整理していたときに、もっと簡潔に明文化したいと思って本記事を書き起こしました。

自動化の道具箱の一つでもあるので、ぜひ気になる人はご覧ください。

かなり入門的な記事になるので、これから入門される方のサポートができれば嬉しいです。

Gulp

Gulpについて解説していこうと思います。

Gulpについて

Gulpとはワークフローを向上するためのストリーミングビルディングシステム

インストール

今回はnpmを使ったインストール方法を紹介します。

開発時しか必要がないので、以下のように--save-devをつけて行います。

npm install gulp --save-dev

これでインストールができました。今後、手動で実行することも考えて、以下のスクリプトをpackage.jsonに追加しましょう。

{
     ...
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "gulp": "node_modules/.bin/gulp "
     },
     ....
}

これで

npm run gulp

と実行することができます。

設定ファイル

gulpfile.jsにタスクと呼ばれる一つの仕事単位を設定していきます。

基本的にはrequire(node_modules以下にあるファイルからimport)をして、gulpインスタンスを作って、タスクや他の仕事を定義していきます。

タスクの定義

基本的なタスクの定義は以下のようにします。

function タスク名(cb){
     ...
     cb();
}

exports.タスク名 = タスク名

gulp.task(‘タスク名’、関数)

そしてタスクはgulpコマンドで確認できます。

gulp --task

gulpを使うにはdefaultというタスクが必要になるので作成しておいてください。

defaultがない場合は

gulp sass

のように指定する必要があります。

逐次処理か並列処理か

逐次処理にしたければseries()APIを使って、並列処理にしたければparaller()APIを使います。

逐次処理は

const { series } = require('gulp');

...タスク定義

exports.default = series(clean, build);

並列処理は

const { parallel } = require('gulp');

...タスク定義

exports.build = parallel(javascript, css);

またネストをすることができて、ワークフローを自由に定義できます。

exports.build = series(
  clean,
  parallel(
    cssTranspile,
    series(jsTranspile, jsBundle)
  ),
  parallel(cssMinify, jsMinify),
  publish
);

ファイルを読み込む

gulp.srcでファイルを読み込むことができます。

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

exports.default = function() {
  return src('src/*.js')
    .pipe(dest('output/'));
}

複数のファイルを読み込みたいときは*を使ってglobで指定します。

注意点としては**とすると再帰的に処理するので、それ以下はすべてのです。

プラグインを使う

これまではファイルを読み込むだけでしたが、コンパイルしなくてはいけないときなど、あらゆるタスクに対応するプラグインが用意されているケースがほとんどです。

以下のように、プラグインをpipeとしてはストリーム処理のようにパイプで繋げていきます。引数には処理をする関数をとります。

const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function() {
  return src('src/*.js')
    // The gulp-uglify plugin won't update the filename
    .pipe(uglify())
    // So use gulp-rename to change the extension
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

どのようなpluginがあるかは、以下のページで検索をするこができます。

gulpjs.com

出力をする

以下のようにdestで出力をします。

const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(src('vendor/*.js'))
    .pipe(dest('output/'))
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

ストリームを返すreturnによって、返すことができます。そして終了を確認することができます。

ファイルの変更を監視する

gulp.watchを使って、指定したファイルに変更があればタスクを自動で実行できるようにできます。

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

function clean(cb) {
  cb();
}

function javascript(cb) {
  cb();
}

function css(cb) {
  cb();
}

watch('src/*.css', css);
watch('src/*.js', series(clean, javascript));

そして、タスクをJavascriptから呼び出すにはgulp.seriesで指定をすることができます。

まとめ

Gulpはフロントエンドをしている人に限らず、執筆段階ではデフォルトスタンダードになっています。

特に、私はGCPのCloud FuctionsでNode.jsランタイムを使っている時によく使います。あらゆる場所で使い道はあるので、ぜひ機能自体は少ないのでマスターしてみてください。

Kekeの日記

エンジニア、読書なんでも