読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

Gulpを導入してみた

Gulp 効率化 Node.js

コードや画像の圧縮、コンパイルなどの面倒くさい処理を自動化してくれる、最近流行りの「Gulp」を使ってみました。

GulpはGruntとともに、タスクランナーと呼ばれる、タスクの自動化ツールです。
最近は、このタスクランナーを使って開発をすることがとても多いです。
ということで、今回はGulpを導入して、実際に画像の圧縮を自動化するところまでやってみました。

Node.jsの導入

GulpはNode.jsのパッケージとして使います。
なので、まず、Node.jsをインストールします。Node.jsとは何か、この辺りの記事が詳しく解説してくれています。

Gulpなど、便利なパッケージを実行できるサーバーサイドのJavaScriptといった感じでしょうか。
Node.jsは公式サイトからダウンロードしてインストールすることもできますが、せっかくなので、コマンドでインストールします。

Node.jsのインストール

ややこしいのですが、コマンドを使ったインストールにもいろいろな方法があるようで(結局のところ node.js をサーバーにインストールするにはどうやればいいのか? - もろず blog)、今回はnvmを使ってインストールします。

こちらの記事にも書いてありますが、下記コマンドを打ってNode.jsをインストールします。

git clone https://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh
nvm ls-remote
nvm install v0.12.7

「nvm ls-remote」はインストール可能なNode.jsのバージョンを一覧してくれるので、その最新版、0.12.7(2015/10/17現在)を「nvm install v0.12.7」でインストールします。

ここで1点注意。Node.jsはバージョンの2番目の数値が偶数なのが安定板、奇数なのが開発版とのこと。
なので、仮に0.13.xが出たとしても、普通に使う分には0.12.xを使うことになります。

package.jsonの作成(npmの初期化)

次に、GulpなどNode.jsで動くパッケージを管理するためのツール「npm」をプロジェクトフォルダで初期化します。
npmとは、node package manager の略で、こちらの記事でわかりやすく解説されています。

npm自体はNode.jsと一緒にインストールされるので、「npm -v」でバージョンを確認することができます。
このnpmを使えば、便利なパッケージを簡単なコマンドでインストールすることができます。

で、いろいろとインストールしまくってると、「一体なんのパッケージをインストールしたんだっけ?」という状態になってしまいます。
そこで、ローカルインストールしたパッケージはpackage.jsonで管理します。

インストールにはグローバルとローカルがあって、グローバルはシステムそのものに、ローカルは特定のフォルダ以下にインストールするようなイメージです。
たいていは、プロジェクトごとに違うパッケージを導入することが多いので、大体のインストールはローカルインストールになります。詳しくはこちら。

package.jsonには、インストールしたパッケージ名がバージョンとともにjsonで書かれています。
自分で作成することもできるのですが、プロジェクトフォルダに移動して、以下のコマンドを打つことで、対話形式で作成することができます。

sudo npm init

これで、package.jsonが作成され、Gulpを導入するための準備が整います。

Gulpの導入

Gulpの概要と導入については、こちらの記事がとてもわかりやすいです。

Gulpのインストール

Gulpはグローバルとローカル、両方にインストールする必要があります。
プロジェクトフォルダで、以下のコマンドを打ちます。

sudo npm install -g gulp
sudo npm install gulp --save-dev

「-g」をつけることでグローバルインストールになります。
「--save-dev」をつけることで、package.jsonのdevDependenciesにパッケージ名とバージョンを追記してくれます。
npmのオプションについてはこちらを参照あれ。

gulpfile.jsの作成

次に、

var gulp = require('gulp');

と記述した、gulpfile.jsを手動で作成します。

Gulpはプラグインを導入することで、作業を自動化できるのですが、その自動化の内容はJavaScriptの書式で、gulpfile.jsに自分で書いていきます。
なので、このあとの作業としては、自動化したい作業に応じて各種プラグインをインストールし、「gulpfile.js」に具体的な命令を追記していく、という流れになります。

プラグインの実行

プラグインのインストール

プラグインのインストールとアンインストールは、以下のコマンドで行います。それぞれショートカットコマンドがあります。

手順 コマンド
プラグインのインストール npm install --save-dev プラグイン
または
npm i -D プラグイン
プラグインのアンインストール npm uninstall --save-dev プラグイン
または
npm r -D プラグイン

今回は、画像を圧縮するプラグイン「gulp-imagemin」のインストールから、実際にそのタスクを走らせるとこまでやってみます。

手順 コマンド
1 gulp-imageminのインストール sudo npm i -D gulp-imagemin
2 gulpfile.jsにgulp-imageminのタスクを記述  
3 タスクの実行 gulp piyo
タスクの登録と実行

プラグインをインストールしただけではGulpは動作しないので、「gulpfile.js」に「gulp-imagemin」を実行させるための命令を記述します。

var plugin_imagemin = require("gulp-imagemin");
gulp.task('piyo', function() {// 定義するタスクの名前を指定
	gulp.src('img/*.png') // 圧縮元のファイルを指定
		.pipe(plugin_imagemin()) 
		.pipe(gulp.dest('imgmin/')); // 圧縮後のファイル保存場所を指定
});

こうして、「piyo」というタスクが定義され、「gulp piyo」とコマンドを打つと、そのタスクが走るようになります。
また、

gulp.task('default', ['piyo']);

と記述するこで、デフォルトタスクを指定し、「gulp」と打つだけで、そのタスクを実行できるようになります。
第2引数には複数のタスクを追加できるので、タスクが増えた場合にも力を発揮します。

しかし、それでも、画像ファイルを作成する度に、いちいち「gulp」って打たないと画像圧縮の処理が走りません。

Watchメソッドでさらに自動化

ということで、ファイルに変更が入ったら自動でタスクが走るように、「watch」を使った監視処理を書きましょう。
watchの書き方もいろいろあるようですが、今回はこちらを参考にしました。

watchもタスクの一つとして記述します。

gulp.task('watch', function() {
	gulp.watch('img/**', ['piyo'])
});

そして、こちらが出来上がったgulpfile.jsの全コードになります。

// プラグインの読みこみ
var gulp = require('gulp');
var plugin_imagemin = require("gulp-imagemin");

// タスクの定義
gulp.task("piyo", function() {
	gulp.src("img/*.png")
		.pipe(plugin_imagemin())
		.pipe(gulp.dest("imgmin/"));
});

// 監視の定義
gulp.task('watch', function() {
    gulp.watch('img/**', ['piyo'])
});

// デフォルトタスクの定義
gulp.task('default', ['watch']);

デフォルトタスクには、もともとpiyoタスクをいれていましたが、watchで監視するようにしたので、デフォルトタスクからは削除しました。
ここまで出来たら、あとは、コマンドで

gulp

と打てば、watchタスクで指定したファイルに更新があると、自動で圧縮したファイルを生成し、指定したフォルダに保存してくれます。
監視を止めたいときは、「Ctrl+c」と打ちます。

ちなみに、Photoshopの「Web用に保存」した画像が「gulp-imagemin」でどれくらい圧縮されたのか見てみました。

  • 圧縮前 63KB
  • 圧縮後 61KB

ほとんど変わってません(^^;

ま、今回はGulpの導入の仕方がわかれば良いので、Gulpのプラグインページなんかで、もっと良いプラグインを見つけたら、どんどんインストールしていけば良いかなと思います。