くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

CSS

.net mvc CSSとかのキャッシュバスティングをやる ver2

以前、書いたやつのちょっと補足。

<link href="/Content/site.css?20160508113250" rel="stylesheet"/>

↑みたいな、ブラウザキャッシュをやめさせるクエリ文字列をファイル更新された自動でつけるやつ。

直すのは「RegisterBundles()」してるとこ。デフォだとBundleConfigっていうクラス名かな。

//CSSはこっち
Bundle addBundle = new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/site.css");
addBundle.Transforms.Add(new FileHashVersionBundleTransform());
bundles.Add(addBundle);
//JavaScriptはこっち
addBundle = new ScriptBundle("~/lib/hoge").Include("~/Scripts/lib/hoge.js");
addBundle.Transforms.Add(new FileHashVersionBundleTransform());
bundles.Add(addBundle);

「FileHashVersionBundleTransform」の中身は元記事参照。そしたら、cshtml側で↓の感じで使いたいやつを呼ぶ。

@section scripts {
@Scripts.Render("~/lib/hoge")
}

結果は↓の感じ。

<script src="/Scripts/lib/hoge.js?v=20170508210031529"></script>

ruby cssの解析

前にちょっと書いた、エクセルの表をTextile形式に変換する奴をRedmineプラグインにしておこうと思い立ちまして、調べてたんですよ。

そしたら、RubyにはCSSそのものを解析するライブラリってなさそう?nokogiriってHTMLの解析のみなのかしら?公式のDOCとか落ちてるサンプル見てるとそんな気がしてならない。。。

ちょろちょろ検索してみたけど、出てくるのはHTMLのパースのみ。そーじゃないんだ。

探し方が悪いんだろうけども。んーいちからやるのはきついのであります。

と思ったら、「css_parser」っていうのがありましたね。よかったよかった。

C# .net MVCでCSSのキャッシュを変えさせるクエリ文字列を自動でつける

タイトル通り。CSSとか更新した際に、普通はクライアントでF5しないと読み込み直さない。それを無理矢理やらせるのに、「site.css」みたいなのに「site.css?20160508113250」みたいなクエリ文字列をつけると別ファイルと認識して読み込み直させるというやつがある。↓の感じ。

<link href="/Content/site.css" rel="stylesheet"/>
↑を↓にする
<link href="/Content/site.css?20160508113250" rel="stylesheet"/>

.netMVCだと、CSSとかJavaScriptとかはcshtml側で、「@Styles.Render("~/Content/css")」みたいに書くけど、これの結果を↑の日付のクエリ文字列をつけた形に自動で変えたい。日付はファイルの更新日で。

で、これをやるのに、何がいいかなーで探したら一番よさそうなのは下の感じ。

修正するのは「BundleConfig」。こいつを下の感じに変える。

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        //とりあえず追加したいBundle作る
        var addBundle = new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/site.css");
        //ここで↓の変換クラスをセットする
        addBundle.Transforms.Add(new FileHashVersionBundleTransform());
        //Bundleの追加
        bundles.Add(addBundle);
    }
}

//IBundleTransformでクエリ文字列を付加するように定義
//キャッシュされてるCSSをクエリストリングでファイルの更新日を付けて認識を変える
public class FileHashVersionBundleTransform : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        foreach (var file in response.Files)
        {
            string version = System.IO.File.GetLastWriteTime(System.Web.Hosting.HostingEnvironment.MapPath(file.IncludedVirtualPath)).ToString("yyyyMMddHHmmssfff");
            file.IncludedVirtualPath = string.Concat(file.IncludedVirtualPath, "?v=", version);
        }
    }
}

結果は↓の感じ。

<link href="/Content/site.css?v=20160508113250" rel="stylesheet"/>

参考にしたのはココ。っていうかまんまですが。

上のサイト見てて思ったけど、このクエリ文字列って「キャッシュバスティング(cache-busting)」って言うのかしら。

2017/8/6追記:Ver2

問合せ