Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

JavaScriptタスク自動化ツールgulpのAPI説明と実践的な利用例

HTML/JavaScript開発作業を効率化する便利ツールの活用 第6回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では主にHTML/JavaScript開発作業を効率化する様々なツールやライブラリを紹介します。前回は様々なタスクを実行する自動化ツールgulpの基本的な利用法を説明しましたが、今回は前回紹介しきれなかったgulpの機能や利用例を、サンプルを交えて説明していきます。

目次

はじめに

 gulpはHTML/JavaScript開発環境向けのタスク自動実行ツールです。類似のツールとしてGruntが存在しますが、gulpは複数の処理を一連のストリームとして処理できる「ストリーミングビルドシステム」であるなど、Gruntにはない特徴を備えています。

 前回記事ではgulpの基本的な特徴を説明し、JavaScriptの最小化を自動的に行う例を紹介しました。本記事ではgulpのAPIをより詳しく説明するとともに、変更監視により自動的にタスクを実行する方法や前回紹介できなかったプラグインの利用法のサンプルを紹介します。またgulpとGruntを比較して、それぞれが向く利用シーンを考察します。

対象読者

  • 余計な作業はやらずにプログラミングに集中したい方
  • いつも同じような作業をやっていると感じている方
  • gulpとGrunt、どちらを使うべきか悩むことが多い方

必要な環境の準備

 gulpの実行にはNode.jsが必要になります。公式サイトからダウンロードしてインストールしてください。gulpのインストール方法については前回記事を参照してください。

 今回は以下の環境で動作を確認しています。

  • Windows 7 64bit版
  • Node.js v5.4.1 64bit版
  • gulp v3.9.0
  • Internet Explorer 11

より深く理解するgulpのAPI

 gulpを利用するには設定ファイルgulpfile.jsにタスクの内容を記述します。前回記事で記述方法を説明しましたが、実はこの記述の中ではgulpが提供するAPIを利用しています。以下ではgulpのAPIをより詳細に説明します。

gulpオブジェクトの取得

 まず下準備として、requireメソッドでリスト1のようにgulpの機能を含むJavaScriptオブジェクトを取得します。以下で説明するgulpのAPIはすべて、JavaScriptオブジェクトのメソッドとして提供されます。

リスト1 gulpオブジェクトの取得
var gulp = require("gulp");

個々のタスク処理を表すtask

 gulpに実行させるタスクを定義するにはgulpのtaskメソッドを利用します。メソッドの第1引数はタスクの名前、第2引数はタスクの内容をJavaScriptの関数で記述します。

リスト2 taskメソッドによるタスク記述
gulp.task("default", function() {
    console.log("default task");
});

 リスト2の例では、console.logメソッドでログ出力する処理をタスク名「default」で設定しています。なおタスク名がdefaultのタスクは、gulpコマンドでタスク名を指定しないときに自動的に実行されます。

 タスクには、自分が依存する別のタスクを配列で指定できます。例をリスト3に示します。

リスト3 依存タスクを指定したタスク記述
gulp.task("default", ["task1", "task2"], function() {
    /* 何らかの処理 */
});

gulp.task("task1", function(){ /*何らかの処理*/ });
gulp.task("task2", function(){ /*何らかの処理*/ });

 リスト3では、defaultタスクを実行するとまず第2引数で指定された別のタスクtask1、task2が非同期で(並列に)実行され、両方が完了した後に自身のタスクが実行されます。

 また記述を変更してリスト4のようにすると、defaultがtask2に、task2がtask1に依存するため、defaultタスクを実行するとtask1→task2→defaultの順で直列にタスクが実行されます。

リスト4 依存タスクを指定してタスクを直列に実行する例
gulp.task("default", ["task2"], function() {
    /* 何らかの処理 */
});

gulp.task("task1", function(){ /*何らかの処理*/ });
gulp.task("task2", ["task1"], function(){ /*何らかの処理*/ });

 タスク処理内容を表すJavaScript関数を省略することもできます。リスト5のdefaultタスクは単に別のタスクtask1、task2を非同期で実行します。

リスト5 依存タスクだけを指定したタスク記述
gulp.task("default", ["task1", "task2"]);

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:HTML/JavaScript開発作業を効率化する便利ツールの活用

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5