From 49c05eefab554f1fe6a2eaa0c11774d0f4c9cae4 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Fri, 21 Aug 2015 19:52:01 +0200 Subject: [PATCH] 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. --- .gitignore | 2 + src/main/frontend/Gruntfile.js | 58 ++++++++++++++++++ src/main/frontend/html/layout.html | 89 ++++++++++++++++++++++++++++ src/main/frontend/less/frontend.less | 73 +++++++++++++++++++++++ src/main/frontend/package.json | 12 ++++ 5 files changed, 234 insertions(+) create mode 100644 src/main/frontend/Gruntfile.js create mode 100644 src/main/frontend/html/layout.html create mode 100644 src/main/frontend/less/frontend.less create mode 100644 src/main/frontend/package.json 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 @@ + + + + + + + + + + Layout-Template + + + + + + + +
+

yourSHOUTER - Startseite

+
+ + +
+
+ + +
+ +
+

Layout-Template

+

+ 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. +

+

Duis aute irure dolor

+
    +
  • Operators and other mathematical stuff: -+/*
    • +
  • + Characters offten used in programming languages: + {(<>)}@$?%*#;:&/\!^"'`~ +
    • +
  • Special german characters: ÄäÖöÜü
    • +
  • Other special characters: @?¢§%°
    • +
+

Excepteur sint occaecat cupidatat

+

+ 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. +

+

+ 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. +

+
+ +
+ + + + + + 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" + } +} -- 2.20.1