new project with bootstrap, jquery, sass and grunt

Hinterlasse eine Antwort

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“)

  1. NODE installieren (Commandline) 
    node -v
  2. NPM installieren (Commandline) 
    npm install
  3. SASS installieren (Commandline) 
    npm install node-sass

Schritte (pro Einzelprojekt – Beispiel „name“)

  1. git installieren (optional)
  2. 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

  3. 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
  4. 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!

  5. 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ß!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

CAPTCHA

*