Skip Navigation
Show nav
Heroku Dev Center
  • Get Started
  • ドキュメント
  • Changelog
  • Search
  • Get Started
    • Node.js
    • Ruby on Rails
    • Ruby
    • Python
    • Java
    • PHP
    • Go
    • Scala
    • Clojure
  • ドキュメント
  • Changelog
  • More
    Additional Resources
    • Home
    • Elements
    • Products
    • Pricing
    • Careers
    • Help
    • Status
    • Events
    • Podcasts
    • Compliance Center
    Heroku Blog

    Heroku Blog

    Find out what's new with Heroku on our blog.

    Visit Blog
  • Log inorSign up
View categories

Categories

  • Heroku のアーキテクチャ
    • Dyno (アプリコンテナ)
    • スタック (オペレーティングシステムイメージ)
    • ネットワーキングと DNS
    • プラットフォームポリシー
    • プラットフォームの原則
  • コマンドライン
  • デプロイ
    • Git を使用したデプロイ
    • Docker によるデプロイ
    • デプロイ統合
  • 継続的デリバリー
    • 継続的統合
  • 言語サポート
    • Node.js
    • Ruby
      • Bundler の使用
      • Rails のサポート
    • Python
      • Python でのバックグランドジョブ
      • Django の使用
    • Java
      • Maven の使用
      • Java でのデータベース操作
      • Play Framework の使用
      • Spring Boot の使用
      • Java の高度なトピック
    • PHP
    • Go
      • Go の依存関係管理
    • Scala
    • Clojure
  • データベースとデータ管理
    • Heroku Postgres
      • Postgres の基礎
      • Postgres Getting Started
      • Postgres のパフォーマンス
      • Postgres のデータ転送と保持
      • Postgres の可用性
      • Postgres の特別なトピック
    • Heroku Redis
    • Apache Kafka on Heroku
    • その他のデータストア
  • モニタリングとメトリクス
    • ログ記録
  • アプリのパフォーマンス
  • アドオン
    • すべてのアドオン
  • 共同作業
  • セキュリティ
    • アプリのセキュリティ
    • ID と認証
    • コンプライアンス
  • Heroku Enterprise
    • Private Space
      • インフラストラクチャネットワーキング
    • Enterprise Accounts
    • Enterprise Team
    • Heroku Connect (Salesforce 同期)
      • Heroku Connect の管理
      • Heroku Connect のリファレンス
      • Heroku Connect のトラブルシューティング
    • シングルサインオン (SSO)
  • パターンとベストプラクティス
  • Heroku の拡張
    • Platform API
    • アプリの Webhook
    • Heroku Labs
    • アドオンのビルド
      • アドオン開発のタスク
      • アドオン API
      • アドオンのガイドラインと要件
    • CLI プラグインのビルド
    • 開発ビルドパック
    • Dev Center
  • アカウントと請求
  • トラブルシューティングとサポート
  • Integrating with Salesforce
  • 言語サポート
  • Java
  • Maven の使用
  • Java および Maven での Grunt を使用した JavaScript タスクの自動化

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

日本語 — Switch to English

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

Table of Contents

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

関連カテゴリー

  • Maven の使用
管理されていない依存関係を Maven プロジェクトに追加する カスタム Maven 設定ファイルの使用

Information & Support

  • Getting Started
  • Documentation
  • Changelog
  • Compliance Center
  • Training & Education
  • Blog
  • Podcasts
  • Support Channels
  • Status

Language Reference

  • Node.js
  • Ruby
  • Java
  • PHP
  • Python
  • Go
  • Scala
  • Clojure

Other Resources

  • Careers
  • Elements
  • Products
  • Pricing

Subscribe to our monthly newsletter

Your email address:

  • RSS
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku Blog
    • Heroku News Blog
    • Heroku Engineering Blog
  • Heroku Podcasts
  • Twitter
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku
    • Heroku Status
  • Facebook
  • Instagram
  • Github
  • LinkedIn
  • YouTube
Heroku is acompany

 © Salesforce.com

  • heroku.com
  • Terms of Service
  • Privacy
  • Cookies
  • Cookie Preferences