近年のウェブサイト制作では煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールが注目されています。この記事では、ウェブ制作者に必須のタスクランナーGulp.jsガルプの導入手順を解説します。

導入は簡単で、本記事の手順であれば無料で5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します

この記事で学べること
・イマドキのGulpの導入手順
Sassサスの導入手順

GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では2018年現在もっとも現場で使われている方法を紹介します。

SassはRubyルビーでインストールする手順で解説しているサイトが未だに多いですが、2017年現在、その手順で使っている人は少数です。Node.jsノード・ジェイエスとGulpでSassをインストールして使うのが一般的です。Node.jsを使う方法であれば、WindowsでもmacOSでも同じ手順でインストールできるといった利点があります。

作業を自動化できるタスクランナーとは?

ウェブ制作における様々な処理を「タスク」という単位で扱い、このタスクを自動化するツールのことを「タスクランナー」と呼びます。一般的にウェブ制作の現場では、Sassサスを編集すればコンパイルを実行し、画像を編集すれば画像を圧縮するというように多くの手間がかかります

タスクランナーを使うとこのようなウェブ制作での煩雑な処理が全て自動で行われるため、開発の工数の短縮につながります。また、一度定義したタスクやインストールしたプラグインを開発者間で共有でき、チーム内で一定の品質を保った開発ができるようになります。

Gulpのメリットは簡易な記述と高速な処理

タスクランナーはGulpだけでなくGruntグラントというツールもあります。どちらもNode.jsノード・ジェイエスをベースに作られたタスクランナーです。どちらが優れているというわけではありませんが、GulpはGruntに比べていくつか使いやすい点があります

例えば、GruntではJSONジェイソン形式で独特の記述方法であるのに対し、GulpはJavaScriptで記述可能です。また、Gruntでは基本的に同期処理であるためタスクは一つずつ実行されますが、Gulpでは基本的に非同期処理なのでタスクが高速に処理できます。

Gulpの導入は5分でできる

Node.jsとGulpをインストールしましょう。コマンドライン(Windowsでは「コマンドプロンプト」、macOSでは「ターミナル」)を使う場面がありますが、コピペだけで簡単にインストールできます。基本的にWindows、macOS共通の方法で導入可能です。ページの最後に導入手順の動画も掲載してありますので、あわせてご参照ください。

1. Node.jsをインストール

Gulpを使うためにはNode.jsが必要なので、公式サイトよりNode.jsのインストーラーをダウンロードします。ダウンロードページには「推奨版」と「最新版」の2つがありますが、いろいろと便利なので「最新版」をダウンロードください。ダウンロードしたら手順にしたがってインストールします。

※Node.jsの最新版(npm v5.2以上)だと、npxというコマンドが使えます。npxコマンドを使うと、Gulpを少ない手順で使えるようになります。

2. コマンドラインを起動しよう

Windowsにはコマンドプロンプトがインストールされています。起動方法は、ファイル名を指定して実行 Windowsキーを押しながらRキーを押すと、「ファイル名を指定して実行」ウィンドウが表示されます。 名前欄にcmdを入力し、[OK]をクリックします。 すると、「コマンドプロンプト」ウィンドウが起動します。

macOSには「ターミナル.app」というソフトウェアがもともとインストールされています。[アプリケーション]フォルダー→[ユーティリティ]フォルダーに移動し、[ターミナル]を起動します。

コマンドラインを起動したらnode -vと実行し、Nodeのバージョンが表示されていることを確認します。これでNode.jsのインストールは成功です。

※ WindowsにてNodeのバージョンが表示されていない場合は、コマンドプロンプトを再起動ください。

3. package.jsonファイルの作成

Webサイトのファイル一式が保存されるフォルダー(以下、プロジェクトフォルダーと呼びます)を任意の場所に作成し、コマンドラインでその場所に移動します。今回は、myprojectというフォルダーを使う前提で解説します。

Windowsでのフォルダーの移動のコマンド

cd C:¥Users¥★★★¥myproject

macOSでのフォルダーの移動のコマンド

cd /Users/★★★/myproject

cdとはチェンジ・ディレクトリーの略で、フォルダーの階層を移動するコマンドです。cdの後ろに半角スペースを入力ください。また、★★★の部分はOSのユーザー名を入力ください。完了したら、Enterキーを押します。これでターミナルでフォルダーを移動できました。

次のコマンドを実行すると、プロジェクトの設定情報が記述されたpackage.jsonファイルが生成されます。

▼コマンドライン

npm init -y

package.jsonファイルの中身は次のようになっています。

次のページでGulpをインストールする手順を解説します。