Java および Maven での Grunt を使用した JavaScript タスクの自動化

最終更新日 2019年12月16日(月)

複数の buildpack の使用
Maven からの Grunt の呼び出し

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 のドキュメントを参照してください。

Categories

Java および Maven での Grunt を使用した JavaScript タスクの自動化

Table of Contents

複数の buildpack の使用

Maven からの Grunt の呼び出し

関連カテゴリー