cordovaプロジェクトのjavascriptとcssをgulpで圧縮 / gulp-uglify / gulp-cssnano / gulp-concat

gulp

cordova でアプリを作成しています。
高速化とか難読化のために js/css の圧縮を試みました。
js については複数の js ファイルをひとつにまとめる concat も行っています。
cordova プロジェクトには gulp の導入が一番手っ取り早そうだったので、gulp を採用しました。

インストール

というわけでインストール。
npm コマンド及び node.js のインストールについては割愛。
当方の環境は mac ですので、以下は mac 環境が前提です。

これで gulp がグローバルにインストールされます。

プロジェクト作成

次にプロジェクトのディレクトリ(package.jsonがあるディレクトリ)に移動します。
私の場合は、cordova のプロジェクトに追加する形となりますね。
普通に cordova プロジェクトをはじめただけだと package.json は無いです。
なので、以下のコマンドで作成します。

いろいろ聞かれますが、とりあえずデフォルトでいいので、すべてEnter
package.json が作成されます。
ここにプロジェクトについてや、下記で導入する node モジュールなどが記録されます。

gulp-uglify, gulp-cssnano のインストール

圧縮のための node モジュールをインストールします。

インストール完了すると node_module ってディレクトリができて
そこにモジュールはインストールされています。
--save-dev オプションつけることで、 package.json に記録されます。

このコマンドによって、package.json に書かれたモジュールがまとめてインストールされるようになります。
node_module ディレクトリはファイルサイズが大きいので git やら SVN にアップしたくないです。
git clone やチェックアウトしたあとに npm install やるだけで環境が構築できるようになりますね。


<広告>



gulp 処理の記述

いよいよ gulp の処理を記述します。
gulpfile.js というファイルを作成してそこに書きます。
書いたら gulpfile.js にあるディレクトリで

ってコマンドを実行すると処理が gulp 処理が実行されます。
私の js/css を圧縮する記述は以下です。

えっと、ポイントですが、
cordova プロジェクトは、 www というディレクトリ以下のファイルが
そのまま Android/iOS などのプラットフォーム(プロジェクトみたいなもの)に配置されます。
なので、元の js/css を保管する assets というディレクトリを作成して、
gulp処理で圧縮したら www 以下に出力するようにしています。
js_src, js_dst あたりの変数はそれを意味しています。

あとは gulp の記法に従い、Taskを定義しています。
ここでは、js-uglify ってタスクと css-nano というタスクを定義しています。
gulp は pipe で処理をつなげていきます。
js-uglify では、 uglify 処理 の前に concat で複数の js を bundle.js というひとつの js ファイルにまとめたあとに uglify 化しています。
css-nano では、拡張子を変更する処理によって .min を加えたファイル名にリネームしています。

最後の

ですが、これは gulp コマンド実行時のデフォルトのタスクを指定しています。
これがないとエラーが起きますので、デフォルトは必ず指定します。
ここでは、デフォルトに [build] を指定し、[build] は、 [js-uglify], [css-nano] を実行するようになっています。

ちなみに css の圧縮は、 gulp-clean-css の方が有名みたいですけど、
私のプロジェクトの css ではどうも圧縮中に以下のエラーが出ちゃうのでやめました。

おしまい

これで、gulp コマンド(または、 gulp build)を実行すれば圧縮処理されます。
次に cordova プロジェクトの場合は、

コマンド時に同時に gulp 処理するようにフックさせたいですね。
気が向いたら記事にします。

ではでは。


<広告>


コメントを残す

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