コンピュータあれこれ、の備忘録です。commentフロントエンド開発に無知なので手を動かしてgulpの勉強してみました。ドッグイヤーのソフトウェア業界的には半年後にはオワコンかもですが。express(node)をサーバーとして使用、さらにgzip圧縮です。これぐらいやっておけばいいかなと思います。画像の幅と高さをHTMLで指定しろ、そうするとレンダリングが早くなると怒られます。そのようにすればいいだけの話なので今回は対応しません。gruntではなくgulpを使ったのは、gruntをうまく扱うことが出来ずgulpにしてみたというだけです。gulpにしてもいまいち分からないところはあって、そのたびにmakeを使ってできるのではと思いましたが、gulpを消耗しつつ使っているとだんだん分かってきたのでgulpを採用しました。https://github.com/kawa-/gulp-my-example↑ソースはこちらに置いておきます。gulp;と打つと、publicという公開用ディレクトリが作られます。普段はsrcのディレクトリの中身を編集すれば良いです。新しくhtmlファイルを追加したいとかある場合はgulpfile.jsを修正する必要があります。gulpの使い方ですが、基本的にはプラグインを入れてexampleを見て、小さいtaskを書いてみて実行してみて、思うように動くか確かめながら書き加えていく感じです。ここで大事なのはgulpのrun-sequenceというプラグインです。gulpはtaskを並列に実行するようなのですが、このプラグインを使うと直列・並列を指定できるようになります。これは非常に有効で、lessをcssにしてからさらに圧縮、みたいなことがやりやすくなります。今回用いたそれぞれのgulpのプラグインの説明を以下に書きます。lessをcssに変換してくれます。その際、pathというプラグインが必要な感じなので使っています。pngファイルを最適化します。imageminのインストールがうまくいかなかったので、imgemin-optipngを入れました。ファイル・ディレクトリを削除します。cleanで公開用のディレクトリを削除するためだけに使っています。ファイルを結合するプラグインです。HTMLファイル上に印を付けておけば置き換えてくれるプラグインです。HTMLを圧縮します。);});の部分でしょう。その後に、minify-css/compress-js/images/htmlreplace-minify/copyを並列に実行を行います。直列、並列が混じっています。様々なマシンをいろいろとベンチマーク。WordPress.。