全くの初心者がgulpを導入し、画像圧縮、リサイズシステムを作る手順

 

少し前になりますが、仕事でgulpを試してみたことがあったのでその手順です。

やりたかったことは、自動的に画像を圧縮する、リサイズをするプログラムです。

gulp-imageminとgulp-image-resizeを使います。

結局その時作ったシステムでは使えなかったのですがその後デザイナさんが使うようになったみたいなのでやってみてよかったなーと思っています。

使いこなせば本当に便利なもの!

 
Gulpとは?

タスクランナーだと思っていたけど、正しくはビルドシステムヘルパーらしい。
gulpはNode.jsをベースとしたビルドシステムヘルパー。
参考:https://app.codegrid.net/entry/gulp-1

簡単な処理、画像の圧縮やsassコンパイル、簡易ローカルサーバーの立ち上げ、FTPアップロード処理なんかが自動化できるよう。
(webアプリケーションの一部としてPHPと組み合わせて使うのには向いてなかった…)

 node.jsをインストール

 

ではさっそく入れて使ってみましょう。
公式サイトよりインストール。
https://nodejs.org/en/

コマンドプロンプトで

node -v

を実行し、バージョン表示されることを確認する。

 

Gulpをインストール

Gulpをグローバル(-g)インスト―ル(どの場所でも使えるようにする)

npm install -g gulp-cli

package.json(パッケージ管理のためのファイル)を作成
npm init –yes
今後インストールしたモジュールとかは、package.jsonに記載されていくことになります。

 

画像圧縮 gulp-imagemin

今回は画像のロスレス圧縮をしたかったので、gulp-imageminプラグイン をインストール。
npm install –save-dev gulp-imagemin

 

 

画像リサイズ gulp-image-resize

画像を360×360にリサイズして!との要望だったので、gulp-imagemin-resizeもインストール。
gulp-imagemin-resizeを利用するには、ImageMagickもしくはGraphicsmagickが必要なので、今回はImageMagickをインストール。

 

yum install ImageMagick

 

gulp-image-resizeもインストール。

 

npm install –save-dev gulp-image-resize

(参考)http://whiskers.nukos.kitchen/2014/12/16/gulp-image-resize.html

 

 

 gulpfile.jsの作成

必要なプラグインをインストールしたら、実行したいタスクを追加していきます。

gulpfile.js、ここに追加したタスクが実行されることになります。ついにnode.jsを書きます。
インストールしたプラグインはrequireで呼び出す必要があります。
node.jsなので、基本的にはJSと書き方は同じ
`var gulp = require(‘gulp’);`
こんな感じでかけばプラグインをrequireして使えるようになる。

 

 

タスクは、基本的にはこんな感じでかいていきます。
gulp.task(‘タスク名’,function() {
gulp.src( 使いたいフォルダ名 )
.pipe(プラグイン名( オプションがあればオプションとかファンクション ))
.pipe(gulp.dest( 保存フォルダ名 ));
});

 

 

実際にできたgulpfile.js

 

 

実際はwatch(変更を検知してタスクを開始する)とか
runseaquence(タスクを実行する順番を指定できる)とか
s3-upload(s3にアップロードする)とか使ったけど、
記事では画像処理タスクだけをできるだけシンプルにまとめておきますので、何かに使いたいときはパクってどうぞ(動作は保証しません)


//使いたいプラグインを一番上で呼び出し
var gulp = require('gulp');
var imagemin = require("gulp-imagemin");
var imageResize = require('gulp-image-resize');

//圧縮レベルオプションを定義
var imageminOptions = {
 optimizationLevel: 7
 };

 //リサイズのオプションを定義
var resizeOptions = {
 width : 360,
 height : 360,
 gravity : 'Center',
 crop : true,
 upscale : false,
 imageMagick : true
 };
//フォルダ名を定義
var optimizedir = basedir + 'optimized_images/picture/';
var resizedir = basedir + 'resized_images/picture/';

//圧縮タスク
gulp.task('image-optim', function(path){
 //compress_image以下の画像ファイルを見る
 return gulp.src("compress_images/*/*/*.+(jpg|png)")
 .pipe(imagemin({
  //なにやらクォリティや圧縮スピードなんかのオプション。
 progressive: true,
 use: [pngquant({quality: '65-80', speed: 1})]
 }))
  //処理が終わった画像を吐き出すフォルダを指定
 .pipe(gulp.dest( optimizedir ));
 });


//リサイズタスク
gulp.task('image-resize',function() {
 return gulp.src("resize_images/*/*/*.+(jpg|png)")
 //リサイズのオプションを指定
 .pipe(imageResize( resizeOptions ))
 .pipe(gulp.dest( resizedir ));
 });

 

このファイルが出来たら、あとは実行するだけです!

# タスクを実行する

上記の例だと、実行時はこんな感じのコマンドをたたけば実行されます。
gulp image-optim
gulp image-resize

gulp タスク名 で実行できる!

いくつかのタスクを順番にやりたいときは、runseaquenceというのを使ってください。

 

 

これも全然勘所がわからずに「とりあえず使ってみたい」ってだけで使ってみたものなので、書き方とかはあんまりきれいじゃないかもしれませんが、一応よくわからない人でも使えるものになるようになっているんじゃないかと。画像を入れるフォルダとかのファイルパスはちゃんと設定してあげてくださいね。

The following two tabs change content below.
まみたす

まみたす

1992年生まれ。知識ゼロ文系女子からSEになっているところ。 カメラ、猫、お酒、旅行がすきです。
この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)