Neoskop Updated Pattern Lab with Gulp

Table of Contents

1. Gulp-Integration
2. Start development with Gulp
3. Config File
4. Handle specific tasks with a variable
5. Gulp-Releasing
6. Todos
7. About Pattern Lab
8. Demo
9. Getting Started
10. Working with Patterns
11. Creating & Working With Dynamic Data for a Pattern
12. Using Pattern Lab's Advanced Features

Gulp-Integration

Patternlab doesn't take over the asset-handling, that's really good and you can handle it by yourself. Because of this we recommend to use Gulpjs as a streaming build system, which will handle the assets. It's fast and easy to configurate.

Features:

• Sass-Compiling (Libsass)
• Server (Browser-Sync)
• Livereload
• Minify (Javascript, CSS and images)
• Releasing / Deployment
  • Bump up the version
  • Tagging
  • Push files and tags to endpoint
  • Push files via rsync to a server

Start development with Gulp

After you cloned the project, you must follow some simple steps before you can start developing. Follow this short instruction:

// Install gulp
$ npm install gulp -g

// Install dependencies
$ npm install

// Start server and run Pattern Lab
$ gulp serve

Config-File

So we take of the paths to an own config file called build.config.json. It's easier to maintain and extract the data from the logic. It's only JSON, so we think you know how you can handle it.

Handle specific tasks with a variable

It's important to minify some stuff for a better performance. But mostly these kind of tasks need a lot of time and can be annoy us during the development. We need these only if we build a dist version.

The variable production is false. If you need the specific tasks, so set it to true. A task can be look like this one:

// Variable (Trigger) to handle some tasks
var production;

// Task for Images with Gulpif for Imagemin
gulp.task('images', function () {
  return gulp.src('**/*.img')
    .pipe(gulpif(production, imagemin()))
    .pipe(gulp.dest(
      'build/images/'
    ))
});

// Images won't minify, because the value is false
gulp.task('build', function () {
  production = false;

  gulp.start(
    'images'
  );
});

Releasing / Deployment with Gulp

Versioning is important in your styleguide, specially when you talk with your co-workers about it.

After you finished a version, you have to release it. The good point is, that all files will publish to your remote repository at github, bitbucket or whatever is your endpoint. This is not all: It will deploy all files in public to a server, which you define in the gulpfile.

• Bump up the number in your json's (default: package.json & bower.json)
• Create tag
• Push all with tags to endpoint (Github, Bitbucket, etc.)
• Deploy files to a server

Release-Tasks

// x.x.1
gulp release --type patch

// x.1.x
gulp release --type minor

// 1.x.x
gulp release --type major

Config for deployment

It's easy to deploy all the code to a server. You don't must copy something per hand. It's one line in your terminal. In the build.config.json you can type in the data for the server. Currently it looks like this one:

// Data for deployment
// File: build.config.json
"deployment": {
  "local": {
    "path": "public"
  },
  "remote": {
    "host": "YOUR HOST"
  },
  "rsync": {
    "options": "-avzh --delete -e ssh"
  }
}

It's super simple to deploy all you files to the server. Type this in the terminal:

$ gulp deploy

Todos

• Integration of Browsersync

About Pattern Lab

• Pattern Lab Website
• About Pattern Lab
• Documentation
• Demo

The PHP version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the Mustache-based patterns and the JavaScript-based viewer, with a PHP-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, Pattern Lab strongly separates patterns, data, and presentation from build logic.

Demo

You can play with a demo of the front-end of Pattern Lab at demo.patternlab.io.

Getting started

• Requirements
• Installing the PHP Version of Pattern Lab
• Upgrading the PHP Version of Pattern Lab
• Generating the Pattern Lab Website for the First Time
• Editing the Pattern Lab Website Source Files
• Using the Command-line Options
• Command Prompt on Windows

Working with Patterns

Patterns are the core element of Pattern Lab. Understanding how they work is the key to getting the most out of the system. Patterns use Mustache so please read Mustache's docs as well.

• How Patterns Are Organized
• Adding New Patterns
• Reorganizing Patterns
• Including One Pattern Within Another via Partials
• Managing Assets for a Pattern: JavaScript, images, CSS, etc.
• Modifying the Pattern Header and Footer
• Using Pseudo-Patterns
• Using Pattern Parameters
• Using Pattern State
• "Hiding" Patterns in the Navigation
• Adding Annotations
• Viewing Patterns on a Mobile Device

Creating & Working With Dynamic Data for a Pattern

The PHP version of Pattern Lab utilizes Mustache as the template language for patterns. In addition to allowing for the inclusion of one pattern within another it also gives pattern developers the ability to include variables. This means that attributes like image sources can be centralized in one file for easy modification across one or more patterns. The PHP version of Pattern Lab uses a JSON file, source/_data/data.json, to centralize many of these attributes.

• Introduction to JSON & Mustache Variables
• Overriding the Central data.json Values with Pattern-specific Values
• Linking to Patterns with Pattern Lab's Default link Variable
• Creating Lists with Pattern Lab's Default listItems Variable

Using Pattern Lab's Advanced Features

By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that Pattern Lab can make your development workflow a little smoother:

• Watching for Changes and Auto-Regenerating Patterns
• Auto-Reloading the Browser Window When Changes Are Made
• Multi-browser & Multi-device Testing with Page Follow
• Keyboard Shortcuts
• Special Pattern Lab-specific Query String Variables
• Preventing the Cleaning of public/
• Generating CSS
• Modifying the Pattern Lab Nav
• Editing the config.ini Options
• Integration with Compass