【minify】Gulpに慣れる【less→css】

フロントエンド開発に無知なので手を動かしてgulpの勉強してみました。ドッグイヤーのソフトウェア業界的には半年後にはオワコンかもですが。。。

今回行ったことは、

– LESSをCSSに変換
– CSSを結合+minify
– JSを結合+minify
– HTMLをminify
– bowerを使用
– 画像を最適化
– express(node)をサーバーとして使用、さらにgzip圧縮

です。ひとまずこれぐらいやっておけばいいかなと思います。ChromeのPageSpeedで見てみますと、

1 HTMLで画像を参照しているが、そのサイズに画像を変換してサイズを削減しろ
2 画像の幅と高さをHTMLで指定しろ、そうするとレンダリングが早くなる

と怒られます。そのようにすればいいだけの話なので今回は対応しません。

gruntではなくgulpを使ったのは、gruntをうまく扱うことが出来ずgulpにしてみたというだけです。gulpにしてもいまいち分からないところはあって、そのたびにmakeを使ってできるのではと思いましたが、gulpを消耗しつつ使っているとだんだん分かってきたのでgulpを採用しました。

https://github.com/kawa-/gulp-my-example

↑ソースはこちらに置いておきます。git cloneしてから、sudo ./init.sh; gulp;と打つと、publicという公開用ディレクトリが作られます。普段はsrcのディレクトリの中身を編集すれば良いです。ただ、新しくhtmlファイルを追加したいとかある場合はgulpfile.jsを修正する必要があります。

さて、gulpの使い方ですが、基本的にはプラグインを入れてexampleを見て、小さいtaskを書いてみて実行してみて、思うように動くか確かめながら書き加えていく感じです。ここで大事なのはgulpのrun-sequenceというプラグインです。gulpはtaskを並列に実行するようなのですが、このプラグインを使うと直列・並列を指定できるようになります。これは非常に有効で、lessをcssにしてからさらに圧縮、みたいなことがやりやすくなります。

さて、今回用いたそれぞれのgulpのプラグインの説明を以下に書きます。

– gulp-less: lessをcssに変換してくれます。その際、pathというプラグインが必要な感じなので使っています。

– imagemin-optipng: pngファイルを最適化します。pngだけ対応です。imageminのインストールがうまくいかなかったので、imgemin-optipngを入れました。

– rimraf: ファイル・ディレクトリを削除します。今回は$ gulp cleanで公開用のディレクトリを削除するためだけに使っています。

– gulp-concat: ファイルを結合するプラグインです。

– gulp-html-replace: HTMLファイル上に印を付けておけば置き換えてくれるプラグインです。

– gulp-minify-html: HTMLを圧縮します。

先のgithubレポジトリのgulpfile.jsで解説するべきところは、

// 中略
gulp.task('default', function(callback) {
  return runSequence(
    'clean',
    'less',
    ['minify-css', 'compress-js', 'images', 'htmlreplace-minify', 'copy'],
    callback
  );
});

の部分でしょう。これはrun-sequenceというgulpのプラグインを使って、

1. cleanというtaskを実行
2. 次にlessというtaskを実行
3. その後に、minify-css/compress-js/images/htmlreplace-minify/copyを並列に実行

を行います。直列、並列が混じっています。