前回のままだとGruntfile.jsやpackage.jsonなどがtargetに含まれてしまいます。。。なのでこれを削除したいと思います。


target/classes
├── static
│   ├── Gruntfile.js
│   ├── js
│   │   ├── app.min.js
│   │   └── src
│   │       ├── Doramon.js
│   │       ├── main.js
│   │       └── namespace.js
│   ├── maven-properties.json
│   └── package.json

Mavenの情報を取得してtargetのパスを取得します。

今回はこれのoutputDirectoryを使います。

{
  "directory": "${project.build.directory}",
  "outputDirectory": "${project.build.outputDirectory}",
  "name": "${project.name}",
  "version": "${project.version}",
  "finalName": "${project.build.finalName}"
}

GitHub: src/main/resources/static/maven-properties.json

Gruntからtargetのパス情報を取得して不要ファイルの削除を行います。

ついでに"clean:before"という作業前に前回のJavaScriptを削除する処理を追加

module.exports = function (grunt) {
    grunt.initConfig({
        ・・・省略・・・
        mvnProp: grunt.file.readJSON('maven-properties.json'),
        ・・・省略・・・
        clean: {
            before: {
                options: {  force: true  },
                files: { src: [ "js/**/*.js" ] }
            },
            after: {
                options: {  force: true  },
                files: {
                    src: [
                        "<%= mvnProp.outputDirectory %>/static/Gruntfile.js",
                        "<%= mvnProp.outputDirectory %>/static/package.json",
                        "<%= mvnProp.outputDirectory %>/static/maven-properties.json",
                        "<%= mvnProp.outputDirectory %>/static/js/**/*.js"
                    ]
                }
            }
        },
        ・・・省略・・・
    grunt.registerTask('beforeClean', ['clean:before']);
    grunt.registerTask('default', ['mavenPrepare', 'concat', 'clean:after', 'mavenDist']);
};

GitHub: src/main/resources/static/Gruntfile.js

※ ※　修正しました〜。goalsのgoalに　create-resources　がないとnpm installできませんでした。 ※

Gruntの"clean:before"をMavenのinitializeフェーズで動かす

<execution>
    <id>gruntInit</id>
    <phase>initialize</phase>
    <configuration>
        <gruntOptions>
            <gruntOption>beforeClean</gruntOption>
        </gruntOptions>
    </configuration>
    <goals>
        <goal>create-resources</goal>
        <goal>npm</goal>
        <goal>grunt</goal>
    </goals>
</execution>

GitHub: pom.xml

これで不要なファイルが消えました。


  target/classes
├── static
│   └── js
│       ├── app.min.js
│       └── src

サンプルを GitHub にあげています。参考になれば幸いです〜。

みなさまは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にあげています。
参考になれば幸いです〜。

JavaとJavaScriptの間に

2014年11月24日月曜日

grunt-maven-pluginを使用したプロジェクトでtarget中の不要ファイルを削除する