Gulp - Versionsgeschichte

149.172.227.142: /* Tipps und Tricks */

2016-10-01T10:07:28Z

Tipps und Tricks

149.172.227.142 am 30. September 2016 um 11:13 Uhr

2016-09-30T11:13:32Z

149.172.227.142: /* Projekt mit Gulp starten */

2016-09-30T10:29:08Z

Projekt mit Gulp starten

149.172.227.142 am 29. September 2016 um 16:20 Uhr

2016-09-29T16:20:34Z

149.172.227.142 am 29. September 2016 um 16:20 Uhr

2016-09-29T16:20:15Z

149.172.227.142: /* Ein Beispiel Task – SASS Datein in CSS kompilieren */

2016-09-29T12:45:58Z

Ein Beispiel Task – SASS Datein in CSS kompilieren

149.172.227.142: /* Projekt mit Gulp starten */

2016-09-29T12:40:50Z

Projekt mit Gulp starten

149.172.227.142: /* Projekt mit Gulp starten */

2016-09-29T12:38:54Z

Projekt mit Gulp starten

149.172.227.142: /* Projekt mit Gulp starten */

2016-09-29T12:03:49Z

Projekt mit Gulp starten

149.172.227.142: /* Projekt mit Gulp starten */

2016-09-29T12:02:50Z

Projekt mit Gulp starten

← Nächstältere Version		Version vom 1. Oktober 2016, 10:07 Uhr
Zeile 150:		Zeile 150:
	gulp		gulp
	Sucht die default Funktion und führt sie aus (Shortcut für ''gulp default'').		Sucht die default Funktion und führt sie aus (Shortcut für ''gulp default'').
		+	=== Dependend Tasks ===
		+	Normalerweise werden alle Task nacheinander gestartet aber der nachfolgende Task wartet nicht bis ein vorher gestarteter beendet ist. Wenn ein Task auf einen anderen Warten soll, muß man ihm eine Abhängigkeit mitgeben. Außerdem muß der vorige Task über eine Callback Funktion bescheid geben wenn er fertig ist.

@@ Zeile 1: / Zeile 1: @@
 Siehe auch [[NodeJS]], [[npm]]
-http://gulpjs.com/
+== Einführung ==
 Ein weiteres Tool das unter Node.js läuft ist Gulp. Gulp ist ein Taskrunner (wie auch Grunt) und dient vor allem zu folgendem.
 Bilder – Verlustlose Kompression aller Bilder und Vektoren mit gulp-imagemin

@@ Zeile 22: / Zeile 22: @@
   $ npm install --global gulp
 == Projekt mit Gulp starten ==
-Aus: http://www.holgerkoenemann.de/gulp-basics-ein-einsteiger-tutorial/ (2016-09)
+*http://www.holgerkoenemann.de/gulp-basics-ein-einsteiger-tutorial/ (2016-09)
-* In den Projektordner wechseln
+*https://www.youtube.com/watch?v=O5sAN8N9IbA
-Nun wechselt in der Konsole in euren Projekt Ordner. Eben dorthin wo ihr Gulp nutzen wollte. Für dieses Beispiel legen wir einen neuen Ordner mit dem Namen „/project“ an:
+=== Zusammenfassung ===
- $ mkdir project
+=== Projekt Beispiel ===
-und wechseln dann in diesen mit:
+'''Projekt Ordner''' erstellen und in den Projektordner wechseln
-  $ cd project
+  mkdir project
-Ein Gulp Projekt benötigt eine eine '''package.json Datei''' . Man kann sie von Hand anlegen oder über npm -init eine erstellen.
+ cd project
   $ npm init
 Jetzt werden euch einige Fragen gestellt. Ihr könnt getrost überall Enter drücken. Die Angaben können später noch in der package.json Datei manuell geändert werden.
-Zu guter Letzt muss '''Gulp''' noch '''im lokalen Ordner installiert''' werden:
+Gulp in lokalem Projektordner installieren und Abhängigkeit in package.json eintragen.
   $ npm install --save-dev gulp
 Jetzt wird '''Gulp als npm Modul''' installiert. Es wird automatisch ein Unterordner mit dem Namen „/node_module“ angelegt in den Gulp installiert wird. die Option --save-dev sorgt dafür dass die Abhängigkeiten (zu Gulp) in der package.json Datei aktualisiert wird.
@@ Zeile 52: / Zeile 58: @@
 Andere Optionen sind --save oder --save-optional, hier werden die Abhängigkeiten an anderer Stelle im .json abgelegt.
-'''gulpfile.js anlegen'''
+'''gulpfile.js und ersten Task anlegen'''
+Im Projektordner die Datei gulpfile.js erzeugen.
-Um '''Gulp Tasks anlegen''' zu können müßt ihr jetzt in eurem „/project“ Ordner eine Datei mit dem Namen '''gulpfile.js anlegen''' und folgenden Code hinterlegen:
+ touch gulpfile.js
 <pre>
 var gulp = require('gulp');
@@ Zeile 62: / Zeile 69: @@
 });
 </pre>
-Mit ''var gulp = require('gulp');'' wird das Modul „gulp“ angefordert, mit ''gulp.task('default', function( // place code for your default task here ) {});'' wird ein erster Task mit dem Namen „default“ definiert. Diese macht noch rein gar nichts.
 '''Ausführen'''
-Wenn ihr jetzt aber auf der Kommandozeile:
+  gulp default
-  $ gulp default
+Führt den Task aus. Der default Task kann auch mit gulp (ohne default) gestartet werden. Andere Namen müssen immer mit angegeben werden. Es können natürlich auch mehrere Tasks angegeben werden.
 === Ein Beispiel Task – SASS Datein in CSS kompilieren ===
@@ Zeile 108: / Zeile 115: @@
 Wenn jetzt im „/project“ Ordner ein Verzeichniss „/sass“ anlegt wird, in dieses .scss Dateien ablegt werden und auf der Kommandozeile der Befehl:
-  $ gulp default
+  $ gulp
 ausführt wird, werden die .scss Dateien kompiliert und als .css Dateien im Ordner „/css/“ ausgegeben.
 == Tipps und Tricks ==
   gulp
 Sucht die default Funktion und führt sie aus (Shortcut für ''gulp default'').

← Nächstältere Version		Version vom 29. September 2016, 16:20 Uhr
Zeile 1:		Zeile 1:
−	Siehe auch [[NodeJS]]	+	Siehe auch [[NodeJS]], [[npm]]

	http://gulpjs.com/		http://gulpjs.com/

← Nächstältere Version		Version vom 29. September 2016, 16:20 Uhr
Zeile 110:		Zeile 110:
	$ gulp default		$ gulp default
	ausführt wird, werden die .scss Dateien kompiliert und als .css Dateien im Ordner „/css/“ ausgegeben.		ausführt wird, werden die .scss Dateien kompiliert und als .css Dateien im Ordner „/css/“ ausgegeben.
		+
		+	== Tipps und Tricks ==
		+	gulp
		+	Sucht die default Funktion und führt sie aus (Shortcut für ''gulp default'').

@@ Zeile 101: / Zeile 101: @@
 });
 </pre>
-Die Zeile gulp.src('./sass/*.scss') sagt soviel wie: „nimm alle Dateien mit der Endung .scss aus dem Ordner /sass/…“
+Die Zeile gulp.src('./sass/*.scss') sagt soviel wie: „nimm alle '''Dateien mit der Endung .scss aus dem Ordner /sass/…“'''
-Die dritte Zeile .pipe(gulp.dest('./css')); sagt: „…und speichere das Ergebnis dann im Ordner /css/ ab“
+Die zweite Zeile .pipe(sass()) gibt an das diese eben definierten Dateien das Modul '''„gulp-sass“ durchlaufen''' sollen, bzw. die darin enthaltene Funktion sass().
 Wenn jetzt im „/project“ Ordner ein Verzeichniss „/sass“ anlegt wird, in dieses .scss Dateien ablegt werden und auf der Kommandozeile der Befehl:
   $ gulp default
 ausführt wird, werden die .scss Dateien kompiliert und als .css Dateien im Ordner „/css/“ ausgegeben.

@@ Zeile 70: / Zeile 70: @@
 eingebt, wird dieser immerhin schon einmal ausgeführt.
-===Ein Beispiel Task – SASS Datein in CSS kompilieren
+=== Ein Beispiel Task – SASS Datein in CSS kompilieren ===
-Für fast alle erdenklichen Aufgaben gibt es Gulp Plugins===. Diese werden wie folgt installiert:
+Für fast alle erdenklichen Aufgaben gibt es Gulp Plugins. Diese werden wie folgt installiert:
   $ npm install namedesplugins
@@ Zeile 89: / Zeile 89: @@
    // place code for your default task here
 });
 und dann definieren was gemacht werden soll:
+<pre>
 var gulp = require('gulp');
 var sass = require('gulp-sass');