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

tips

📅 April 07, 2017

•

⏱️4 min read

gulp

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

インストール

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

sudo npm install gulp -g

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

プロジェクト作成

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

% npm init

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

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

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

% npm install gulp --save-dev
% npm install gulp-uglify --save-dev
% npm install gulp-cssnano --save-dev
% npm install gulp-concat --save-dev
% npm install gulp-rename --save-dev

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

% npm install

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

gulp 処理の記述

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

gulp

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

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cssnano = require('gulp-cssnano');
var rename = require("gulp-rename");

var js_src = './assets/js/*.js';
var css_src = './assets/css/*.css';

var js_dst = './www/js';
var css_dst = './www/css';

gulp.task('js-uglify', function(){
    gulp.src(js_src)
        .pipe(concat('bundle.js'))
        .pipe(uglify())
        .pipe(gulp.dest(js_dst));
});

gulp.task('css-nano', function(){
    gulp.src(css_src)
        .pipe(cssnano())
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulp.dest(css_dst));
});

gulp.task('build', ['js-uglify', 'css-nano']);
gulp.task('default', ['build']);

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

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

最後の

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

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

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

TypeError: Cannot read property 'replace' of undefined

おしまい

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

% cordova build

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

ではでは。

← Prev Next →