Powered by Google App Engine

Gradle

 

Gradleでcssをminifyする!

Gradleでビルドする時はcssを圧縮しましょう!ファイルの結合(combine)と最小化(minify)が可能です。ステージング環境・本番環境でjsのminifyをする事が多いので、是非設定してみて下さい。

新サイト、tree-mapsを公開しました!!

tree-maps: 地図のWEB TOOLの事ならtree-mapsにお任せ!

地図に関するWEB TOOL専門サイトです!!

大画面で大量の緯度経度を一気にプロット、ジオコーディング、DMS<->DEGの相互変換等ができます!

◯ 広告

Gradle自体にcssのcombine・minifyの機能はありません。

従って、Gradle pluginを利用します。

Gradle Css Plugin

インストールの作業は簡単です。単にjarの依存を1個追加するだけです。

build.gradleに以下を追加します。

buildscript {
    repositories { mavenCentral() }
    dependencies {
        classpath 'com.eriwen:gradle-css-plugin:1.2.1'
    }
}

ちなみにこのpluginですが、Yahoo YUI Compressorを利用しています。

Yahoo YUI Compressor

test-parentプロジェクトから、サブプロジェクトに対してcombine + minifyします。

apply plugin: 'css'
css.source {
    dev {
        css {
            srcDir "../test-web/src/main/webapp/static/css"
            include "**/*.css"
            exclude "**/*.min.css"
        }
    }
}
combineCss {
    source = css.source.dev.css.files
    dest = "${buildDir}/all.css"
}
minifyCss {
    source = combineCss
    dest = "${buildDir}/all-min.css"
    yuicompressor {
        lineBreakPos = -1
    }
}

このようなタスクをbuild.gradleに記述し、保存します。

combine・miniFyするcssは、再帰的に*.cssを検出し、全ファイル結合と最小化します。

今回は以下のフォルダ構成・ファイル配置とします。

css
├── file1.css
├── file2.css
└── lib
    └── file3.css

各ファイルの中身は以下の通りです。微妙に半角スペースとコメントを挟みました。

// file1.cssの中身は以下の通りです
/*---------------------------------
hoge1
---------------------------------*/
h1 {
    font-size: 25px /* hoge1 */
}
/* p { font-size: 12px; } */
// file2.cssの中身は以下の通りです
/*---------------------------------
hoge2
---------------------------------*/
h2 {
    font-size: 25px /* hoge2 */
}
/* p { font-size: 12px; } */
// file3.cssの中身は以下の通りです
/*---------------------------------
hoge3
---------------------------------*/
h3 {
    font-size: 25px /* hoge3 */
}
/* p { font-size: 12px; } */

ではこの状態でcombine + minifyを適用してみましょう。

localhost:test-parent tree$ gradle minifyCss
:combineCss
:minifyCss

BUILD SUCCESSFUL

Total time: 8.622 secs

出力されたファイル「all-min.css」を確認してみます。

h1{font-size:25px}h2{font-size:25px}h3{font-size:25px}

ファイルは結合され、コメント・改行・コメント内のコードは削除、不要な半角スペースも除去されました。

通常combineをした方がパフォーマンスや転送量には良い効果があるとされています。

しかし場合によってはcombineしたくないという要望もあるかと思います。

それを考慮し、存在する全cssファイルに対し、個別にminifyしてみましょう。

apply plugin: 'css'
css.source {
    dev {
        css {
            srcDir "../test-web/src/main/webapp/static/css"
            include "**/*.css"
            exclude "**/*.min.css"
        }
    }
}
css.source.dev.css.files.eachWithIndex { cssFile, i ->
    tasks.add(name: "minifyCss${i}", type: com.eriwen.gradle.css.tasks.MinifyCssTask) {
        source = cssFile
        dest = cssFile
        yuicompressor {
            lineBreakPos = -1
        }
    }
}
task allMinifyCss(dependsOn: tasks.matching { Task task ->
        task.name.startsWith("minifyCss")
    }
)

何故わざわざallMinifyCssタスクを作る必要があるのか?と思うかもしれません。

理由は簡単です。Yahoo YUI Compressorは1タスクで1ファイルしか処理できないからです。

なので、cssのファイル数分のタスクを生成して実行しているのです。

なお、このサンプルではminifyタスクのsourceとdestを同じにしています。

SCMでファイルをチェックアウトし、それに対してcssファイルをminifyで上書きしています。

別の場所に出力する事もできますが、今回は上書きしています。

◯ 広告