tawashley/pattern-lab-gulp-boilerplate

Pattern Lab Node - Gulp Edition

The Gulp wrapper around Pattern Lab Node Core providing tasks to interact with the core library and move supporting frontend assets.

Packaged Components

The Gulp Edition comes with the following components:

• patternlab-node: GitHub, npm
• patternengine-node-handlebars: GitHub, npm

Prerequisites

The Pattern Lab Node - Gulp Edition uses Node for core processing, npm to manage project dependencies, and gulp.js to run tasks and interface with the core library. Node version 4 or higher suffices. You can follow the directions for installing Node on the Node website if you haven't done so already. Installation of Node will include npm.

It's also highly recommended that you install gulp globally.

Note: The Gulp Edition of Pattern Lab uses Gulp 4, which may require a new global install of the Gulp command line interface. Follow the gulp upgrade instructions if you already have gulp installed and need to upgrade. Gulp 4 is in alpha, but brings many benefits to the table and is relatively stable. You can alternatively run with local gulp instead of global gulp, but commands are a bit more verbose. The rest of this documentation assumes a global install.

Installing

npm

npm is a dependency management and package system which can pull in all of the Gulp Edition's dependencies for you. To accomplish this:

• download or git clone this repository to an install location.

• run the following

  cd install/location
  npm install
  

Running npm install from a directory containing a package.json file will download all dependencies defined within.

Getting Started

Helpful Commands

These are some helpful commands you can use on the command line for working with Pattern Lab.

Reminder: These commands assume a global installation of gulp 4.X, instead of a local installation. Depending on your preference, you may need to upgrade your global version of gulp or run with local gulp.

Generate Pattern Lab

To generate the front-end for Pattern Lab type:

gulp patternlab:build

Watch for changes and re-generate Pattern Lab

To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type:

gulp patternlab:serve

BrowserSync should open http://localhost:8080 in your browser.