Integration of the Grunt-Frontend- with the Maven-Backend-Project

diff --git a/.gitignore b/.gitignore
index be8c7ad..28dba0a 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 target
-src/main/frontend/node_modules
+node
+**/node_modules
 src/main/frontend/dist

diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644 (file)
index 0000000..d1d5acc
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,34 @@
+module.exports = function(grunt) {
+
+  grunt.loadNpmTasks('grunt-newer');
+
+  grunt.registerTask('frontend','Build HTML & CSS for Frontend', function() {
+    var
+    done = this.async(),
+    path = './src/main/frontend';
+
+    grunt.util.spawn({
+      cmd: 'npm',
+      args: ['install'],
+      opts: { cwd: path, stdio: 'inherit' }
+    }, function (err, result, code) {
+      if (err || code > 0) {
+        grunt.fail.warn('Failed installing node modules in "' + path + '".');
+      }
+      else {
+        grunt.log.ok('Installed node modules in "' + path + '".');
+      }
+
+      process.chdir(path);
+      require(path + '/Gruntfile.js')(grunt);
+      grunt.task.run('newer:copy');
+      grunt.task.run('newer:less');
+
+      done();
+    });
+  });
+
+
+  grunt.registerTask('default', [ 'frontend' ]);
+
+};

diff --git a/package.json b/package.json
new file mode 100644 (file)
index 0000000..81fefa0
--- /dev/null
+++ b/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "maven-grunt-integration",
+  "description": "Example, how to ingegrat maven with a frontend developed with Grunt",
+  "homepage": "http://juplo.de/maven-grunt-integration",
+  "author": "kai@juplo.de",
+  "version": "1.0.0",
+  "devDependencies": {
+    "grunt": "~0.4.5",
+    "grunt-cli": "~0.1.13",
+    "grunt-newer": "~1.1.1"
+  }
+}

diff --git a/pom.xml b/pom.xml
index 3cb5566..243cbf8 100644 (file)
--- a/pom.xml
+++ b/pom.xml
@@ -7,7 +7,7 @@
   <groupId>de.juplo</groupId>
   <artifactId>maven-grunt-integration</artifactId>
   <name>Juplo - Example Integration of Maven and Grunt</name>
-  <version>0.1</version>
+  <version>1.0.0</version>
   <packaging>war</packaging>
   <url>http://www.juplo.de/maven-grunt-integration</url>
 
@@ -134,6 +134,18 @@
           <showWarnings>true</showWarnings>
         </configuration>
       </plugin>
+      <plugin>
+        <groupId>org.apache.maven.plugins</groupId>
+        <artifactId>maven-war-plugin</artifactId>
+        <version>2.6</version>
+        <configuration>
+          <webResources>
+            <resource>
+              <directory>src/main/frontend/dist</directory>
+            </resource>
+          </webResources>
+        </configuration>
+      </plugin>
       <plugin>
         <groupId>org.apache.maven.plugins</groupId>
         <artifactId>maven-source-plugin</artifactId>
@@ -153,9 +165,44 @@
         <artifactId>jetty-maven-plugin</artifactId>
         <version>9.2.13.v20150730</version>
         <configuration>
+          <webApp>
+            <resourceBases>
+              <resourceBase>src/main/frontend/dist</resourceBase>
+              <resourceBase>src/main/webapp</resourceBase>
+            </resourceBases>
+          </webApp>
           <useTestScope>true</useTestScope>
         </configuration>
       </plugin>
+      <plugin>
+        <groupId>com.github.eirslett</groupId>
+        <artifactId>frontend-maven-plugin</artifactId>
+        <version>0.0.24</version>
+        <executions>
+          <execution>
+            <id>install node and npm</id>
+            <goals>
+              <goal>install-node-and-npm</goal>
+            </goals>
+            <configuration>
+              <nodeVersion>v0.10.18</nodeVersion>
+              <npmVersion>1.3.8</npmVersion>
+            </configuration>
+          </execution>
+          <execution>
+            <id>npm install</id>
+            <goals>
+              <goal>npm</goal>
+            </goals>
+          </execution>
+          <execution>
+            <id>grunt build</id>
+            <goals>
+              <goal>grunt</goal>
+            </goals>
+          </execution>
+        </executions>
+      </plugin>
     </plugins>
   </build>
 

diff --git a/src/main/frontend/html/layout.html b/src/main/frontend/html/layout.html
index be958d5..1e84a84 100644 (file)
--- a/src/main/frontend/html/layout.html
+++ b/src/main/frontend/html/layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org">
 
 <head>
 
@@ -7,21 +7,21 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <title>Layout-Template</title>
+  <title layout:title-pattern="Maven/Grunt-Integration - $CONTENT_TITLE">Layout-Template</title>
 
-  <link rel="stylesheet" type="text/css" href="../../css/frontend.css" />
+  <link rel="stylesheet" type="text/css" href="../../css/frontend.css" th:hre="@{'/css/frontend.css'}" />
 
 </head>
 
 <body>
 
   <header>
-    <h2>yourSHOUTER - Startseite</h2>
+    <h2 th:text="yourSHOUTER">yourSHOUTER - Startseite</h2>
     <hr />
     <!-- Navigation -->
     <nav id="menu" class="navbar navbar-submenu navbar-fixed-top">
       <h3 class="sr-only">Navigation</h3>
-      <ul>
+      <ul layout:fragment="menu">
         <li><strong>Home</strong></li>
         <li><a href="#a">A</a></li>
         <li><a href="#b">B</a></li>
@@ -34,7 +34,7 @@
 
   <main>
 
-    <article id="top">
+    <article id="top" layout:fragment="content">
       <h1>Layout-Template</h1>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

diff --git a/src/main/webapp/thymeleaf/templates/layout.html b/src/main/webapp/thymeleaf/templates/layout.html
deleted file mode 100644 (file)
index db23fa2..0000000
--- a/src/main/webapp/thymeleaf/templates/layout.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org">
-
-<head>
-
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-  <title layout:title-pattern="Maven/Grunt-Integration - $CONTENT_TITLE">Layout-Template</title>
-
-</head>
-
-<body>
-
-  <header>
-    <h2 th:text="yourSHOUTER">yourSHOUTER - Startseite</h2>
-    <hr />
-    <!-- Navigation -->
-    <nav id="menu" class="navbar navbar-submenu navbar-fixed-top">
-      <h3 class="sr-only">Navigation</h3>
-      <ul layout:fragment="menu">
-        <li><strong>Home</strong></li>
-        <li><a href="#">A</a></li>
-        <li><a href="#">B</a></li>
-        <li><a href="#">C</a></li>
-      </ul>
-    </nav>
-    <hr />
-  </header>
-
-
-  <main>
-
-    <article layout:fragment="content">
-      <h1>Layout-Template</h1>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h2>Duis aute irure dolor</h2>
-      <ul>
-        <li>Operators and other mathematical stuff: -+/*</li>
-        <li>
-          Characters offten used in programming languages:
-          {(&lt;&gt;)}@$?%*#;:&amp;/\!^&#034;&#039;`~
-        </li>
-        <li>Special german characters: ÄäÖöÜü</li>
-        <li>Other special characters: @?¢§%°</li>
-      </ul>
-      <h2>Excepteur sint occaecat cupidatat</h2>
-      <p>
-        Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        <strong>Ut enim ad minim veniam, quis nostrud <em>exercitation
-        ullamco</em> laboris nisi ut aliquip ex ea commodo consequat</strong>.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse
-        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-        cupidatat non proident, sunt in culpa qui officia deserunt mollit
-        anim id est laborum.
-      </p>
-    </article>
-
-  </main>
-
-  <footer>
-    <hr />
-    Brought to you by <a href="http://juplo.de/">juplo.de</a>!
-  </footer>
-
-</body>
-
-</html>