grunt-google-cdnを使ってやると思ってた

@nqounetです。

jQueryは大体いつでも使うライブラリです。

ye webappした時にも、必ず入っています。

でも、それってCDNを使うほうが何かと楽なのに、と思っていました。

CDNを簡単に使いたい

今の状態を変えずにCDNを使うようにできないのかなと思って、アレコレ探してみましたが、ニーズがないのかこれといったものが見つかりません。

requirejsのpathの仕組みは良いと思うのですが、正宗とか牛刀を使うようなものだと思うんですよね。

せいぜい考えているのはfailoverとかfallbackとかいうような仕組みだけです。

で、そんな感じで探していたら面白そうなものがありました。

jsやcssを遅延ロードする仕組みで、かつ、依存性も記述できるので便利に使えそうです。

ただ、これでもまだ仰々しい感じがします。

更に探していくと、gruntのプラグインを発見しました。

もともと、gruntとは無関係のgoogle-cdnというのがありましたが、それをgruntで使えるようにしたようです。

インストールはこんな感じです。

1

npm install -D grunt-google-cdn google-cdn-data

で、Gruntfile.jsに以下の設定を追加しました。

1
2
3
4
5
6
7
8


cdnify: {
    options: {
        cdn: require('google-cdn-data')
    },
    dist: {
        html: ['app/*.html']
    }
},

jquery-1.11.0は含まれていないので効果がありません。

なので、予めbower.jsonのjqueryのバージョンを2.1.0などにあげておく必要があります。

バージョン情報を書き換えたら、以下のコマンドで実行します。

1

grunt cdnify

scriptタグのjqueryの部分が置き換わりました。

…まあ、それはそれで良かったのですが。

1

grunt bowerInstall

当然ですが上記コマンドでもとに戻ります。

その辺も回避しようとした場合、jqueryをbowerInstallで書き直されないようにexcludeに追加しておく、などの処理が必要です。

結構苦労して探したので、それなりの満足感はありました。

しかし得られたものは何だったでしょうか？

結局のところ、failoverの部分はコピペしてやるほうが良さそうな感じです。

CDNを使うのは、みんなでキャッシュを共有できてトラフィックが軽減できる、という理由だけでなく、色々なバージョンを手元に用意するのが面倒、という側面もあります。

後者の面倒な部分が解消される昨今、CDNとfailoverの仕組みの方が面倒であれば、頑張って使う必要はないよなぁと思いました。

もちろん、トラフィックが軽減できるメリットは有りますが、遅延ロードによってレイアウトが整うまでに時間がかかったりすれば使おうとは思わないでしょう。

yoで作ったファイル群をbowerとgruntを使って管理していく、という仕組みの中で、あえてCDNを選択をするのは、方向性がズレている気がしました。

まあ、燃え尽き症候群てやつかもしれません。

CDNを使ったfailover、fallbackについては、こちらが参考になります。

require.jsやyepnope.jsを使う方法などが書いてあります。