moxt

Just another Blog site

Androidアプリで使う画像素材の圧縮をgulpで一括処理する

   

まず、デザイナーやらディレクターやらプロデューサーやらに『圧縮された画像をgitなどのバージョン管理システム上にコミットしてもらえる』そんな幸福な環境であれば無縁な話。

大概の組織では共有ファイルシステムに新しく追加する、もしくは変更された画像をドカッと置かれて「よろしく」って感じだろう。
共有ファイルシステムですらなく、メールなどのようなツールで画像ファイルをやりとりをしたりしていると相当煩雑だろう。お悔やみ感ある。

何かしらの共有フォルダを仲立ちにして画像をやりとりしていることを前提に話を進める。
また、事前にgulpを使えるようにしておく。

下記のようなgulpfileを用意する。
今回はcoffee scriptで書いた。

そしたらgulpfileがある場所で下記のコマンドを実行する。

これで圧縮されたpngファイルがres以下のhdpiやxxdpiフォルダに転送されてるはず。
gulp-changedを使ってるので、実行するたびに全ての画像ファイルを圧縮することもない。
何かしらの変更があるファイルのみを対象に圧縮されるようになってる。

watchとか使って、ファイルの変更を検知したら圧縮ー、とかやってもいい。

ただ、スマホアプリの作成だったらwatchなんか使わなくてもいいなと。
というのも、web開発であればsassやらcoffeeファイルを変更して保存するたびにgulpタスク実行してくれないとブラウザで確認できないし、それをいちいち手で実行するのも手間だよね、っていう事情は分かる。
でも、スマホアプリでそんなファイル編集を監視して保存するたびに何かしらのタスクを実行してほしい、みたいなことないんだわ。

なので、せいぜいalias作っておいて画像素材が追加されたら手でそのコマンド打てばいいよね。
って、感じ。

 - Android

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  関連記事

logo_og
ReactNativeでGiphyのデータを表示する

まずは下記をサクッとパクってみる。 当方、比較的AndroiderなのでAndroidで。 …

wallpaper.big-j.cs
GridViewからRecyclerViewに移行したい

GridViewからRecyclerViewにクラス名変えるだけじゃ動かない。 移行過程をメモ。 …

no image
AndroidでGoogleTagManagerを使いたい

Contents1 GoogleTagManagerとは2 …

wallpaper.big-j.cs
手を動かしてViewDragHelperを学ぶ(無駄にKotlin)

まず、Youtubeの公式Androidアプリみたいなヤツ作りたくなった。 すでに有志がライブラリ作ってた。。 …

wallpaper.big-j.cs
Facebook製の画像ライブラリFrescoのコードを読んでいる

Facebookが新たに画像ライブラリFrescoを公開した。 DraweeView,DraweeController,DraweeHierarchyというクラスを利用したMVC的な構成を成しており、画像を効率よく読み込むようになっているらしい。(雑) …

wallpaper.big-j.cs
LeakCanaryの仕組みをある程度理解したいマン

Contents1 LeakCanaryとは何か2 …

wallpaper.big-j.cs
Androidで超シンプルなWidgetを作りたい

情報が少なくてちょっとつまづいたのでメモ。 Contents1 …

no image
[WIP]AndroidでParseを使ってみる

今更感溢れてるが。 バックエンドな実装・運用は面倒くさい、Railsとか使い方分からない、的な人はParse良いかもしれない。 …