Androidアプリで使う画像素材の圧縮をgulpで一括処理する
まず、デザイナーやらディレクターやらプロデューサーやらに『圧縮された画像をgitなどのバージョン管理システム上にコミットしてもらえる』そんな幸福な環境であれば無縁な話。
大概の組織では共有ファイルシステムに新しく追加する、もしくは変更された画像をドカッと置かれて「よろしく」って感じだろう。
共有ファイルシステムですらなく、メールなどのようなツールで画像ファイルをやりとりをしたりしていると相当煩雑だろう。お悔やみ感ある。
何かしらの共有フォルダを仲立ちにして画像をやりとりしていることを前提に話を進める。
また、事前にgulpを使えるようにしておく。
下記のようなgulpfileを用意する。
今回はcoffee scriptで書いた。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
gulp = require 'gulp' print = require 'gulp-print' changed = require 'gulp-changed' imagemin = require 'gulp-imagemin' pngquant = require 'imagemin-pngquant' minimist = require 'minimist' args = minimist(process.argv.slice(2)) src = args.src dest = args.dest gulp.task 'optimizeImage', -> gulp.src src + '/**/*.png' .pipe changed(dest) .pipe imagemin use: [ pngquant quality: 80-100 speed: 1 ] .pipe print() .pipe gulp.dest dest gulp.task 'watch', -> gulp.watch src + '/**/*.png', ['optimizeImage'] gulp.task 'default', ['optimizeImage'] |
そしたらgulpfileがある場所で下記のコマンドを実行する。
|
1 |
gulp --src /path/share/folder --dest /path/to/android-studio/blah/res |
これで圧縮されたpngファイルがres以下のhdpiやxxdpiフォルダに転送されてるはず。
gulp-changedを使ってるので、実行するたびに全ての画像ファイルを圧縮することもない。
何かしらの変更があるファイルのみを対象に圧縮されるようになってる。
watchとか使って、ファイルの変更を検知したら圧縮ー、とかやってもいい。
ただ、スマホアプリの作成だったらwatchなんか使わなくてもいいなと。
というのも、web開発であればsassやらcoffeeファイルを変更して保存するたびにgulpタスク実行してくれないとブラウザで確認できないし、それをいちいち手で実行するのも手間だよね、っていう事情は分かる。
でも、スマホアプリでそんなファイル編集を監視して保存するたびに何かしらのタスクを実行してほしい、みたいなことないんだわ。
なので、せいぜいalias作っておいて画像素材が追加されたら手でそのコマンド打てばいいよね。
って、感じ。
