Node.jsをベースとしたビルドシステムヘルパー gulp.jsとは

Grunt.jsの後発として、gulp.jsというものが出ていたのをいまさらながら知りました。

どっちもNode.jsが必要

Node.jsをパソコンにインストールしておく必要があります。

Grunt.js ⇒ タスクランナー
gulp.js ⇒ ビルドシステムヘルパー

Grunt.js

f:id:ts0818:20160821111057j:plain

gulp.js

f:id:ts0818:20160821111058j:plain

ビルドシステムヘルパーとタスクランナーの違い

gulpとは何か | CodeGrid さんの説明によると、

タスクランナー（例：Grunt.js）

タスク＝プラグインといった感じに、その単一のタスク（プラグイン）を実行させるのが主な役割です。単一のタスクをうまいこと組み合わせて実行することで、ビルドという大きい目標に辿り着くというアプローチです。

ビルドシステムヘルパー（例：gulp.js）

プラグインはあくまでも入力に対して処理を行うためのものです。gulpのタスクはGruntでいうところのビルドに近いものです。タスクの中でいろいろなプラグインを組み合わせることで、タスク＝ビルドを行うといったアプローチを取っています。プラグインを容易に組み合わせられるので、柔軟なタスクを作成できるとともに、タスク同士の依存関係を極力減らすことが可能です。

といった違いがあるようです。

いまから始める場合はgulp.jsがおすすめのようです。

gulp.jsのプラグインでできること

⇩ 下記サイトが詳しいです。

・Web制作の面倒事を自動化！gulpの導入から使い方まで | コラム | Web制作株式会社ワンゴジュウゴ WAN55 （東京・千代田区）

gulp-autoprefixer … ベンダープリフィックスの整理
gulp-coffee … CoffeeScriptのコンパイル
gulp-compass … compassを使えるようにする
gulp-imagemin … 画像圧縮
gulp-plumber … エラーが起きてもwatchさせているタスクを中断させない
gulp-ruby-sass … Sass/SCSSのコンパイル
gulp-sourcemaps … sourcemapを使えるようにする
gulp-uglify … jsファイル圧縮
gulp-webserver … Webサーバー/ライブリロード
imagemin-pngquant … png画像圧縮
gulp-htmlhint … HTML構文チェック
gulp-less … LESSのコンパイル
gulp-csscomb … CSSプロパティ並び順整理
gulp-jshint … JavaScript構文チェッカー

gulp.jsを導入してみる

実際にgulp.jsを導入していきたいと思います。

・5分で導入！タスクランナーGulpでWeb制作を効率化しよう - ICS MEDIA

・gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン - SSSSLIDE

・Web制作の面倒事を自動化！gulpの導入から使い方まで | コラム | Web制作株式会社ワンゴジュウゴ WAN55 （東京・千代田区）

・gulpとは何か | CodeGrid

上記のサイトが分かりやすく説明してくれています。

まずは、Node.jsをインストール

https://nodejs.org/en/ にアクセスし、『DOWNLOADS』という項目を選択クリックします。

f:id:ts0818:20160821114345j:plain

『LTS』『Current』のどちらかを選択したら、それぞれお使いのOSに合ったinstallerファイルをダウンロードします。

f:id:ts0818:20160821114346j:plain

⇩ windows環境へのNode.jsのインストールは下記サイトが詳しいです。

・Node.js / npmをインストールする（for Windows） - Qiita

インストールができたら、コマンドプロンプトで下記コマンドを実行します。

node -v

Node.jsのバージョンが表示されればインストール成功です。

f:id:ts0818:20160821120109j:plain

同時にインストールされるnpmもインストールされているか確認します。

npm -v

npmのバージョンが表示されればインストール成功してます。

f:id:ts0818:20160821120110j:plain

gulp.jsをインストール

gulpは、

グローバル
ローカル

の両方にインストールする必要があるようです。グローバルにインストールすることで、gulpのコマンドをどの場所（フォルダ）でも使えるようにすることができるようです。

ローカルのほうは、Webのプロジェクトフォルダ（ホームページなどの場合、一番外側のフォルダ）にインストールすれば良いようです。

gulpをグローバルにインストールする

コマンドプロンプトで、下記コマンドを実行します。

npm install -g gulp-cli

f:id:ts0818:20160821111055j:plain

インストールができているか確認します。

gulp -v

gulpのバージョンが表示されればインストール成功です。

f:id:ts0818:20160821121628j:plain

package.jsonファイルの作成

gulpでインストールするプラグインの情報を管理しておくために、package.jsonファイルを作成します。作成する場所は、Webサイトのファイル一式が格納されたフォルダ直下のようです。『cd』コマンドで、該当のフォルダの場所に移動してから、下記コマンドを実行します。

npm init

f:id:ts0818:20160821111056j:plain

プロジェクト名や著作権の設定などの入力をどうするか聞かれますが、特に必要なければ、『Enter』キーを連打で問題ないかと思われます。

該当のフォルダをエクスプローラーで開いていると『package.json』ファイルが生成されています。

f:id:ts0818:20160821123317j:plain

package.jsonファイルを開くと、下記のような内容になっています。ここにgulpでインストールしていくプラグインの情報が追加されていきます。

{
  "name": "withs",
  "version": "1.0.0",
  "description": "<!DOCTYPE html> <html> <head> \t<meta name=\"viewport\" content=\"width=device-width\" /> \t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> \t<title>WordPress › お読みください</title> \t<link rel=\"stylesheet\" href=\"wp-admin/css/install.css?ver=20100228\" type=\"text/css\" /> </head> <body> <h1 id=\"logo\"> \t<a href=\"https://wordpress.org/\"><img alt=\"WordPress\" src=\"wp-admin/images/wordpress-logo.png\" /></a> \t<br /> Version 4.5.3 </h1> <p style=\"text-align: center\">セマンティックな個人情報発信プラットフォーム</p>",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

Gulp本体をローカル環境にインストール

コマンドプロンプトでpackage.jsonファイルを作成したフォルダに移動します。

cd C:\xampp\htdocs\withs\wp-content\themes\withs

Gulp本体をローカル環境に（プロジェクトフォルダー以下で使えるように）インストールします。

npm install --save-dev gulp

該当のフォルダをエクスプローラーで開いていると『node_modules』フォルダが生成されています。

f:id:ts0818:20160821130427j:plain

gulp本体がローカルにインストールされているか確認します。package.jsonファイルを作成したフォルダに移動している状態で、下記コマンドを実行します。

gulp -v

『Local version 3.9.1』とローカルでのgulpのバージョンが表示されていればOKです。

f:id:ts0818:20160821123318j:plain

プラグインを追加していく場合は、コマンドプロンプトでpackage.jsonのあるフォルダにいる状態で、

// プラグインのインストール
npm install --save-dev (プラグイン名)

を実行していけば、OKのようです。

実際にプラグインを導入してみる

画像を圧縮する為のプラグインをインストールします。

npm install --save-dev gulp-imagemin

インストールしたプラグインを動作させるためには、プロジェクトファイル直下にgulpfile.jsというファイルを作成し、コードを記述する必要があります。= タスクを作成する。gulpfile.jsファイルでの処理は、JavaScriptを使って記述します。

gulpfile.jsの作成と記述

エクスプローラーで該当フォルダにgulpfile.jsを作成します。

f:id:ts0818:20160821132931j:plain

gulpfile.jsに記述

// gulpプラグインの読みこみ
var gulp = require('gulp');
// 画像を圧縮するプラグインの読み込み
var imagemin = require("gulp-imagemin");
// 「imageMin」という名前のタスクを登録
gulp.task("imgMin", function() {
  // imgフォルダー以下のjpg,png画像を取得
  // 今回は、img/フォルダ名/フォルダ名/フォルダ名...のようにimgフォルダの中にフォルダで階層を分けて画像を保存してる場合のパターンも考慮しています。
  gulp.src([
     './img/*.{jpg,png}',
     './img/**/*.{jpg,png}',
     './img/**/**/*.{jpg,png}',
     './img/**/**/**/*.{jpg,png}'
  ],{base: 'img'})
      .pipe(imagemin())                    // 画像の圧縮処理を実行
      .pipe(gulp.dest("./minified_img/")   // minified_imgフォルダー以下に保存
  );
});

タスクの実行

作成したタスクを実行するには、コマンドラインで『gulp タスク名』を実行します。

gulp imgMin

エクスプローラーで確認すると、『minified_img』フォルダが作成され、『img』フォルダの中身が圧縮されたものが格納されました。

f:id:ts0818:20160821141012j:plain

watch機能を使う

画像の圧縮処理について、画像が追加、変更される度にタスクを手動で実行するのは面倒です。タスクランナーには、ファイルの更新があったらそのタイミングでタスクを自動で実行できるwatch機能があり、もちろんGulpでも使えます。

watch機能を使えばファイルの更新後に自動で処理を実行できるようです。

gulpfile.jsを書き換えます。

var gulp = require('gulp');
var gulp = require('gulp');
var imagemin = require("gulp-imagemin");
var IMG_FILE = [
	     'img/*.{jpg,png}',
	     'img/**/*.{jpg,png}',
	     'img/**/**/*.{jpg,png}',
	     'img/**/**/**/*.{jpg,png}'
	  ];

// minImgタスクを設定
gulp.task('minImg',function() {
  gulp
    .src(IMG_FILE,{base: 'img'})           // 圧縮処理を実行する対象までのパス
    .pipe(imagemin())                      // 画像の圧縮処理を実行
    .pipe(gulp.dest("minified_img/"));   // minified_imgフォルダー以下に保存
});

// IMG_FILEに格納されたパスのファイルを監視し、『minImg』タスクを実行
gulp.task("watchTask", function() {
  gulp.watch(IMG_FILE, ['minImg']);
});

コマンドプロンプトで『gulp タスク名』で実行したいタスクを実行します。

今回はwatchTaskを実行します。