Gulp.js

„Continuous Integration – getting from backlog to customer faster.“ 

Continuous Integration ist eine Technik, um den Softwarelieferprozess zu verbessern, indem laufend Komponenten zu einer Anwendung zusammengefügt und Fehler sofort erkannt werden. 

Der Vorgang wird durch Einchecken in die Versionsverwaltung automatisch ausgelöst.

Continuous Integration

Task Runner sind Toolsets, die Build-Prozesse sauber und gut dokumentiert automatisieren. Sie stellen Helper und Plugins zur Verfügung, mit denen man Dateioperationen am Filesystem des Projekts managen und automatisieren kann. Dazu zählen unter anderem Minifizierung von JS/CSS/HTML, Optimierung von Bildern/Sprites oder die Kompilierung von Sass Files.

Der Task Runner überwacht das Filesystem auf Änderungen und führt automatisiert Builds durch.

Task Runner

Task Runner

var MODUL1 = MODUL1 || {}

MODUL1.Person = function (firstName) {
  this.firstName = firstName;
};

MODUL1.Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);
};

var person1 = new MODUL1.Person("Berni");
var person2 = new MODUL1.Person("Kathi");
var helloFunction = person1.sayHello;

person1.sayHello();
var MODUL2 = MODUL2 || {};

MODUL2.Troll = function(name, attitude) {
    var privateVars = {
        trollName: name || 'Andreas',
        trollAge: undefined
    };
    
    this.attitude = attitude || 'zahm';
}
        
var troll1 = new MODUL2.Troll( 'Andreas', 'gelangweilt' );

console.log(troll1.attitude);
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}
k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return 
p}('0 1=1||{}1.2=6(4){7.4=4};1.2.j.a=6(){d.b("i, k\'m "+7.4)};0 8=9 1.2("l");0 h=9 1.2("u");0 s=8.a;8.a();0 3=3||{};3.g=6(f,5){0 t=
{n:f||\'e\',r:q};7.5=5||\'o\'}0 c=9 3.g(\'e\',\'p\');d.b(c.5);',31,31,'var|MODUL1|Person|MODUL2|firstName|attitude|function|this|person1|new
|sayHello|log|troll1|console|Andreas|name|Troll|person2|Hello|prototype|I|Berni||trollName|zahm|gelangweilt|undefined|trollAge
|helloFunction|privateVars|Kathi'.split('|'),0,{}))

module1.js

module2.js

combine, minify, obfuscate and save as new build.js

Schnelligkeit

  • Durch die Logik der „Streams“ oder „Pipes“ passiert im Gegensatz zu anderen Task Runnern nicht nach jedem Task ein Schreibprozess, sondern erst bei Beendigung des Prozesses. Zwischenschritte passieren im Speicher.
  • Asynchrones abarbeiten der Tasks, Tasks werden parallell abgearbeitet

 

Schlank, straight forward, simpel          

  • Die Syntax ist schlanker, übersichtlicher und klarer als bei der Konkurrenz
  • Gulp Plugins werden für exakt eine Aufgabe designt, und nicht, wie zB. von Grunt.js bekannt, für mehrere.
  • Der Watcher (also die Überwachung des Filesystems auf Änderungen) ist standardmäßig implementiert.

Vorteile von Gulp.js

Node.js installieren

 

 

npm (Node Package Manager) installieren

 

 

Gulp.js global installieren

 

Installation von Gulp.js

> yum install nodejs
> yum install npm
> npm install gulp -g

In den Projektordner wechseln

 

Projekt initialisieren

 

Gulp installieren

 

Diverse Plugins installieren

 

gulpfile.js anlegen

 

 

Projekt einrichten

> cd /appl/storage/test_webapps_new/portal/layout/immobilien
> npm init
> npm install gulp --save-dev
> npm install gulp-concat
> vim gulpfile.js
Made with Slides.com