Powered by Google App Engine

Gradle

 

Gradleでjavascriptをminifyする!

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

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

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

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

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

◯ 広告

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

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

Gradle Javascript Plugin

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

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

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

ちなみにこのpluginですが、google closure compilerを利用しています。

google closure compiler

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

apply plugin: 'js'
javascript.source {
    dev {
        js {
            srcDir "../test-web/src/main/webapp/static/js"
            include "**/*.js"
            exclude "**/*.min.js"
        }
    }
}
combineJs {
    source = javascript.source.dev.js.files
    dest = file("${buildDir}/all.js")
}
minifyJs {
    source = combineJs
    dest = file("${buildDir}/all-min.js")
    closure {
        warningLevel = 'QUIET'
    }
}

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

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

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

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

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

// file1.jsの中身は以下の通りです
function func1 () {
    // commnet
    alert( 1); // comment
    /*
    console.log('1');
    */
}
// file2.jsの中身は以下の通りです
function func2() {
    // comment
    alert(2 ); // comment
    /*
    console.log('2');
    */
}
// file3.jsの中身は以下の通りです
function func3() {
    // commnet
    alert( 3 ); // comment
    /*
    console.log('3');
    */
}

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

test-parent tree$ gradle minifyJs
:combineJs
:minifyJs

BUILD SUCCESSFUL

Total time: 7.987 secs

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

function func1(){alert(1)}function func2(){alert(2)}function func3(){alert(3)};

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

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

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

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

apply plugin: 'js'
javascript.source {
    dev {
        js {
            srcDir "../treefigure-web/src/main/webapp/static/js"
            include "**/*.js"
            exclude "**/*.min.js"
        }
    }
}
javascript.source.dev.js.files.eachWithIndex { jsFile, i ->
    tasks.add(name: "minifyJs${i}", type: com.eriwen.gradle.js.tasks.MinifyJsTask) {
        source = jsFile
        dest = jsFile
    }
}
task allMinifyJs(dependsOn: tasks.matching { Task task ->
        task.name.startsWith("minifyJs")
    }
)

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

理由は簡単です。google closure compilerは1タスクで1ファイルしか処理できないからです。

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

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

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

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

◯ 広告