2015.2.28

gulp導入でWeb開発環境の自動化 便利なgulp.jsの導入方法

gulp

gulp(ガルプ)導入で開発環境の高速化

web制作では昨今欠かせないタスクランナーの1つ「gulp.js」(以下、gulp)を導入しました。

ビルドツールではGruntが人気で、ずっと導入しようと思っていたけど、いつの間にか「今ならgulp.jsでしょ」みたいな流れになってきていたので、gulpを導入してみることにしました。

gulpとは?

まずはじめにgulpについてですが、こちらは基本的にはGruntと同じ、「Node.js」で開発されているタスクランナーの1つです。

nodejs
(画像はNode.jsサイトの画面です。)

主にSass/CompassやLess、CSS/JS圧縮、画像圧縮などのタスクを自動で行ってくれるビルドツールです。

最近、制作現場ではコンパイルを必要とするケースはとても一般的です。
ですが、例えばSassを編集する度にコンパイルを実行したりとか、画像編集する度に結合圧縮したりなど、一つひとつのコマンドを手作業で実行するのは少し面倒です。

gulpはそんな面倒くさがりでも、さらに楽ができるものになっています。

(楽をしていると言うと語弊がありますが、手作業の時間を限りなく削り効率化させることは、より他の工程に割く時間を生むので当然のことですよね。)

gulpはGruntとできることはほとんど同じだと言われていますが、Gruntに比べつかいやすい点がいくつかあると言われています。

(例:GruntはJSON形式の記述方法で少し扱いづらいイメージがあるのに対し、gulpはJavascriptで記述可のため、デザイナーでも扱いやすい。また、Gruntは基本は同期処理であるのに対し、gulpは非同期処理のため処理時間を短縮できる。)

gulp導入方法

まずはじめに、GruntもgulpもNode.jsをベースに開発されているため、Node.js本体のインストールが必要となります。作業環境にNode.jsがインストールされていない場合は、まずNode.jsをインストールしてください。

1、Node.jsをインストールする

Node.js公式サイト

Node_js

まずは公式サイトよりNode.jsのインストーラーをダウンロードして手順に従いインストールしてください。
ちゃんとインストールされたかどうかの確認は、コマンドラインでNode.jsのバージョン表示で確認してください。

2、gulpをインストールする

Node.jsのインストールが完了したら、次にgulpをnpmからインストールします。

以下を、コマンドラインに入力しインストールしてください。

npm install -g gulp

※Mac環境でインストール中にエラーが発生する場合は先頭にsudoを付け足し管理者権限で実行してください。また、npmのバージョンが古いとこれもインストール中にエラーになるらしいので、事前にnpmのバージョンもアップデートしておきましょう。「sudo npm install -g npm」

ローカル環境でもインストールしておく

Node.jsでは、-gオプションを付与せずインストールすると、グローバル環境ではなくローカルのフォルダ内にモジュールが保存されます。そのためローカル環境のプロジェクトフォルダ以下でも使えるようにしたいため、ローカル環境にもgulpをインストールしておく必要があります。そのためには以下のようにコマンドを入力しインストールします。

npm install gulp --save-dev
参考サイト

3、package.jsonを作成する

こちらは基本的なNode.jsの使い方として、プロジェクトに必要な設定はあらかじめpackage.jsonというファイルに記述します。

package.jsonファイルの作成は以下の通りです。

まずプロジェクトのルートフォルダにコマンドラインで移動します。

Macの場合

cd /Users/ユーザー名/プロジェクトフォルダ名

Windowsの場合

cd C:¥Users¥ユーザー名¥プロジェクトフォルダ名

ルートフォルダに移動したら、以下のコマンドを実行します。

npm init

そうすると、プロジェクトの設定情報について以下のようにいろいろ聞かれますので、適当に記述します。
特筆することがなければ、とりあえずすべてそのままで構いません。

name:プロジェクト名
version: プロジェクトバージョン
description:プロジェクト説明
git repository: gitなどのバージョン管理システムの情報
keywords: npmで公開時に使用されるらしいキーワード
author: 作者情報
license: ライセンス(BSDやMITなど)

すべてが完了しますと、ルートフォルダに以下のようなpackage.jsonファイルが作成されます。

pake

{
  "name": "projectName(プロジェクト名)",
  "version": "0.0.0(プロジェクトバージョン)",
  "description": "MyProject(プロジェクト説明)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "SHIGE(作者情報)",
  "license": "MIT(ライセンス)",
  "devDependencies": {
    "gulp": "^3.8.11"
  }
}

作成後にファイルを弄くる場合は、行末のカンマに注意してください。

4、プロジェクトに合わせて必要なプラグインをインストールする

ただgulpをインストールしただけではコンパイル機能などを持ちませんので、プロジェクトに合わせて必要なプラグインをインストールしていきます。

以下ベターなヤツを少しピックアップ

プラグイン名プラグインの機能
gulp-imagemin画像圧縮
gulp-minify-cssCSS圧縮
gulp-renameファイルのリネーム

gulpのプラグインはたくさん公開されています。
プラグインについては以下公式サイトより検索できます。

公式サイト

インストールは以下のようにコマンドでインストールができます。

npm install プラグイン名 --save-dev

上記のように「–save-dev」とコマンドを入力することでインストールしたプラグインが自動的にpackage.jsonに追記されます。

例として以下のようにプラグインをインストールすると、

npm install gulp-imagemin --save-dev

以下のようにpackage.jsonに追記されます。

....
  "author": "SHIGE(作者情報)",
  "license": "MIT(ライセンス)",
  "devDependencies": {
    "gulp": "^3.8.11",
  "gulp-imagemin": "^2.1.0"
  }
}

※バージョンは記事執筆時のバージョンです。

このようにしてプロジェクトに合わせて必要なプラグインをインストールしていきましょう。

5、gulpfile.jsという設定ファイルを作成する

ここにきてようやく具体的なgulpの動かし方について触れていきます。

gulpは基本的に、設定ファイルにJavascriptでタスクを記述して実行させます

ここでは例で、以下のような「gulpfile.js」という設定ファイルを作成してみます。

var gulp = require('gulp');// gulpプラグインの読みこみ
var minifyCss = require("gulp-minify-css");// CSSを圧縮するプラグインの読み込み

gulp.task('style', function(){ // 「style」という名前のタスクを登録
  return gulp.src('css/style.css') // 「css/style.css」を指定
    .pipe(minifyCss()) //cssの圧縮を実行
   .pipe(gulp.dest('min_css')); //出力場所を指定
});

上記のように、require(‘読み込むファイルなどの名前’)と記述し、別ファイルのJavascriptなどを読み込みます。

  • src/*.css (src直下の拡張子がcssのもの)
  • src/**/*.css (srcフォルダとそのサブフォルダ内の拡張子がcssのもの)
  • !src/*.css (src直下の拡張子がcssのものは除外)
記述方法処理内容
require(‘プラグイン名’)実行するプラグインを指定します。
gulp.task(‘タスク名’,実行される処理)任意のタスク名を登録します。タスク名と、実際に実行される処理を記述します。
gulp.src(‘対象となるファイル、フォルダ名’)タスク処理の対象となるファイルを指定します。カンマ区切りで複数指定できます。その他以下のような記述で対象を変更できます。
.pipe(処理内容())実行する処理を記述します。pide()は処理をいくつでもつなげることができます。
.pipe(gulp.dest(‘出力場所’));処理を実行したファイルを出力する場所を指定します。

6、gulpfile.jsで設定したタスクを実行する

gulpfile.jsで設定したタスク名を記述し、コマンドラインで実行します。

gulp style

上記のようにコマンドを実行することによって、gulpfile.jsで設定したタスクが実行されます。
これによって、今まで一つひとつ実行していたコンパイルや圧縮などといったタスクをまとめて実行することができます。

以上でgulpの基本的な使い方は完了です。

このままでもいいのですが、さらに便利な機能がgulpにはあります。

それがwatchというファイル監視の方法です。

watchでファイル更新を監視し、更新があった場合処理を自動で実行する

上記解説のままでは、プロジェクトファイル内で処理対象ファイルの更新があった場合に、
その都度コマンドラインでコマンドを実行しなければいけません。

これでは少し面倒です。

そのためさらに作業を簡略化するために、ファイルが変更・追加など更新されたタイミングでタスクを自動で実行してくれるwatch機能というものがあります。

watch

上記までの例にwatch機能を加えて見ます。

var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");

gulp.task('watch', function(){
	gulp.watch('css/**',function() {//cssフォルダ以下のファイルを監視する
		gulp.src('css/*.css')//cssフォルダ以下の拡張子が.cssのファイルを対象
		.pipe(minifyCss())
		.pipe(gulp.dest('min_css'));
	});
});

上記の場合は、

gulp.watch('監視するファイル名')

監視するファイルを指定し、その対象内で何らかの更新があった場合、自動でタスクを実行します。
あとはコマンドラインで同様に、以下のようにコマンドを実行しておけば完了です。

gulp watchTask

ファイルの監視をやめたい場合は、コマンドラインで Ctrl+C同時押しで監視を終了させます。

参考サイト

この記事に付けられたタグ