• Home
  • -
  • Gulp / PostCSS Workflow

Gulp / PostCSS Workflow

Als Freelancer arbeite ich von zu Hause aus und habe mir so meinen Workflow eingerichtet. Das sieht bei mir so aus. Eine kleine Linux-Server-Kiste dient mir als Webserver und zentraler Speicher. Da ich mit unterschiedlichen Rechnern arbeite, wollte ich keinen lokalen Apache / MySQL / PHP Stack.

Dann kam der Umstieg auf PostCSS. Das bedingt auch den Einsatz von Gulp und NodeJS. Mit Gulp werden bestimmte Aufgaben per JS definiert, die dann auf der Konsole ausgeführt werden. Klingt kompliziert - ist es aber nicht. Ein einmal definierter Gulp-Workflow dient seitdem für alle Projekte als Grundlage.

Hier mal vorab mein Gulp-File.

var gulp = require('gulp');
var postcss    = require('gulp-postcss');
var mixins = require('postcss-mixins');
var nested = require('postcss-nested');
var autoprefixer = require('autoprefixer');
var calc = require('postcss-calc');
var simplevars = require('postcss-simple-vars');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var livereload = require('gulp-livereload');
var sprites = require('postcss-easysprites');

// default
gulp.task('default', ['css'], function() {});

// css
gulp.task('css', function () {
    return gulp.src([
        'postcss/0_Mixins_Vars/variables.css',
        'postcss/2_Custom/variables.css',
        'postcss/0_Mixins_Vars/mixins.css',         // zuerst die Mixins
        'postcss/0_Mixins_Vars/basic.css',      // dann die Basic.css
        'postcss/1_Theme_CSS/*.css',            // dann den Rest
        'postcss/2_Custom/*.css'
        ])
        .pipe( concat('all.css') )
        .pipe( postcss([
                 mixins(),
                 nested(),
                 calc(),
                 simplevars(),
                 sprites({
                    imagePath:'./img',
                    spritePath:'./img'
                 }),
                 autoprefixer({ browsers: ['last 2 versions'] })
               ]))
        //.pipe( cssnano() )
        .pipe( gulp.dest('./css') )
        .pipe( livereload() );
}); 

// watch
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch(['postcss/**/*.css'], ['css']);
});

Mit gulp css auf der Konsole werden aus dem Ordner postcss die CSS-Dateien in einer bestimmten Reihenfolge zu einer all.css zusammengefasst und generiert.

  1. Zuerst werden ein paar Variablen und Mixins sowie ein paar Basic-Stylesheets definiert
  2. Dann kommen die Dateien des Themes. Alles schön aufgeteilt nach den jeweiligen Bereich, also für die Navigation, den Contao Modulen, Inhaltselemente, etc.
  3. Im Custom-Ordner werden die Theme Anpassungen angelegt.

Durch das PostCSS Plugin SimpleVars und Nested kann im Prinzip genauso gearbeitet werden wie mit Less, was die Verschachtelung und die Nutzung von Variablen angeht.

Durch Autoprefixer werden Browserspezifische Prefixe automatisch gesetzt und auch wieder entfernt!

Was mir besonders gut gefällt ist das Plugin Sprites. Durch einfaches Anhängen von z.B. #sprite an ein Image-Tag werden die so markierten Bilder zu einem Sprite zusammengefasst und die CSS-Anweisungen entsprechend automatisch generiert. Das ist Zauberei!

Da man jetzt nicht ständig auf der Konsole gulp css ausführen möchte, kann man mit dem Livereload Plugin Änderungen an den CSS Dateien beobachten.

Hierzu ist auch noch das Browserplugin *LiveReload" in Google Chrome notwendig.

Jetzt kann man auf der Konsole einfach gulp watch starten. Bei jeder Änderung bzw. Speicherung an den CSS Dateien wird automatisch eine neue all.css generiert. Die Änderung ist auch sofort im Browser sichtbar, ohne den Browser aktualisierne zu müssen.

Leider klappt das nicht so gut über ein eingebundes Laufwerk (per Samba, AFS oder NFS). Also habe ich mir mit Mamp Pro auf meinem iMac eine lokale Entwicklungsumgebung eingerichtet. Die lokale Entwicklung läuft damit super.

Aber wie geht es dann weiter? Ich habe bislang wie gesagt immer remote gearbeitet, damit die Kunden quasi live mitverfolgen konnten, wie der Stand ihres Projekets ist. Das geht natürlich so nicht mehr - oder doch?

Mit Gulp lässt sich per rsync auch wunderbar ein gulp push einrichten, so dass Änderungen am Theme einfach mit einem Befehl hochgeladen werden können. Wäre da nicht die Datenbank. Oft will der Kunde schon an der Seite mitarbeiten oder schonmal Inhalte eingeben.

Die Lösung: Ich nutze lokal die Datenbank vom Webserver, wo die Seite für den Kunden unter einer Subdomain läuft, also z.B. kunde.istbaldsoweit.de. Die Datenbanken sind in der Regel nach außen nicht offen. Ein Zugriff vom lokalen PC ist somit nicht möglich. Hier kommt der SSH Tunnel ins Spiel.

Mit ssh -f benutzer@server -L 3306:127.0.0.1:3306 wird ein SSH Tunnel aufgebaut und der lokale Port 3306 (MySQL) auf den Server umgeleitet.

Jetzt kann ich lokal entwickeln, Änderungen an den Inhalten sind auch online sofort sichtbar. Der Kunde kann mitarbeiten. Und Änderungen am Theme werden erst sichtbar, nachdem ich sie mit gulp push hochgeladen habe.

Hier nochmal die Schritte, die nötig sind, um am Theme zu arbeiten:

  1. SSH Tunnel starten
  2. Gulp Watch starten
  3. LiveReload im Browser starten
  4. CSS bearbeiten
  5. ggfls. am Ende gulp push

Ich habe jetzt (vorläufig) meinen Workflow gefunden!

Oliver Lohoff

Read more posts by this author.