gulpの基本的な使い方

gulpの基本的な使い方

gulpの基本的な使い方です。gulpとは「タスクランナー」と呼ばれるモジュールです。

インストールしていない場合はこちらを参考にインストールしてください。（グローバルインストールするよりnpxコマンドでインストールするのが一般的なようです）

プロジェクト直下にgulpfile.jsをtouchコマンドか何かで作成します。（空ファイル）

gulpとgulp-mochaとchaiを使えばテストの自動化をすることができます。

さらにnycを使えばカバレッジレポートを出力することもできます。

gulpfile.jsの記述方法

gulpを使うには必須のファイルとなります。

gulp.task(タスク名,function(){});

gulpfile.jsは基本的には、gulp.taskが主な記述方法になります。function内にさらにタスクを書いていったりすることができます。

以下、使用するモジュールです。

let gulp = require('gulp');
let mocha = require('gulp-mocha');
let seq = require('run-sequence');
let exec = require('child_process').exec;

run-sequenceモジュールはタスクを同期実行してくれます。

child_processはgulpファイル内で、javaやコマンドを実行したい場合に使用するモジュールです。

例えば、まずDynamoDBを起動、起動後テスト実行、テスト完了後DynamoDBを終了する、と言った感じです。

以下、記述例です。タスク内では必ずreturnします。

let gulp = require('gulp');
let gulp-mocha = require('gulp-mocha');
let seq = require('run-sequence');
let exec = require('child_process');

gulp.task('unit', function() {
  seq(
    'startup',
    'test',
    'shutdown'
  ); // startup,test,shutdownの順に同期実行してくれます
});

gulp.task('startup',function() {
  exec('java -Djava.library.path=./DynamoDBLocal_lib -jar DynamoDBLocal.jar -sharedDb -port 9999');// DynamoDB local起動
  return;
});

gulp.task('test' function() {
  return gulp.src(['./sample/**/*.*'], {read : false])
    .pipe(gulp-mocha(
      reporter : 'mochawesome',
      reporterOptions : {
        reportDir : './sample/report/',
        autoOpen : true
      }
    ))
});

gulp.task('shutdown' function() {
  exec('taskkill /im java.exe /f');// DynamoDB local起動に必要なjava.exeをtaskkillします
  return;
}

DynamoDB localはJRE6以上が必要になります。なので、シャットダウンはjava.exeのプロセスを殺すことでシャットダウンと判断しています。

gulp.src(globs[, options])

srcの引数であるglobsにはglobもしくはglobの配列を指定します。optionsにはいくつかありますが、{read : false}と言うように記述します。readオプションはfalseに設定すると、ファイルを読み込まず、nullとしてfile.contentsを返します。

参考サイト

gulp.pipe()

pipeは一つ一つコマンドを繋げてくれます。gulp.src(…).pipe(…)というように記述します。

pipeの引数にはgulp-mochaのようにsrcで取得したファイル群に対してmochaを実行するという事が可能になります。

pipe().pipe()…というようにpipeメソッドはいくつでもつなげていくことが可能です。

gulp.dest(‘出力先フォルダ’)

stylusなどのSCSSをCSSにコンパイルする場合などにgulp.dest()を使うと便利です。

const gulp = require('gulp');
const stylus = require('gulp-stylus');

gulp.task('stylus', function() {
  return gulp.src('scss/*.stylus')
    .pipe(stylus())
    .pipe(gulp.dest("css"));
});

gulpの実行方法

gulpの実行方法は簡単です。

gulp タスク名

とタイプします。上記の場合ですと

gulp unit

とタイプすれば同期実行してくれます。

nycも使う場合は以下のようにタイプするとレポート出力もしてくれます。

nyc gulp unit

gulp default

同期実行時の注意

run-sequenceモジュールは同期する際に、各タスクのfunctionでreturnをするようにします。

これで確実に同期がとれるようです。

gulp4よりrun-sequenceではなく、gulp.seriesで同様の逐次処理が可能になりました。

gulp@4.0.2インストール

2020/01/06時点ではgulpは4.0.2が最新のようです。

npxでインストールします。詳細は「npxでローカルパッケージを実行できるんです！ 」参照ください。

$ npm install -g npx
$ npm install gulp --save-dev
$ touch gulpfile.js
$ npx gulp -v
CLI version: 2.2.0
Local version: 4.0.2

実行方法はnpx gulp タスク名となります。

gulp.taskが非推奨

gulp4ではgulp.taskが非推奨になっています。

gulp4からは以下のように記述します。

function deploy() {
  // 処理
}
exports.deploy = deploy

Did you forget to signal async completion?

returnしていない場合、かつ、callbackを指定していない場合に発生するエラーです。returnを返さない処理の場合はコールバック関数で完了を知らせる必要があります。

function deploy(cb) { // cbがコールバック関数
  // 処理
  cb() // 終わりを知らせる
}

タスクの一覧

タスクの一覧を見るには、npx gulp --tasksコマンドで一覧を確認することができます。

npm i –productionを実行する

gulpでpackage.jsonを読み込んでnpm i --productionを実行することができます。--productionを指定することにより、devDependenciesのモジュールはインストールされません。

return gulp
  .src('./package.json')
  .pipe(gulp.dest('./modules')) // modulesフォルダ配下
  .pipe(
    install({ // gulp-install
      production: true
    })
  )

gulp-s3-uploadモジュールでS3にアップロードする

gulpでLambdaをS3にアップロードしたい時にgulp-s3-uploadモジュールを使用します。

以下はgulpfile.jsのタスクです。zipフォルダ配下の全てのzipファイルをS3の指定したバケットとオブジェクトキー配下にアップロードする例です。プロキシに注意しましょう。

const AWS = require('aws-sdk')
function s3upload() {
  const config = {
    accessKeyId: AWS.config.credentials.accessKeyId,
    secretAccessKey: AWS.config.credentials.secretAccessKey,
    region: 'ap-northeast-1'
  }
  const s3 = require('gulp-s3-upload')(config)
  return gulp.src(['./zip/**.zip']).pipe(
    s3({
      Bucket: `mybucket/zip`,
      ACL: 'public-read'
    })
  )
}
exports.s3upload = s3upload

ReferenceError: primordials is not defined

以下の環境で「ReferenceError: primordials is not defined」エラーが発生しました。

gulpとgulp-mochaのバージョンを以下の通りに上げると解決しました。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^