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;

view raw
gistfile1.txt
hosted with ❤ by GitHub

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;
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

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"));
});

view raw
gistfile1.txt
hosted with ❤ by GitHub

gulpの実行方法

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

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

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

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

gulp.taskが非推奨

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

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

Did you forget to signal async completion?

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

タスクの一覧

タスクの一覧を見るには、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
})
)

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA