2014年11月24日月曜日

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

前回のままだと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 にあげています。 参考になれば幸いです〜。

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