Sign inSign up

invision70/expressfromus-html

By invision70

•Updated almost 10 years ago

html

Image
0

358

invision70/expressfromus-html repository overview

⁠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:

⁠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

There are two methods for downloading and installing the Gulp Edition:

⁠Download a pre-built package

The fastest way to get started with the Gulp Edition is to download the pre-built version⁠ from the releases page⁠. The pre-built project comes with the Base Starterkit for Mustache⁠ installed by default.

Please note: Pattern Lab Node uses npm⁠ to manage project dependencies. To upgrade the Gulp Edition or to install plug-ins you'll need to be familiar with npm.

⁠Use 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.

⁠Install the Gulp Edition of Pattern Lab Node as a Dependency

Most people want to run Pattern Lab Node standalone and not as a dependency. If you wish to install as a dependency you can do the following:

Use npm's install command⁠ with an argument to install the Gulp Edition into a location of your choosing. In Terminal type:

cd install/location/
npm install edition-node-gulp

This will install the Gulp Edition into a directory called node_modules in install/location/.

⁠Getting Started

The Pattern Lab Node - Gulp Edition ships with a base experience⁠ which serves as clean place to start from scratch with Pattern Lab. But if you want to get rolling with a starterkit of your own, or use the demo starterkit⁠ like the one on demo.patternlab.io⁠, you can do so automatically at time of npm install by adding your starterkit to the package.json file.

You can also work with starterkits using the command line⁠.

⁠Updating Pattern Lab

To update Pattern Lab please refer to each component's GitHub repository, and the master instructions for core⁠. The components are listed at the top of the README.

⁠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⁠.

⁠List all of the available commands

To list all available commands type:

gulp patternlab:help
⁠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:3000⁠ in your browser.

⁠Install a StarterKit

To install a specific StarterKit from GitHub type:

npm install [starterkit-vendor/starterkit-name]

gulp patternlab:loadstarterkit --kit=[starterkit-name]

Tag summary

Content type

Image

Digest

Size

279.9 MB

Last updated

almost 10 years ago

docker pull invision70/expressfromus-html