projects / examples / maven-grunt-integration / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 3b96f5b)
Simple Frontend-Project based on nodjs and grunt
authorKai Moritz <kai@juplo.de>
Fri, 21 Aug 2015 17:52:01 +0000 (19:52 +0200)
committerKai Moritz <kai@juplo.de>
Sat, 22 Aug 2015 22:06:35 +0000 (00:06 +0200)
In this example the layout and the corresponding CSS is developed in a way,
that the outcome in the dist-directory is directly suitable for the
integration in the Spring-Thymeleaf-App.

A http-server could be started together with a watch, to ease the developmen
of the HTML and CSS.

The layout is kept simple and meant only to make the unstyled and the styled
version clearly distingushable.

.gitignore patch | blob | history
src/main/frontend/Gruntfile.js [new file with mode: 0644] patch | blob
src/main/frontend/html/layout.html [new file with mode: 0644] patch | blob
src/main/frontend/less/frontend.less [new file with mode: 0644] patch | blob
src/main/frontend/package.json [new file with mode: 0644] patch | blob

diff --git a/.gitignore b/.gitignore
index eb5a316..be8c7ad 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
 target
+src/main/frontend/node_modules
+src/main/frontend/dist
diff --git a/src/main/frontend/Gruntfile.js b/src/main/frontend/Gruntfile.js
new file mode 100644 (file)
index 0000000..2b9241e
--- /dev/null
+++ b/src/main/frontend/Gruntfile.js
@@ -0,0 +1,58 @@
+module.exports = function(grunt) {
+
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+
+  grunt.initConfig({
+
+    pkg: grunt.file.readJSON('package.json'),
+
+    copy: {
+      html: {
+        expand: true,
+        cwd: 'html',
+        src: '**/*.html',
+        dest: 'dist/thymeleaf/templates',
+      }
+    },
+
+    less: {
+      compile: {
+        options: {
+          sourceMapURL: 'frontend.css.map',
+          sourceMapFilename: 'dist/css/frontend.css.map'
+        },
+        src: 'less/frontend.less',
+        dest: 'dist/css/frontend.css'
+      }
+    },
+
+    watch: {
+      copy: {
+        files: [ 'html/**/*.html' ],
+        tasks: [ 'copy' ]
+      },
+      less: {
+        files: [ 'less/**/*.less' ],
+        tasks: [ 'less' ]
+      }
+    }
+
+  });
+
+  grunt.registerTask('http-server', function() {
+
+    grunt.util.spawn({
+      cmd: 'node_modules/http-server/bin/http-server',
+      args: [ 'dist' ],
+      opts: { stdio: 'inherit' }
+    });
+    
+  });
+
+  grunt.registerTask('default', [ 'copy', 'less' ]);
+
+  grunt.registerTask('server', [ 'default', 'http-server', 'watch' ]);
+
+};
diff --git a/src/main/frontend/html/layout.html b/src/main/frontend/html/layout.html
new file mode 100644 (file)
index 0000000..be958d5
--- /dev/null
+++ b/src/main/frontend/html/layout.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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-Template</title>
+
+  <link rel="stylesheet" type="text/css" href="../../css/frontend.css" />
+
+</head>
+
+<body>
+
+  <header>
+    <h2>yourSHOUTER - Startseite</h2>
+    <hr />
+    <!-- Navigation -->
+    <nav id="menu" class="navbar navbar-submenu navbar-fixed-top">
+      <h3 class="sr-only">Navigation</h3>
+      <ul>
+        <li><strong>Home</strong></li>
+        <li><a href="#a">A</a></li>
+        <li><a href="#b">B</a></li>
+        <li><a href="#c">C</a></li>
+      </ul>
+    </nav>
+    <hr />
+  </header>
+
+
+  <main>
+
+    <article id="top">
+      <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 />
+    <p>Brought to you by <a href="http://juplo.de/">juplo.de</a>!</p>
+  </footer>
+
+</body>
+
+</html>
diff --git a/src/main/frontend/less/frontend.less b/src/main/frontend/less/frontend.less
new file mode 100644 (file)
index 0000000..8b0d18c
--- /dev/null
+++ b/src/main/frontend/less/frontend.less
@@ -0,0 +1,73 @@
+@background: #111;
+@normal:     #090;
+@light:      #9f9;
+@lighter:    #fff;
+
+
+body
+{
+  color: @normal;
+  background-color: @background;
+  font-size: 20px;
+}
+a
+{
+  color: @light;
+  text-decoration: none;
+  &:hover,
+  &:focus
+  {
+    color: @lighter;
+    text-decoration: underline;
+  }
+  &:active
+  {
+    color: @lighter;
+  }
+}
+hr
+{
+  margin: 0;
+  border-color: @normal;
+  clear: both;
+}
+
+header
+{
+  margin-bottom: 3em;
+}
+nav
+{
+  > h3
+  {
+    display: none;
+  }
+  > ul
+  {
+    margin: 0;
+    padding: 0;
+    > li
+    {
+      list-style-type: none;
+      float: left;
+      margin: .5em .5em .5em 0;
+      &:before
+      {
+        content: '::';
+        margin-right: .5em;
+      }
+      &:first-child
+      {
+        margin-left: .5em;
+        &:before
+        {
+          content: none;
+        }
+      }
+    }
+  }
+}
+footer
+{
+  margin-top: 3em;
+}
diff --git a/src/main/frontend/package.json b/src/main/frontend/package.json
new file mode 100644 (file)
index 0000000..f458b5a
--- /dev/null
+++ b/src/main/frontend/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "description": "Example Frontend Development-Folder",
+  "devDependencies": {
+    "http-server": "~0.8.0",
+    "grunt": "~0.4.5",
+    "grunt-contrib-copy": "~0.8.1",
+    "grunt-contrib-less": "~1.0.1",
+    "grunt-contrib-watch": "~0.6.1"
+  }
+}
Unnamed repository; edit this file 'description' to name the repository.