Java および Maven での Grunt を使用した JavaScript タスクの自動化
最終更新日 2019年12月16日(月)
Table of Contents
Grunt はタスクランナーユーティリティです。縮小、難読化、テストなど、さまざまな JavaScript タスクを自動化するために使用されます。Sass、CSS、さらには HTML など、他の種類の静的コンテンツの支援にも使用されます。
この記事では、Maven プロジェクトで Grunt を使用して JavaScript ファイルを縮小する方法を学びます。これを基礎にして、JavaScript ファイルを検証する Grunt プラグインをさらに追加したり、Sass を CSS にコンパイルしたり、PhantomJS で Jasmine テストを実行したりできるようになります。
このチュートリアルは、Heroku で Java プロジェクトをすでに実行していることが前提です。まだ実行していない場合は、Java Grunt サンプルプロジェクトをダウンロードし、スターターガイド (Java) に従って Heroku にデプロイします。
複数の buildpack の使用
Grunt を依存関係として管理するためには、Node.js と Java 両方の buildpack を使用するようにプロジェクトを設定する必要があります。これは heroku buildpacks
コマンドで行います。
まず、次のように実行して、Node.js と Java の buildpack をアプリケーションに追加します。
$ heroku buildpacks:add heroku/nodejs
$ heroku buildpacks:add heroku/java
続いて、次のコマンドを実行して実行順序を確認します。
$ heroku buildpacks
=== nameless-brushlands-4859 Buildpack
1. heroku/nodejs
2. heroku/java
Node.js buildpack が機能するためには、アプリの package.json
ファイルを見つける必要があります。このファイルを使用して Grunt の依存関係を定義することもできます。プロジェクトのルートに package.json
ファイルを作成し、その中に次のコードを記述します。
{
"name": "java-grunt",
"dependencies": {
"grunt-cli": "0.1.13",
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.5.0"
}
}
これにより、grunt-cli
がプライマリ依存関係として定義されます。また、grunt
自体と grunt-contrib-uglify
モジュールが依存関係として定義されます。これらはすぐに Maven から使用します。
ここで、次のようにしてこのファイルを Git リポジトリに追加します。
$ git add package.json
$ git commit -m "added package.json"
次のデプロイ時に、buildpack によって npm
がインストールされた後、これによって Grunt がインストールされます。ただし、デプロイする前に、プロジェクトの Java 側を設定する必要があります。
Maven からの Grunt の呼び出し
grunt-maven-plugin を設定に追加することによって、Maven から Grunt を使用できます。このプラグインによって、Grunt のタスクを Maven のビルドプロセスに統合できます。追加するには、pom.xml
ファイルを開き、次のコードを <project>
要素に追加します。
<build>
...
<plugins>
...
<plugin>
<groupId>pl.allegro</groupId>
<artifactId>grunt-maven-plugin</artifactId>
<version>1.4.1</version>
<executions>
<execution>
<goals>
<goal>npm</goal>
<goal>grunt</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
このコードは、npm
と grunt
を実行するよう Maven に指示します。前者は環境を準備し、後者は Gruntfile.js
で定義された自動化タスクを実行します。もちろん、これが機能するためには Gruntfile.js
ファイルが必要です。プロジェクトのルートディレクトリにファイルを作成し、次のコードをそのファイルに追加します。
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
core: {
files: [{
expand: true,
cwd: 'src/main/resources',
src: 'public/js/**/*.js',
dest: "target/classes",
ext: '.min.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
この単純な設定は、grunt-contrib-uglify モジュールをロードし、それを使用して、src/main/resources/public
ディレクトリ下のすべての JavaScript ファイルを縮小 JavaScript ファイル (圧縮版の JavaScript コード) に変換して target/classes/public/js
ディレクトリに配置します。新しいファイルは拡張子が .min.js
になりますが、ベース名は同じです。
これらのファイルは、次のようにしてアプリケーションの HTML ファイルで参照できます。
<script src="js/index.min.js"></script>
Heroku Java Grunt の例では、index.js
ファイルに次のコードが含まれています。
$(function () {
$('body p').append(" and Javascript!");
});
そして、index.html ファイルには次のコードが含まれています。
<html>
<head>
<title>Java Grunt Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/index.min.js"></script>
</style>
</head>
<body>
<p>Hello from Java Grunt!</p>
</body>
</html>
ここで maven を実行してプロジェクトをビルドします (これが機能するためには、npm のインストールと grunt のインストールが完了している必要があります)。
$ mvn clean package
[INFO] Scanning for projects...
...
[INFO] --- grunt-maven-plugin:1.4.1:npm (default) @ java-grunt ---
[INFO] OS Name: Mac OS X
npm WARN package.json java-grunt@ No description
npm WARN package.json java-grunt@ No repository field.
grunt-cli@0.1.13 ../node_modules/grunt-cli
├── nopt@1.0.10 (abbrev@1.0.5)
├── resolve@0.3.1
└── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)
grunt@0.4.5 ../node_modules/grunt
├── which@1.0.8
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── rimraf@2.2.8
├── colors@0.6.2
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── nopt@1.0.10 (abbrev@1.0.5)
├── exit@0.1.2
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── lodash@0.9.2
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
└── js-yaml@2.0.5 (argparse@0.1.16, esprima@1.0.4)
grunt-contrib-uglify@0.5.1 ../node_modules/grunt-contrib-uglify
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── lodash@2.4.1
├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, optimist@0.3.7, source-map@0.1.34)
└── maxmin@0.2.2 (figures@1.3.5, pretty-bytes@0.1.2, gzip-size@0.2.0)
[INFO]
[INFO] --- grunt-maven-plugin:1.4.1:grunt (default) @ java-grunt ---
[INFO] OS Name: Mac OS X
Running "uglify:core" (uglify) task
Done, without errors.
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 6.156 s
[INFO] Finished at: 2014-12-11T09:54:44-06:00
[INFO] Final Memory: 23M/227M
[INFO] ------------------------------------------------------------------------
プロセスが終了したら、target/classes/public/js/index.min.js
の内容を確認します。JavaScript コードが 1 行に短縮 (つまり “縮小”) されていることがわかります。
ここで、heroku local
を実行してアプリケーションを実行し、ブラウザを開いてインデックスページを表示します。次のテキストが表示されます。
Hello from Java Grunt! and Javascript!
最後に、変更を Git リポジトリに追加し、コードを Heroku にプッシュします。
$ git add Gruntfile.js pom.xml
$ git commit -m "added grunt task"
$ git push heroku master
...
remote: -----> Fetching custom git buildpack... done
remote: -----> Multipack app detected
remote: -----> Node.js app detected
remote: Installing node modules
...
remote: -----> Fetching custom git buildpack... done
remote: -----> Java app detected
remote: -----> Installing OpenJDK 1.7... done
remote: -----> Installing Maven 3.2.3... done
...
remote: [INFO] --- grunt-maven-plugin:1.4.1:npm (default) @ java-grunt ---
remote: [INFO] OS Name: Linux
...
remote: Running "uglify:core" (uglify) task
remote:
remote: Done, without errors.
...
remote: Verifying deploy... done.
heroku open
を実行してアプリケーションを表示できます。Grunt ビルドが実行され、アプリケーションは縮小された JavaScript ファイルを使用しています。
grunt-contrib-watch
や grunt-contrib-cssmin
などのモジュールをさらに package.json
ファイルに追加して、それらのライブラリを Gruntfile.js
設定で使用できるようになりました。Grunt の使用についての詳細は、Grunt のドキュメントを参照してください。Maven での Grunt の使用についての詳細は、grunt-maven-plugin のドキュメントを参照してください。