タスクランナーとは開発作業を自動化するためのツールで、2013年頃からWebのフロントエンド開発のトレンドとなっています。開発の現場では主にオープンソースのGulp(ガルプ)とGrunt(グラント)がよく使われています。本記事ではGulpとGruntの両方の導入方法とウェブ制作でよく使用するプラグインの使い方を紹介します。GulpとGruntのいずれかはすでにインストールしているとして紹介します(記事末尾で付録としてインストール方法を解説しています)。※GruntとGulpの違いを知りたい方は記事「絶対つまずかないGulp入門」を参考ください。作業用のフォルダーからリリース用のフォルダーへファイルをコピーしたい時などに複製するタスクを登録しておくと便利です。例としてsrcフォルダーに配置されたファイルをdistフォルダーに複製するというタスクを作成します。Gruntファイルの複製には「grunt-contrib-copy」というプラグインを使用します。["copy"]);};サンプルを確認するGulpGulpの場合ファイルの複製にプラグインの追加は不要です。一時的で最終的には不要なファイルやフォルダーの削除などが必要になることがあります。いった場合はファイルの削除タスクを登録すると便利です。例としてdir1フォルダーに配置しているabc.txtの削除とdir2以下のabc/codeと名前がつくファイルを削除します。dir2フォルダーのabc.jsは削除対象から外すというタスクを作成します。GruntGruntの場合、ファイルの削除には「grunt-contrib-clean」を使用します。パス名の前に「!」使用することで否定の意味をもたせます。ここでは削除をしないという意味になります。["clean"]);};サンプルを確認するGulpGulpの場合ファイルの削除には、「del」というプラグインを使用します。パス名の前に「!」使用することで否定の意味をもたせます。ここでは削除をしないという意味になります。gulp.task("clean"));サンプルを確認するファイルの移動さまざまなタスクを組み合わせた結果、中間ファイルを作成後にリリースファイルへ移動したいときがあります。ここではその場合のタスクについて紹介します。例として、cache.txtをdist/hello.mdへ移動させてみます。GruntGruntでのファイルの移動には「grunt-contrib-rename」を使用します。移動先のフォルダーが作成されていない場合はエラーが発生してしまうため注意してください。["rename"]);};サンプルを確認するGulpGulpでファイル名を変更して出力する場合は「gulp-rename」を使用します。このプラグインを使用しても元ファイルは削除されず残るため、必要があれば前述で紹介した「del」プラグインを使用して元ファイルの削除を行います。複数のファイル結合することで、ページ読み込み時のファイルのリクエスト数を減らすことができるため、時間短縮に効果的です。ghi.cssファイル結合し、dist/css/style.cssとして書き出します。GruntGruntでのファイルの結合には「grunt-contrib-concat」を使用します。["concat"]);};サンプルを確認するGulpGulpでのファイルの結合には「gulp-concat」を使用します。gulp.task("concat"));サンプルを確認するファイルの監視ファイルを監視して、あるファイルに変更があったときに自動でタスクを実行するといった動作が可能です。コンパイルが必要なタスクを登録することでバックグラウンドで自動でコンパイルが終わっているといった自動処理ができます。changed");」を呼び出すタスクを作成します。GruntGruntの場合、ファイルの監視をするときに「grunt-contrib-watch」プラグインを使用します。["watch"]);};サンプルを確認するGulpGulpの場合、ファイルの監視をするときにwatch()関数を使用します。gulp.task("watch"));サンプルを確認するGruntでもGulpでも共通ですが、監視を開始するとその時点からコマンドラインの通常のキー入力受付が行われなくなります。監視を停止するにCtrl+Cとキー入力を行う必要があります。監視を継続したまま別のコマンドを入力する場合は新しくコマンドラインのウィンドウを開く必要があります。JavaScriptファイルのminifyJavaScriptファイルの容量を小さくするために改行やインデントを除去する作業を「minify」(ミニファイ)といいます。JSライブラリで●●●.min.jsというファイル名でminifyが適用されたJSファイルが提供されていることがありますが、ページ読み込み時の時間短縮にminifyは効果的です。minifyはタスクランナーに登録できます。GruntJavaScriptファイルの圧縮や整形などには「grunt-contrib-uglify」を使用します。["uglify"]);};サンプルを確認するGulpGulpのJavaScriptファイルの圧縮や整形などには「gulp-uglify」を使用します。画像ファイルの最適化を行うことで、画像の劣化をできるだけ抑えたままファイルの容量を減らすことができます。画像の最適化はページ読み込み時の時間短縮に効果的です。例として、imagesフォルダーに配置されたpng画像を最適化を行ってからdist/imagesフォルダーにファイルを配置するタスクを作成します。Grunt画像の圧縮には「grunt-contrib-imagemin」を使用します。["imagemin"]);};サンプルを確認するGulp画像の圧縮には「gulp-imagemin」というプラグインを使用します。gulp.task("imagemin"));サンプルを確認するTypeScriptのコンパイルTypeScriptはクラスやアロー関数式、型注釈や型推論などの機能を搭載したプログラミング言語で、JavaScriptファイルへ変換する事ができます。JavaScriptの開発で高度な言語機能を利用したい時にTypeScriptが役立ちます。このTypeScriptのコンパイル処理もタスクランナーに登録できます。例としてtsフォルダーに配置しているTypeScriptファイルをJavaScriptへコンパイルし、jsフォルダーへ書き出すというタスクを作成します。GruntTypeScriptのコンパイルには「grunt-typescript」を使用します。["typescript"]);};サンプルを確認するGulpTypeScriptのコンパイルには「gulp-typescript」を使用します。.pipe(gulp.dest("js")));サンプルを確認するSassのコンパイルSassとはCSSのプリプロセッサーで、高機能な書式を使ってスタイルシートをCSSを使うよりも効率よく記述できます。Sassはプリプロセッサーであるためコンパイルが必要となりますが、そのコンパイル処理をタスクランナーに登録できます。例として、sassフォルダー以下にあるscssファイルをcssフォルダーにコンパイルして書き出すタスクを作成します。GruntSaaSのコンパイルには「grunt-contrib-sass」を使用します。["sass"]);};サンプルを確認する※GruntでSassをコンパイルするにはプラグインのインストールの他にSass本体のインストールが必要です。GulpSassのコンパイルには「gulp-sass」を使用します。.pipe(gulp.dest("css")));サンプルを確認する終わりにウェブ開発で利用されることの多いファイル操作を中心に紹介しました。1つ一つのタスクは5分もかからず作成できますので、みなさんもぜひタスクランナーの便利さに触れてみてください。Grunt・Gulpと始めるBrowserSync入門」でWebサイト制作時に役立つ方法を説明していますのであわせてご覧ください。Manager(npm)」が必要となり、「Node.js」をインストールすることでnpmコマンドが使用可能となります。本記事ではすでにnpmコマンドは実行可能なものとして話をすすめていきます。実行したいフォルダーで設定ファイルを用意します。以下のコマンドを実行すると、プロジェクトの設定情報が記述されたpackage.jsonが生成されます。途中で、プロジェクト名や著作権の設定をどうするかという入力を求められますが、設定が不要ならばすべてYes(Enterキー)で構いません。Gruntの核部分をインストールコマンドライン(Windowsではコマンドプロンプト、macOSではターミナル。app)を立ち上げ、以下のコマンドを実行します。成功するとGruntの核となる部分をインストールできます。grunt-cli」と、sudoコマンドを使用して管理者権限で試してみてください。(OSXのログインパスワードの入力が必要です。プロジェクト別にGruntをインストールプロジェクトフォルダー内にGruntをインストールします。instal」コマンドを実行します。成功すると「node_modules」フォルダーが作成され、Gruntの実行環境がインストールされます。installに「save-dev」というオプションを設定することで、package.jsonにプラグインのバージョン情報が保存されます。Gruntタスクを実行するプラグインをインストールするGruntでタスクを実行するには、Grunt本体とは別にプラグインをインストールすると便利です。ここでは例としてファイルをコピーするタスクを作成するためのプラグインをインストールします。下記のコマンドで、「grunt-contrib-copy」プラグインをインストールできます。gruntfile.jsの記述Gruntのタスクはgruntfile.jsに記述を行います。gruntfile.jsの記述は下記の形となります。initConfig()関数内にJSON形式で記述します。個別に必要なプラグインはloadNpmTasks()関数で読み込みを行います。grunt.registerTask()関数を使うと、タスクを組み合わせて登録することができます。独自タスクの登録を行います。最初の引数を"default"とすると、コマンドライン上で引数無しで実行できます。第2引数の配列にinitConfig()関数で設定したタスクを登録します。プロジェクト別にGulpをインストール(コマンドライン)プロジェクトフォルダー内にGulpをインストールします。instal」コマンドを実行します。成功すると「node_modules」フォルダーが作成され、Gulpの実行環境がインストールされます。installに「–save-dev」もしくは「-D」(省略名)というオプションを設定することで、package.jsonにプラグインのバージョン情報が保存されます。記述例(gulpfile.js)Gulpはgulpfile.jsに記述を行います。タスクはgulp.task()関数内にpipe()関数でメソッドチェーン形式で記述します。必要なプラグインはrequire()関数で読み込みを行います。ファイルの読み込みを行うフォルダーやファイルなどを指定します。実行(コマンドライン)gulp.task()関数で登録したタスクを実行します。gulp以上がGruntとGulpのインストール手順となります。平成30年12月12日に内容をメンテナンスしています。のぞみインタラクティブデベロッパー。好きな生き物はハムスター、好きな食べ物は豚汁です。ツールは使うより作りたい派。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。