Hier erkläre ich kurz und bündig, wie man ein neues Webprojekt aufsetzt. Einfach die Seite komplett durchgehen und schon hat man ein funktionierendes Projekt mit dem man schon starten kann.
Wir legen als erstes ein Root Verzeichnis an. Meist bleibt es nicht bei einem einzigen Projekt, das wir darin ablegen. In meinem Projekt legen wir ein „dev/“ Verzeichnis an. Darin wird entwickelt. Im CSS Verzeichnis liegen später die SASS Files. Die Inhalte im „src/“ Verzeichns werden später mit „grunt“ generiert werden. JavaScript Files können z.B. miteinander verbunden, komprimiert und dann im „js/“ Verzeichnis abgelegt werden.
Mögliche Beispiel-Struktur:
/projects/
/projects/name/
/projects/name/dev/ (Arbeitsverzeichnis)
/projects/name/dev/js/
/projects/name/dev/fonts/
/projects/name/dev/css/
/projects/name/src/ (Ausgabeverzeichnis)
/projects/name/src/js/
/projects/name/src/fonts/
/projects/name/src/css/
/projects/name/node_modules/bootstrap (framework)
/projects/name/node_modules/jquery (framework) |
Installieren
Folgende Anwendungen müssen nacheinander installiert werden. Im root Verzeichnis „projects“ installierten Programme müssen nur einmal installiert werden. Andere je Projekt, da sie sich auch unterscheiden könnten.
Programme (global - Beispiel "projects")----------------------------------------- - node (um npm zu installieren) - npm (um grunt zu installieren) - sass Programme (pro Einzelprojekt - Beispiel "name")----------------------------------------- - bootstrap - jquery optional: - git (Versionierungs-Tool) |
Schritte (global – Beispiel „projects“)
- NODE installieren (Commandline)
node -v
- NPM installieren (Commandline)
npm install
- SASS installieren (Commandline)
npm install node-sass
Schritte (pro Einzelprojekt – Beispiel „name“)
- git installieren (optional)
- Erstellen Sie mit dem Befehl npm init eine Datei namens package.json für Ihre Anwendung.
npm init
Es werden ein paar Fragen gestellt, einfach ausfüllen – git Url eintragen, wenn erstellt und mit „yes“ bestätigen. Am besten die package.json im Texteditor offen lassen, dann kann man gleich mitlesen, was als nächstes installiert wird
- Nun die ganzen Grunt Packages. Nicht erschrecken – es gibt viele Abhängigkeiten, so dass recht viel kleine Packages mit-installiert werden.
npm install -g grunt-cli
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
npm install --save-dev grunt npm install --save-dev matchdep npm install --save-dev grunt-contrib-clean npm install --save-dev grunt-contrib-compress npm install --save-dev grunt-contrib-concat npm install --save-dev grunt-contrib-connect npm install --save-dev grunt-contrib-copy npm install --save-dev grunt-contrib-csslint npm install --save-dev grunt-contrib-cssmin npm install --save-dev grunt-contrib-sass npm install --save-dev grunt-contrib-uglify npm install --save-dev grunt-contrib-watch npm install --save-dev load-grunt-tasks npm install --save-dev grunt-sass npm install --save-dev grunt-contrib-cssmin
- Bootstrap installieren
npm install bootstrap@4.0.0-beta.3
Zum Zeitpunkt dieser Doku, war die 4er Version noch nicht freigegeben. Beta 3 aber die letzte stable Version vor der Veröffentlichung. Später nur „npm install bootstrap“ schreiben!
- jQuery installieren
npm install jquery
Vielleicht fragt man sich, was das „–save-dev“ bei der Installation für Auswirkungen hat. Schaut man sich das „package.json“ File an, dann sieht man, dass die Packages mit „–save-dev“ unter „devDependencies“ gelistet wurden. Diese werden nur für die Entwicklung und Tests benötigt. Die anderen Files werden unter „dependencies“ gelistet und sind für das spätere produktive Webprojekt nötig.
Das „package.json“ File müsste ungefähr so aussehen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | { "name": "mein Projekt", "version": "1.0.0", "description": "default form modules", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "http://...xy.git" }, "keywords": [ "form", "modules" ], "author": "Mein Name", "license": "ISC", "devDependencies": { "grunt": "^1.0.1", "grunt-contrib-clean": "^1.1.0", "grunt-contrib-compress": "^1.4.3", "grunt-contrib-concat": "^1.0.1", "grunt-contrib-connect": "^1.0.2", "grunt-contrib-copy": "^1.0.0", "grunt-contrib-csslint": "^2.0.0", "grunt-contrib-cssmin": "^2.2.1", "grunt-contrib-sass": "^1.0.0", "grunt-contrib-uglify": "^3.3.0", "grunt-contrib-watch": "^1.0.0", "grunt-sass": "^2.0.0", "load-grunt-tasks": "^3.5.2", "matchdep": "^2.0.0" }, "dependencies": { "bootstrap": "^4.0.0-beta.3", "jquery": "^3.3.1" } } |
Konfigurieren
Nun legen wir Test Dateien an, um zu prüfen, ob alles später richtig mittels grunt verarbeitet wird.
In unserem „dev/“ Verzeichnis legen wir ein SASS File im „css/“ ab, Woff Files für Schriften z.B., und eine JavaScript Datei unter „js/“. Man könnte jetzt auch noch ein „img/“ Verzeichnis anlegen. In meinem Beispiel optional, da ich die meisten Grafiken über Webfonts oder Vektoren abwickeln würde.
Beispiel Sass: dev/css/demo.scss
1 2 3 4 5 | $primaryColor: lime; body { background: $primaryColor; } |
Ich nenne in unserem Beispiel alle Files erstmal demo.*
dev/js/demo.js würde ich einfach ein alert ausgeben oder etwas Einfaches in jQuery, da wir diese Funktion testen wollen.
In unserem Projekt Verzeichnis (/projects/name/) legen wir eine index.html ab und verknüpfen auf die später generierte StyleSheet und JavaScript Datei.
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="src/css/demo.css"> <script src="src/js/demo.js"></script> </head> <body> <h1>DEMO</h1> </body> </html> |
Das Gruntfile erstellen
In unserem Projekt Verzeichnis (/projects/name/) erstellen wir erstmal eine leere /gruntfile.js Daten-Verarbeitungs-Script Datei.
Am besten folgenden Code kopieren und in die leere Datei einfügen. Namen und Verzeichnisse ggf. anpassen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | module.exports = function(grunt) { require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); // configure the tasks grunt.initConfig({ // Configuration Parameters (e.g. Pathes) // config: config, pkg: grunt.file.readJSON('package.json'), // sass part sass: { dev: { files: { // destination // source file 'src/css/demo.css': ['dev/css/demo.scss'] } } }, // Asset compilation cssmin: { build: { src: 'src/css/demo.css', dest: 'src/css/demo.min.css' } }, concat: { options: { separator: '\n/*next file*/\n\n' //this will be put between conc. files }, dist: { src: ['node_modules/jquery/dist/jquery.min.js', 'dev/js/demo.js'], dest: 'src/js/demo.js' } }, uglify: { build: { files: { 'src/js/demo.min.js': ['src/js/demo.js'] } } }, // simply copy files copy: { fonts: { expand: true, src: '*/fonts/**', // form dev to src dest: 'src/' } }, // Watching for file changes // Live reload watch: { sass: { files: '**/*.scss', // ** any directory; * any file tasks: ['css'], options: { livereload: true } }, concat: { files: ['dev/js/demo.js', 'node_modules/jquery/dist/jquery.min.js'], tasks: ['concat'] }, uglify: { files: 'src/js/demo.min.js', tasks: ['uglify'], options: { livereload: true } }, all: { files: ['**/*.html'], options: { livereload: true } } } }); // sass part grunt.loadNpmTasks('grunt-contrib-sass'); // Asset compilation grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-concat'); // Custom tasks grunt.registerTask('default', ['sass']); grunt.registerTask('css', ['sass', 'cssmin']); grunt.registerTask('js', ['concat', 'uglify']); // all files once grunt.registerTask('inject', ['sass', 'copy:fonts' , 'concat', 'uglify']); // Watching for file changes // Live reload grunt.loadNpmTasks('grunt-contrib-watch'); }; |
Grunt Befehle
Es gibt 2 Möglichkeiten. Entweder das Grunt Script laufen zu lassen. D.h. er schaut nach Änderungen (durch speichern) und generiert sofort. Perfekt, wenn man am SASS arbeitet und gleich die Änderungen im Browser sehen möchte.
Einmalig folgendes schreiben:
grunt watch |
(mit „Strg c“ stoppt man den watch Vorgang)
Möchte man einmalig alle Files durch das Grunt Script laufen lassen, dann folgendes schreiben:
grunt inject |
Viel Spaß!