現在ログインしていません。
新規アカウント作成
ログイン

プログラムでCSSをミニファイ(圧縮)する

WebGreaseを使うと自作のプログラムでCSSミニファイできます。

通常Webアプリケーションでは自力でミニファイする必要はないようにMicrosoft.AspNet.Web.Optimizationがうまく組み込まれているので、この記事は何か事情があって自分のプログラムでミニファイしたい人向けです。

WebGreaseはVisual StudioASP.NET Webアプリケーションを作成すると既定で使用されているライブラリです。コンソールアプリケーションWindows フォーム アプリケーションでもWebGreaseを組み込んで呼び出すことができます。

この手法はVisual Studio 2017で確認しています。

方法

まず、プロジェクトを右クリックして、NuGetパッケージの管理からWebGreaseを取得します。既にWebGreaseを取得している場合はこの手順は不要です。

そして、次のようにプログラムします。

VB版

Option Strict On

Imports WebGrease
Imports WebGrease.Configuration
Imports System.Reflection

Module Module1

    Sub Main()

        Dim css As New Text.StringBuilder(64)

        css.AppendLine("body{")
        css.AppendLine(" background:#99CCFF;")
        css.AppendLine("}")
        css.AppendLine("")
        css.AppendLine("img{")
        css.AppendLine(" border:0px;")
        css.AppendLine("}")

        Console.WriteLine("ミニファイ前")
        Console.WriteLine(css.ToString)
        Console.WriteLine()

        Dim minifier As CssMinifier = GenerateCssMinifier()
        Dim minifiedCss As String = minifier.Minify(css.ToString)

        'body{background:#9cf}img{border:0}
        Console.WriteLine("ミニファイ後")
        Console.WriteLine(minifiedCss)

    End Sub

    Private Function GenerateCssMinifier() As CssMinifier
        Dim constructor As ConstructorInfo =
                    GetType(WebGreaseConfiguration).GetConstructor(
                    BindingFlags.NonPublic Or BindingFlags.Instance,
                    Type.DefaultBinder,
                    Type.EmptyTypes,
                    Nothing)

        Dim config As WebGreaseConfiguration = DirectCast(constructor.Invoke(Nothing), WebGreaseConfiguration)

        Dim minifier As New CssMinifier(New WebGreaseContext(config))

        Return minifier
    End Function

End Module
■リスト1:VB CSSをミニファイする

C#版

using WebGrease;
using WebGrease.Configuration;
using System.Reflection;
using System;

namespace ConsoleApp2
{
    class Program
    {
        static void Main(string[] args)
        {
            System.Text.StringBuilder css = new System.Text.StringBuilder(64);

            css.AppendLine("body{");
            css.AppendLine(" background:#99CCFF;");
            css.AppendLine("}");
            css.AppendLine("");
            css.AppendLine("img{");
            css.AppendLine(" border:0px;");
            css.AppendLine("}");

            Console.WriteLine("ミニファイ前");
            Console.WriteLine(css.ToString());
            Console.WriteLine();

            CssMinifier minifier = GenerateCssMinifier();
            string minifiedCss = minifier.Minify(css.ToString());

            //body{background:#9cf}img{border:0}
            Console.WriteLine("ミニファイ後");
            Console.WriteLine(minifiedCss);
        } //Main

        private static CssMinifier GenerateCssMinifier()
        {
            ConstructorInfo constructor =
                        typeof(WebGreaseConfiguration).GetConstructor(
                        BindingFlags.NonPublic | BindingFlags.Instance,
                        Type.DefaultBinder,
                        Type.EmptyTypes,
                        null);

            WebGreaseConfiguration config = constructor.Invoke(nullas WebGreaseConfiguration;

            CssMinifier minifier = new CssMinifier(new WebGreaseContext(config));

            return minifier;
        } //GenerateCssMinifier
    }
}
■リスト2:C# CSSをミニファイする

CSSをミニファイするには WebGreaseのCssMinifier.Minifyメソッドを呼ぶだけです。 そして、このメソッドは引数にミニファイ前のCSSの内容を文字列に指定すると、戻り値にミニファイ後のCSSの文字列が返ってくるというシンプルな仕様です。

ただ、CssMinifierクラスのコンストラクターの引数に、internal(VBの場合Friend)にアクセスしないと生成できないオブジェクトがあり、上記の例ではリフレクションを使ってアクセスしています。

ミニファイは空白や改行を削減するだけでなく、色の指定・単位の指定も縮められるところは縮められています。