From: Kai Moritz <kai@juplo.de>
Date: Fri, 21 Aug 2015 17:52:01 +0000 (+0200)
Subject: Simple Frontend-Project based on nodjs and grunt
X-Git-Tag: notnagel~1
X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=49c05eefab554f1fe6a2eaa0c11774d0f4c9cae4;p=examples%2Fmaven-grunt-integration
Simple Frontend-Project based on nodjs and grunt
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.
---
diff --git a/.gitignore b/.gitignore
index eb5a316..be8c7ad 100644
--- 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
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
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:
+ {(<>)}@$?%*#;:&/\!^"'`~
+ </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
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
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"
+ }
+}