This repository has been archived by the owner on Dec 10, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 111
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #113 from pattern-lab/dev-2.0
Pattern Lab Node Gulp Edition 2.0.0-alpha.1
- Loading branch information
Showing
19 changed files
with
172 additions
and
1,330 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,60 @@ | ||
|  | ||
|
|
||
|   [](https://gitter.im/pattern-lab/node) | ||
|
|
||
| # Pattern Lab Node - Gulp Edition | ||
|
|
||
| The Gulp wrapper around [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node) providing tasks to interact with the core library and move supporting frontend assets. | ||
| The Gulp wrapper around [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node), the default PatternEngine, and supporting frontend assets. | ||
|
|
||
| ## Packaged Components | ||
|
|
||
| The Gulp Edition comes with the following components: | ||
| This Edition comes with the following components: | ||
|
|
||
| * `patternlab-node`: [GitHub](https://github.com/pattern-lab/patternlab-node), [npm](https://www.npmjs.com/package/patternlab-node) | ||
| * `patternengine-node-mustache`: [GitHub](https://github.com/pattern-lab/patternengine-node-mustache), [npm](https://www.npmjs.com/package/patternengine-node-mustache) | ||
| * `pattern-lab/styleguidekit-assets-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-assets-default) | ||
| * `pattern-lab/styleguidekit-mustache-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-mustache-default) | ||
| * `pattern-lab/patternlab-node`: [GitHub](https://github.com/pattern-lab/patternlab-node) | [npm](https://www.npmjs.com/package/@pattern-lab/patternlab-node) | ||
| * `pattern-lab/patternengine-node-mustache`: [GitHub](https://github.com/pattern-lab/patternengine-node-mustache) | [npm](https://www.npmjs.com/package/@pattern-lab/patternengine-node-mustache) | ||
| * `pattern-lab/styleguidekit-assets-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-assets-default) | [npm](https://www.npmjs.com/package/@pattern-lab/styleguidekit-assets-default) | ||
| * `pattern-lab/styleguidekit-mustache-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-mustache-default) | [npm](https://www.npmjs.com/package/@pattern-lab/styleguidekit-mustache-default) | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| The Pattern Lab Node - Gulp Edition uses [Node](https://nodejs.org) for core processing, [npm](https://www.npmjs.com/) to manage project dependencies, and [gulp.js](http://gulpjs.com/) to run tasks and interface with the core library. Node version 4 or higher suffices. You can follow the directions for [installing Node](https://nodejs.org/en/download/) 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](hhttps://github.com/gulpjs/gulp/blob/4.0/docs/getting-started.md) 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](https://github.com/pattern-lab/edition-node-gulp/wiki/Updating-to-Gulp-4) 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](https://github.com/pattern-lab/patternlab-node/wiki/Running-with-Local-Gulp-Instead-of-Global-Gulp), but commands are a bit more verbose. The rest of this documentation assumes a global install. | ||
| This Edition uses [Node](https://nodejs.org) for core processing, [npm](https://www.npmjs.com/) to manage project dependencies, and [gulp.js](http://gulpjs.com/) to run tasks and interface with the core library. You can follow the directions for [installing Node](https://nodejs.org/en/download/) on the Node website if you haven't done so already. Installation of Node will include npm. | ||
|
|
||
| ## Installing | ||
|
|
||
| There are two methods for downloading and installing the Gulp Edition: | ||
|
|
||
| * [Download a pre-built package](#download-a-pre-built-package) | ||
| * [Use npm](#use-npm) | ||
|
|
||
| ### Download a pre-built package | ||
|
|
||
| The fastest way to get started with the Gulp Edition is to [download the pre-built version](https://github.com/pattern-lab/edition-node-gulp/releases) from the [releases page](https://github.com/pattern-lab/edition-node-gulp/releases). The pre-built project comes with the [Base Starterkit for Mustache](https://github.com/pattern-lab/starterkit-mustache-base) installed by default. | ||
|
|
||
| **Please note:** Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To upgrade the Gulp Edition or to install plug-ins you'll need to be familiar with npm. | ||
| Pattern Lab Node can be used different ways. Editions like this one are **example** pairings of Pattern Lab code and do not always have an upgrade path or simple means to run as a dependency within a larger project. Users wishing to be most current and have the greatest flexibility are encouraged to consume `patternlab-node` directly. Users wanting to learn more about Pattern Lab and have a tailored default experience are encouraged to start with an Edition. Both methods still expect to interact with other elements of the [Pattern Lab Ecosystem](https://github.com/pattern-lab/patternlab-node#ecosystem). | ||
|
|
||
| ### Use npm | ||
| As an Edition, the simplist installation sequence is to clone this repository. | ||
|
|
||
| `npm` is a dependency management and package system which can pull in all of the Gulp Edition's dependencies for you. To accomplish this: | ||
| ``` bash | ||
| mkdir newApp && cd newApp | ||
| git clone https://github.com/pattern-lab/edition-node-gulp.git | ||
| npm install | ||
| ``` | ||
|
|
||
| * download or `git clone` this repository to an install location. | ||
|
|
||
| * run the following | ||
|
|
||
| ``` | ||
| cd install/location | ||
| npm install | ||
| ``` | ||
| ## Getting Started | ||
|
|
||
| Running `npm install` from a directory containing a `package.json` file will download all dependencies defined within. | ||
| This edition comes pre-packaged with a couple simple gulp tasks. Extend them as needed. | ||
|
|
||
| #### Install the Gulp Edition of Pattern Lab Node as a Dependency | ||
| **build** patterns, copy assets, and construct ui | ||
|
|
||
| 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: | ||
| ``` bash | ||
| gulp patternlab:build | ||
| ``` | ||
|
|
||
| Use npm's [`install` command](https://docs.npmjs.com/cli/install) with an argument to install the Gulp Edition into a location of your choosing. In Terminal type: | ||
| build patterns, copy assets, and construct ui, watch source files, and **serve** locally | ||
|
|
||
| cd install/location/ | ||
| npm install edition-node-gulp | ||
| ``` bash | ||
| gulp patternlab:serve | ||
| ``` | ||
|
|
||
| This will install the Gulp Edition into a directory called `node_modules` in `install/location/`. | ||
| logs Pattern Lab Node usage and **help** content | ||
|
|
||
| ## Getting Started | ||
| ``` bash | ||
| gulp patternlab:help | ||
| ``` | ||
|
|
||
| The Pattern Lab Node - Gulp Edition ships with a [base experience](https://github.com/pattern-lab/starterkit-mustache-base) 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](https://github.com/pattern-lab/starterkit-mustache-demo) like the one on [demo.patternlab.io](http://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](https://github.com/pattern-lab/patternlab-node/wiki/Importing-Starterkits). | ||
| To interact further with Pattern Lab Node, such as to install plugins or starterkits, check out the rest of the `gulpfile.js`. You could also install the [Pattern Lab Node Command Line Interface](https://github.com/pattern-lab/patternlab-node-cli) or learn more about the [core API](https://github.com/pattern-lab/patternlab-node#usage). | ||
|
|
||
| ## Updating Pattern Lab | ||
|
|
||
| To update Pattern Lab please refer to each component's GitHub repository, and the [master instructions for core](https://github.com/pattern-lab/patternlab-node/wiki/Upgrading). 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](https://github.com/pattern-lab/edition-node-gulp/wiki/Updating-to-Gulp-4) or [run with local gulp](https://github.com/pattern-lab/patternlab-node/wiki/Running-with-Local-Gulp-Instead-of-Global-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](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] |
Oops, something went wrong.