Kombinieren von Pattern Lab mit Gulp für einen verbesserten Workflow

() translation by (you can also view the original English article)

Arbeiten Sie und Ihr Team mit Styleguides? Haben Sie Dokumentation für Ihre Module? Wenn nicht, keine Panik. In diesem Tutorial zeige ich Ihnen, wie Sie Ihre Arbeitsweise mit Ihrem Team verbessern können. Wir werden die von Brad Frost und Dave Olsen vorgeschlagenen Konzepte untersuchen und mithilfe von Pattern Lab Styleguides erstellen, während Gulp die Assets verwaltet. Lass uns anfangen!

Was ist Gulp?

Gulp.js ist ein Streaming-Build-System und ein Task-Runner. Das wichtige Konzept ist, dass Sie Streams haben, wo Sie viele Dinge für Ihre Dateien definieren können. Es ist schneller als die manuelle Verwaltung, spart Nerven und viel Zeit. In diesem Tutorial werden wir alle unseren Sass-Dateien in eine Pipe (einen Prozess) einfügen:

Kompilieren von Sass zu CSS,
Verketten der CSS-Dateien,
Minimierung der Ausgabe,
und alles an einen anderen Ort verschieben

Weitere Informationen zu den Grundlagen von Gulp finden Sie in Kezz Braceys Anfängerhandbuch Die Befehlszeile für Webdesign: Automatisierung mit Gulp.

Was ist Pattern Lab?

Pattern Lab ist ein Konzept zur Erstellung der atomaren Entwurfssysteme. Erstellen von Modulen statt direktes Erstellen von Seiten. Es definiert mehrere Verbundteile:

atoms
molecules
organisms
templates
pages

Sie beginnen mit dem kleinsten Element und bauen es zu größeren Teilen aus, bis Sie ganze Seiten haben. Dieser Ansatz hilft Ihnen, Zeit zu sparen, zusammenzuarbeiten und eine solide Struktur zu gewährleisten.

Atoms

Atoms können nicht in kleinere Stücke zerlegt werden.

Dies sind die einfachsten Blöcke, einschließlich grundlegender Tags wie Listen, Farben, Schriftarten, Animationen usw.

Molecules

Molecules sind Gruppen verschiedener Elemente (atoms), die wie eine Einheit zusammenwirken.

Zum Beispiel ein Teaser mit einer Überschrift, einem Bild, einem Absatz und einem Link wie "Lesen Sie mehr". Jedes von diesen ist ein einzelnes Element, aber zusammen werden sie ein Molekül; Teil eines größeren, komplexeren Systems.

Organisms

Organisms sind Gruppen von Elementen (atoms und molecules) und funktionieren wie ein Abschnitt auf Ihrer Website.

Denken Sie zum Beispiel an einen Website-Header. Es ist ein größeres System, das aus Molekülen wie einer Suchform und einer Navigation aufgebaut ist, die beide wiederum aus kleineren Atomen bestehen.

patternlab header organism — Musterlabor-Header-Organismus, auf kleinem Bildschirm zu sehen

Schauen Sie sich die Online-UI-Demos an und machen Sie sich ein Bild vom gesamten System.

Lassen Sie die Magie geschehen!

Jetzt ist es an der Zeit, beide Systeme zu kombinieren und einen Workflow für Ihr Team zu erstellen. Pattern Lab wird uns unseren HTML-Code zur Verfügung stellen und die einfache Benutzeroberfläche bereitstellen. Gulp wird alle benötigten Assets verwalten.

Unsere Hauptmerkmale:

Sass-Compiling (Libsass)
Server (Browser-Sync)
Livereload
Minimieren (Javascript, CSS und Bilder)
Freigabe / Bereitstellung
- Bump up die Version
- Markieren
- Push-Dateien und Tags zum Endpunkt
- Übertragen Sie Dateien über rsync auf einen Server

Einführung

Um Gulp verwenden zu können, muss zunächst node.js auf Ihrem System vorhanden sein. Wenn Sie dies nicht tun, finden Sie Anweisungen zur Einrichtung in Kezz Braceys Befehlszeile für Webdesign: Zähmen von Paketen von Drittanbietern.

Beginnen wir mit der globalen Installation von Gulp.js. Geben Sie im Terminal Folgendes ein:

1	npm install gulp -g

Jetzt müssen wir das Repository von Patternlab klonen, um eine Basis für die Arbeit zu erhalten.

1	git clone git@github.com:pattern-lab/patternlab-php.git

Als nächstes benötigen wir eine Schluckdatei, um unsere Aufgaben einzurichten. Erstellen Sie eine gulpfile.js im Stammverzeichnis Ihres Projektordners. Danach benötigen wir eine Konfigurationsdatei, in der wir alle Pfade definieren. Erstellen Sie daher eine build.config.json in Ihrem Ordner.

Folgende Dateien werden ebenfalls benötigt:

.bowerrc
package.json
bower.json

Nach all diesen grundlegenden Schritten haben wir die grundlegende Projektstruktur. Beginnen wir nun damit, die Aufgaben für unseren Workflow zu erstellen.

Beginnen Sie mit dem Gulpfile

Oben in unserer Datei gulpfile.js benötigen wir jede Abhängigkeit. Wenn Sie ein Plugin installieren, müssen Sie es "require" und ihm einen Namen geben.

Beginnen Sie mit gulp und unserer Konfigurationsdatei für alle Pfade und Konfigurationen.

1	var gulp = require('gulp'),
2	config = require('./build.config.json');

Während unseres Entwicklungsprozesses müssen wir unseren Code nicht minimieren (dies ist Zeitverschwendung, es sei denn, wir sind bereit zur Bereitstellung). Mit der folgenden production variablen können wir einige Aufgaben ein- und ausschalten. Sie werden dies später in Aktion sehen.

1	// Production Handling
2	// Description: Use 'production' variable with 'gulpif'
3	// Toggle minifing and optimization for assets
4	var production;

Mit der Einrichtung können wir nun verschiedene Aufgaben hinzufügen, die uns bei unserer Entwicklung helfen!

Aufgabe 1: Alle Assets bereinigen

// Install needed dependency
npm install gulp-clean

// Require dependency
var clean = require('gulp-clean');

Wenn Sie ein Bild aus dem Ordner "source/" löschen, finden Sie auch in "public/" eine Kopie des Bildes. Aufgrund dieser Duplizierung führen wir einen einfachen Schritt aus, um den Bildordner in "public/" zu bereinigen.

// Task: Clean:before
// Description: Removing assets files before running other tasks
gulp.task('clean:before', function () {
  return gulp.src(
    config.assets.dest
  )
    .pipe(clean({
      force: true
    }))
});

Aufgabe 2: Skripte verarbeiten

// Install needed dependencies
npm install gulp-concat gulp-uglify gulp-rename

// Require dependencies
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

Für Bereitstellungszwecke ist es wichtig, nur eine Datei mit allen Skripten zu haben. Um dies zu erreichen, verwenden wir das Plugin gulp-concat und kombinieren alle unsere Skripte, um application.js zu erstellen. Wenn die variable production wahr ist, wird application.js hässlich und erhält einen neuen Namen: application.min.js.

gulp.task('scripts', function () {
  return gulp.src(config.scripts.files)
    .pipe(concat(
      'application.js'
    ))
    .pipe(gulpif(production, uglify()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scripts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Aufgabe 3: Schriftarten

Diese Aufgabe verschiebt alle Schriftarten in den öffentlichen Ordner. Nichts mehr.

// Task: Handle fonts
gulp.task('fonts', function () {
  return gulp.src(config.fonts.files)
    .pipe(gulp.dest(
      config.fonts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Aufgabe 4: Bilder

Für diesen Schritt installieren wir das Plugin gulp-imagemin und benötigen es. Sobald wir dies getan haben, können wir damit Bilder minimieren. Dies spart Speicher und steigert die Leistung.

// Install imagemin
npm install gulp-imagemin

// Require dependencies
var imagemin = require('gulp-imagemin');

Wenn die variable production wahr ist, werden alle Bilder minimiert. Nachdem dies erledigt ist, verschieben wir sie in den Zielordner.

// Task: Handle images
gulp.task('images', function () {
  return gulp.src(config.images.files)
    .pipe(gulpif(production, imagemin()))
    .pipe(gulp.dest(
      config.images.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Aufgabe 5: Sass anfassen

Installieren und fordern wir die Abhängigkeiten gulp-sass und gulp-cssmin.

// Install needed dependencies
npm install gulp-sass gulp-cssmin

// Require dependencies
var sass = require('gulp-sass');
var cssmin = require('gulp-cssmin');

Jetzt nehmen wir alle Sass-Dateien und kompilieren sie mit dem Sass-Plugin zu CSS. Wenn die variable production wahr ist, erledigt cssmin seine Aufgabe.

// Task: Handle Sass and CSS
gulp.task('sass', function () {
  return gulp.src(config.scss.files)
    .pipe(sass())
    .pipe(gulpif(production, cssmin()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scss.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Aufgabe 6: Pattern Lab Server

Pattern Lab verfügt über einen eigenen Server, den Sie mit einem einfachen Shell-Befehl starten können. Um diesen Befehl auszuführen, benötigen wir das Plugin gulp-shell.

// Install needed dependencies
npm install gulp-shell

// Require dependencies
var shell = require('gulp-shell');

An dieser Stelle kopieren wir den Styleguide-Ordner vom Kern in die public. Zu diesem Zeitpunkt sehen Sie im Browser ein solides Front-End.

// Task: patternlab
// Description: Build static Pattern Lab files via PHP script
gulp.task('patternlab', function () {
  return gulp.src('', {read: false})
    .pipe(shell([
      'php core/builder.php -gpn'
    ]))
    .pipe(browserSync.reload({stream:true}));
});

// Task: styleguide
// Description: Copy Styleguide-Folder from core/ to public
gulp.task('styleguide', function() {
  return gulp.src(config.patternlab.styleguide.files)
    .pipe(gulp.dest(config.patternlab.styleguide.dest));
});

Aufgabe 7: Server starten und Dateien überwachen

Pattern Lab verfügt über einen integrierten Server, aber Browser-Sync übernimmt das Einfügen von CSS-Änderungen ohne erneutes Laden der Seite.

// Install needed dependencies
npm install browser-sync gulp-watch

// Require dependencies
var browser-sync = require('browser-sync');
var watch = require('gulp-watch');

Der Beobachter kümmert sich um Änderungen und löst die spezifischen Aufgaben aus. Danach aktualisiert die Browsersynchronisierung unsere Ansicht im Browser.

// task: BrowserSync
// Description: Run BrowserSync server with disabled ghost mode
gulp.task('browser-sync', function() {
  browserSync({
    server: {
        baseDir: config.root
    },
    ghostMode: true,
    open: "external"
  });
});

Wir geben die Dateien für den Watcher an und lösen die Aufgaben aus, die wir im Falle einer Änderung benötigen.

// Task: Watch files
gulp.task('watch', function () {

  // Watch Pattern Lab files
  gulp.watch(
    config.patternlab.files,
    ['patternlab']
  );

  // Watch scripts
  gulp.watch(
    config.scripts.files,
    ['scripts']
  );
  
  // Watch images
  gulp.watch(
    config.images.files,
    ['images']
  );

  // Watch Sass
  gulp.watch(
    config.scss.files,
    ['sass']
  );

  // Watch fonts
  gulp.watch(
    config.fonts.files,
    ['fonts']
  );
});

Aufgabe 8: Standardaufgabe

Das Schreiben von gulp in die Shell löst die Standardaufgabe aus. Bevor Gulp dies startet, wird die Bereinigung clean:before der Aufgabe, alle öffentlichen Dateien zu bereinigen.

// Task: Default
// Description: Build all stuff of the project once
gulp.task('default', ['clean:before'], function () {
  production = false;

  gulp.start(
    'patternlab',
    'styleguide',
    'fonts',
    'sass',
    'images',
    'scripts'
  );
});

Aufgabe 9: Den Prozess starten

Lassen Sie uns eine Aufgabe erstellen, die am Styleguide entwickelt werden soll, ohne jedoch die Ressourcen zu minimieren. Das löst die Browsersynchronisierung aus, erstellt alle Assets und startet den Watcher.

// Task: Start your production-process
// Description: Typ 'gulp' in the terminal
gulp.task('serve', function () {
  production = false;

  gulp.start(
    'browser-sync',
    'default',
    'watch'
  );
});

Aufgabe 10: Freigeben und Markieren

Für diesen Schritt benötigen wir einige neue Plugins.

Das Plugin gulp-bump dient zum Aktualisieren der Versionsnummer.
gulp-filter gibt uns eine bestimmte Datei des Streams.
Mit gulp-git können wir git-Anweisungen in gulp verwenden.
Und die gulp-tag-version dient zum Generieren des Tags.

// Install needed dependencies
npm install gulp-bump gulp-filter gulp-git gulp-tag-version

// Require dependencies
var bump = require('gulp-bump');
var filter = require('gulp-filter');
var git = require('gulp-git');
var tagversion = require('gulp-tag-version');

Jetzt definieren Sie die Gulp-Task release, setzen die variable Produktion auf true (jetzt müssen wir sie minimieren) und öffnen den Stream. Sie müssen alle Dateien mit einer Versionsnummer nehmen, den Plugin-Bump verwenden und es ermöglichen, den Typ (Patch, Minor oder Major) über einen Parameter in der Shell zu definieren.

Wenn Sie die release-Task ohne Typ ausführen, benötigt gulp-bump einen Patch - x.x.1. Danach verschieben Sie die Dateien in das Stammverzeichnis und übernehmen die Änderungen. Jetzt ist es Zeit, ein neues Tag für das Projekt zu generieren. Die Datei package.json wird benötigt, um die aktuelle Versionsnummer für das neue Tag abzurufen.

Schließlich verschieben wir alle Dateien und Tags an den Ursprung und in den gewünschten Zweig.

// Function: Releasing (Bump & Tagging)
// Description: Bump npm versions, create Git tag and push to origin
gulp.task('release', function () {
  production = true;

  return gulp.src(config.versioning.files)
    .pipe(bump({
      type: gulp.env.type || 'patch'
    }))
    .pipe(gulp.dest('./'))
    .pipe(git.commit('Release a ' + gulp.env.type + '-update'))

    // read only one file to get version number
    .pipe(filter('package.json'))

    // Tag it
    .pipe(tagversion())

    // Publish files and tags to endpoint
    .pipe(shell([
      'git push origin develop',
      'git push origin --tags'
    ]));
});

Aufgabe 11: Deployment

Es ist möglich, alle Dateien über rsync auf einem Server bereitzustellen. Das ist super schnell und bequem. Geben Sie gulp deploy in Ihr Terminal ein und nach einigen Sekunden haben Sie das lokale Projekt auf dem Server. Sie müssen Ordner nicht manuell ziehen und ablegen. Automatisieren Sie alle Dinge. Sie definieren den Host und den Pfad des Ordners, den Sie in build.config.js bereitstellen möchten.

// Task: Deploy static content
// Description: Deploy static content using rsync shell command
gulp.task('deploy', function () {
  return gulp.src(config.deployment.local.path, {read: false})
    .pipe(shell([
      'rsync '+ config.deployment.rsync.options +' '+ config.deployment.local.path +'/ '+ config.deployment.remote.host
    ]))
});

Final Gulpfile

Sie haben so viel Code geschrieben und hier ist das Endergebnis! Möglicherweise möchten Sie für jede Aufgabe eine eigene Datei haben. In diesem Fall können Sie diese gerne aufteilen. In diesem Fall wird der Einfachheit halber alles in einem einzigen Gulpfile angezeigt:

var gulp        = require('gulp'),
    bump        = require('gulp-bump'),
    clean       = require('gulp-clean'), 
    concat      = require('gulp-concat'),
    browserSync = require('browser-sync'),
    cssmin      = require('gulp-cssmin'),
    filter      = require('gulp-filter'),
    git         = require('gulp-git'),
    gulpif      = require('gulp-if'),
    imagemin    = require('gulp-imagemin'),
    rename      = require('gulp-rename'),
    sass        = require('gulp-sass'),
    shell       = require('gulp-shell'),
    tagversion  = require('gulp-tag-version'),
    uglify      = require('gulp-uglify'),
    config      = require('./build.config.json');

// Trigger
var production;

// Task: Clean:before
// Description: Removing assets files before running other tasks
gulp.task('clean:before', function () {
  return gulp.src(
    config.assets.dest
  )
    .pipe(clean({
      force: true
    }))
});

// Task: Handle scripts
gulp.task('scripts', function () {
  return gulp.src(config.scripts.files)
    .pipe(concat(
      'application.js'
    ))
    .pipe(gulpif(production, uglify()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scripts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: Handle fonts
gulp.task('fonts', function () {
  return gulp.src(config.fonts.files)
    .pipe(gulp.dest(
      config.fonts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: Handle images
gulp.task('images', function () {
  return gulp.src(config.images.files)
    .pipe(gulpif(production, imagemin()))
    .pipe(gulp.dest(
      config.images.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: Handle Sass and CSS
gulp.task('sass', function () {
  return gulp.src(config.scss.files)
    .pipe(sass())
    .pipe(gulpif(production, cssmin()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scss.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: patternlab
// Description: Build static Pattern Lab files via PHP script
gulp.task('patternlab', function () {
  return gulp.src('', {read: false})
    .pipe(shell([
      'php core/builder.php -gpn'
    ]))
    .pipe(browserSync.reload({stream:true}));
});

// Task: styleguide
// Description: Copy Styleguide-Folder from core/ to public
gulp.task('styleguide', function() {
  return gulp.src(config.patternlab.styleguide.files)
    .pipe(gulp.dest(config.patternlab.styleguide.dest));
});

// task: BrowserSync
// Description: Run BrowserSync server with disabled ghost mode
gulp.task('browser-sync', function() {
  browserSync({
    server: {
        baseDir: config.root
    },
    ghostMode: true,
    open: "external"
  });
});

// Task: Watch files
gulp.task('watch', function () {

  // Watch Pattern Lab files
  gulp.watch(
    config.patternlab.files,
    ['patternlab']
  );

  // Watch scripts
  gulp.watch(
    config.scripts.files,
    ['scripts']
  );

  // Watch images
  gulp.watch(
    config.images.files,
    ['images']
  );

  // Watch Sass
  gulp.watch(
    config.scss.files,
    ['sass']
  );

  // Watch fonts
  gulp.watch(
    config.fonts.files,
    ['fonts']
  );
});

// Task: Default
// Description: Build all stuff of the project once
gulp.task('default', ['clean:before'], function () {
  production = false;

  gulp.start(
    'patternlab',
    'styleguide',
    'fonts',
    'sass',
    'images',
    'scripts'
  );
});

// Task: Start your production-process
// Description: Typ 'gulp' in the terminal
gulp.task('serve', function () {
  production = false;

  gulp.start(
    'browser-sync',
    'default',
    'watch'
  );
});

// Task: Deploy static content
// Description: Deploy static content using rsync shell command
gulp.task('deploy', function () {
  return gulp.src(config.deployment.local.path, {read: false})
    .pipe(shell([
      'rsync '+ config.deployment.rsync.options +' '+ config.deployment.local.path +'/ '+ config.deployment.remote.host
    ]))
});

// Function: Releasing (Bump & Tagging)
// Description: Bump npm versions, create Git tag and push to origin
gulp.task('release', function () {
  production = true;

  return gulp.src(config.versioning.files)
    .pipe(bump({
      type: gulp.env.type || 'patch'
    }))
    .pipe(gulp.dest('./'))
    .pipe(git.commit('Release a ' + gulp.env.type + '-update'))

    // read only one file to get version number
    .pipe(filter('package.json'))

    // Tag it
    .pipe(tagversion())

    // Publish files and tags to endpoint
    .pipe(shell([
      'git push origin develop',
      'git push origin --tags'
    ]));
});

Konfigurationsdatei

Jetzt brauchen wir unsere Konfigurationsdatei, um die verschiedenen Pfade festzulegen. Diese Datei ist erforderlich, um die Pfade und die Konfiguration des Projekts zu verwalten:

{
  "root": "./public",
  "deployment": {
    "local": {
      "path": "public"
    },
    "remote": {
      "host": "YOUR HOST"
    },
    "rsync": {
      "options": "-avzh --delete -e ssh"
    }
  },
  "assets": {
    "base": "source/assets/",
    "dest": "public/assets/"
  },
  "versioning": {
    "files": [
      "./package.json",
      "./bower.json"
    ]
  },
  "scripts": {
    "base"  : "source/assets/javascripts/",
    "files" : [
      "source/assets/javascripts/**/*.js"
    ],
    "dest"  : "public/assets/javascripts/"
  },
  "components": {
    "base": "source/assets/components/"
  },
  "scss": {
    "base" : "source/assets/scss/",
    "files": [
      "source/assets/scss/**/*.scss"
    ],
    "dest" : "public/assets/stylesheets/"
  },
  "fonts": {
    "base" : "source/assets/fonts/",
    "files": [
      "source/assets/fonts/**/*"
    ],
    "dest" : "public/assets/fonts/"
  },
  "images": {
    "base" : "source/assets/images/",
    "files": [
      "source/assets/images/**/*"
    ],
    "dest" : "public/assets/images/"
  },
  "patternlab": {
    "styleguide": {
      "files": [
        "core/styleguide/**"
      ],
      "dest": "public/styleguide/"
    },
    "files": [
      "source/_patterns/**/*.mustache",
      "source/_patterns/**/*.json",
      "source/_data/*.json"
    ]
  }
}

Abschluss

Ich mag mit einer Kombination aus Gulp und Pattern Lab arbeiten. Ich habe in verschiedenen Teams gearbeitet und diese Grundlage für jedes Projekt geschaffen. Das Feedback jedes Teammitglieds war aufgrund seines leicht verständlichen Prozesses immer positiv. Jeder hat eine feste Oberfläche, kann das Modul auswählen und problemlos verwenden. Für Fragen oder Feedback lesen Sie bitte den Kommentarbereich unten.