【Gulpで作る開発環境】タスクを自動化する【第一回】

Gulpで構築するフロントエンドのタスク自動化環境

皆さんは、タスクランナーとかビルドツールという言葉を聞いたことはありますか？
画像の圧縮・SassやLESSのコンパイル・簡易ローカルサーバの立ち上げ・FTPアップロード・スプライト画像の生成など、Web制作の一連の作業を自動化するツールの事です。

フロントエンド開発は複雑化する一方です。やっと学び終えた頃にはすでにその技術は古くなり、次の技術に移行しているという事もままあります。そこで極力ルーチンワークの作業時間を減らし、クリエイティブな作業時間に当てていく事が効率化を図る上で大切になってきます。

三回にわたり、フロントエンド開発のタスク自動化ツールの中でも定番になりつつかるGulpの導入方法を紹介して行きます。
第一回の今回は、Node.jsとnpmを導入し、Gulpでフロントエンド開発環境を整えるところまでを説明していきます。

Gulpとは

gulpサイトに行ってみますとTOPページに「Automate and enhance your workflow」と書いてあります。直訳の通り「ワークフローの自動化と強化」をしてくれるツールです。

タクス自動化ツールにはGruntがありますが、Gulpが発表される前はかなり使われていました。今でもGulpとシェアを二分しています。
この二つの主な違いは、ファイルを毎回書き出す必要があるGruntに対してGulpは中間ファイルを生成しないでストリーミングで処理を行います。このためGulpの方が処理速度が俄然早いのです。

GulpはNode.jpベースで動いている

タスク自動化ツールには、Rubyベースの物とNode.jsベースの物があります。
Gruntもgulpと同様にNode.jsを使用したビルドツール(タスクランナー)です。Gulpを動かすためにはまずNode.jsが必要です。

コマンドラインを使いこなす

ここからはコマンドラインを使用していきます。
コマンドラインとはコンピュータへの命令を、キーボードからコマンドと呼ばれる文字列を入力することによって行う入力方法のことです。Windowsではコマンドプロンプト、Macではターミナルというコマンドラインを書くためのアプリケーションがバンドルされています。

まずは、Node.jsのバージョンを調べてみましょう。

Windowsでコマンドプロンプトを立ち上げると以下のような文字列が、

C:¥User¥ユーザーの名前>
[/js]

Macのターミナルを立ち上げると、以下のような文字列が、

出てくると思います。
Windowsでは>に続いて、Macでは$に続いて次の文字列を打ってみてください。

インストールされている場合は、下記の様にヴァージョンが表示されます。

続きまして

と打ってみましょう。npmとはNode.jsをベースに動いているJavaScriptライブラリの配布・管理を行っているパッケージです。Node.jsをインストールする時に一緒にインストールされます。

npmがインストールされている場合は

とバージョンが表示されます。

Node.jsのインストール

すでにNode.jsがインストールされている場合は、ヴァージョンをチェックし、最新の物にアップデートしておきます。（Gulpには最新のNode.jsでしか作動しない優れた機能があるため）
インストールされていない場合は以下のサイトからダウンロードしてインストールしましょう。
→https://nodejs.org/ja/

再び

続きまして

とコマンドラインで打ちますと最新バージョンが表示されるはずです。

バージョンアップができない場合

Node.jsを使用しているアプリですでに予約されていてバージョンアップができない場合は、nvmというNode.jsのバージョン管理システムを導入しましょう。
nvmはこちらのGitより入手可能です。
→https://github.com/creationix/nvm

Gulpのインストール

最新版のNode.jsとnpmがインストールできましたら、いよいよGulp.jsをインストールしていきましょう。
まずGulpの開発環境を整えるディレクトリを任意の場所に作ります。
仮にディレクトリ名をProjectとします。
この中にネット上に構築するファイル構成を同じ環境を構築していきます。

こんな構成を準備します。

必要なパッケージを呼び出すpackage.json

npmを使い、タスクに必要なパッケージが記載されたファイルをコマンドラインを使って生成します。
コマンドプロンンプトまたはターミナルで、ディレクトリをProjectにチェンジします。

Windowsでは初期設定はこうなっています。
[js] C:¥User¥ユーザーの名前>
[/js] WindowsでディレクトリをProjectフォルダに変更するには、
[js] C:¥User¥ユーザーの名前>
[/js] に続いて
cd半スペProjectまでのパスを打ち込みます。(下記参照)
[js] C:¥User¥ユーザーの名前>cd ¥ユーザーの名前¥……省略……¥Project
[/js] enterキーを押すと下記のようにディレクトリがチェンジします。
[js] C:¥User¥ユーザーの名前¥……省略……¥Project
[/js]

Macでは初期設定はこうなっています。
[js] MacBook-Air-2:~ ユーザーの名前$
[/js] MacでディレクトリをProjectフォルダに変更するには、
[js] MacBook-Air-2:~ ユーザーの名前$
[/js] に続いて
[js] cd /Users/ユーザー名/……省略……/Project
[/js] とcdに続いてProjectまでのパスを打ち込みます。
returnキーを押すと下記のようにディレクトリがチェンジします。
[js] MacBook-Air-2:~ ユーザーの名前$ cd /Users/ユーザー名/……省略……/project
[/js]

package.jsonと置くディレクトリに現在位置が変更されました。
コマンドラインで下記のように打ってみましょう。（Windows Mac　共通です）

npmのインストール

コマンドラインに以下の様に打ちます。
[js] npm install -D gulp
[/js] -Dはディレクトリにインストールという意味です。
Gulpがインストールされているか確認するためにバージョンを確認しましょう。

コマンドラインで以下の様に打ちます。
[js] gulp -v
[/js]

タスク自動化を定義するファイル

Project直下に、Gulpで自動化するタスクを定義するためにgulpfile.jsを置きます。
gulpfile.js ファイルには、Gulp.js が実行するタスクを書いていきます。

テキストエディタを使って、projectフォルダの直下に、gulpfile.js という名前のファイルを保存します。
今回は簡単に Hello Gulp! を表示させるタスクをJavaScriptで書いてみましょう。

gulp.task(‘default’, function() { // default に登録
console.log(“Hello Gulp!”); // Hello Gulp!と表示
});
[/js]

ここまでのファイル構成

この様なファイル構成ができました。
[js] Project
├index.html
├images
│└xxx.jpg
│└xxx.png
├js
│└Jquery.js
├css
│└style.css
├sass
│└style.scss
├config.rb
├gulpfile.js
├package.json

うまくいきましたか？　【Gulpで作る開発環境】の詳しい実装の仕方は、
12月23日と1月13日にスクーにてSublimeTextとGulpで作るフロントエンド開発環境構築授業として全6回でお届けいたします。
授業の最後には、12月1日オープンの上野校の案内もあります。

【Gulpで作る開発環境】自動化タスクを作ってみよう【第二回】は11月21日配信予定です。
スクーの授業詳細もアナウンスできると思います。
お楽しみに！