2014年11月23日日曜日

MavenからGruntを起動する"grunt-maven-plugin"を使ってみました

みなさまはMavenプロジェクトでJSの結合やミニファイをどうなされていますか??

いろいろ探しているとMavenからGruntを起動するMavenプラグインを発見したので それについて調べてみたいと思います。


allegro/grunt-maven-plugin


"Grunt + Maven integration done right"
https://github.com/allegro/grunt-maven-plugin


Spring Bootのプロジェクトをサンプルで作成


Gruntを埋め込む対象としてSpring Bootのプロジェクトを作成しました。 Spring Bootの利用方法については下記ブログとかスライドをご参考ください〜


gitの管理からgrunt-mavenの作業場所を外す


.gitignoreにgrunt-mavenがJavaScript等の加工作業する場所を追加しました。
target-grunt
GitHub: .gitignore


nmp installする(Gruntで使用するパッケージ)を設定


maven-gruntで npm installするパッケージを指定します。"target-grunt"の中にnode_modulesがインストールされます。
{
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-cli": "~0.1.6",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-maven": "~1.1.0",
    "grunt-contrib-clean": "~0.6.0"
  }
}
  
GitHub: src/main/resources/static/package.json


pom.xmlの情報をGruntに渡すファイルを設定


Pom/Project propertiesの値をファイルに書き込んでほしいものを指定する(た、多分。。調査不足)
{
  "version": "${project.version}"
}
  
src/main/resources/static/maven-properties.json

プロパティの種類は下記を参考にさせていただきました!ありがとうございます。
ねこだいすき:pom.xmlからプロパティ取得


Mavenから呼び出すGruntファイルの準備


例として複数のJavaScriptを結合してtarget/classesの中に結合した結果のJavaScriptファイルをコピーする
module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        gruntMavenProperties: grunt.file.readJSON('grunt-maven.json'),
        mavenPrepare: {
            options: {
                resources: ['**']
            },
            dev: {}
        },
        concat: {
            files: {
                src: ['js/src/namespace.js', 'js/src/**/*.js', 'js/src/main.js'],
                dest: 'js/app.min.js'
            }
        },
        clean: {
            js: [
                "js/**/*.js",
                "!js/**/*.min.js"
            ]
        },
        mavenDist: {
            options: {
                warName: "classes",
                deliverables: ["js/**/*.min.js"]
            },
            dev: {}
        }
    });

    grunt.loadNpmTasks('grunt-maven');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('default', ['mavenPrepare', 'concat', 'mavenDist', 'clean']);
};
  
src/main/resources/static/Gruntfile.js


MavenからGruntを起動


Maven pluginsの中に↓追加しました。
<plugin>
            <groupId>pl.allegro</groupId>
            <artifactId>grunt-maven-plugin</artifactId>
            <version>1.4.1</version>
            <configuration>
                <sourceDirectory>${basedir}/src/main/resources</sourceDirectory>
                <gruntExecutable>node_modules/grunt-cli/bin/grunt</gruntExecutable>
                <runGruntWithNode>true</runGruntWithNode>
                <filteredResources>
                    <filteredResource>maven-properties.json</filteredResource>
                </filteredResources>
            </configuration>
            <executions>
                <execution>
                    <goals>
                        <goal>create-resources</goal>
                        <goal>npm</goal>
                        <goal>grunt</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
     </plugins>
  
pom.xml

これで Mavenのcompile時にGruntを起動するようになりました。
サンプルをGitHubにあげています。
参考になれば幸いです〜。

0 件のコメント:

コメントを投稿