# Gulp-Pattern Lab Helper

Please note that this is a work in progress.

This is a hopefully not-too-opinionated Gulpfile to help out with the PHP version of Pattern Lab. This isn't a full replacement for the PHP builder. You'll still need to run the builder to handle the heavy lifting with the Mustache templates.

## Getting Started

1. [Install](http://patternlab.io/docs/installation.html) and [generate](http://patternlab.io/docs/first-run.html) Pattern Lab.
2. [Install node](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager) if you don't already have it.
3. Drop in `gulpfile.js`, `package.json`, `.jshintrc` and `.stylishcolors`.
4. `npm install` to install dependencies

## Running Gulp and Pattern Lab

You have a few options for running Gulp with the builder.

### Production mode 

This compresses images and styles, combines media queries, and concatenates and uglifies javascript (you'll need to do this on two terminal windows).

`gulp`

`php core/builder.php -w`


You can also run them together in one terminal (but I don't recommend it):

`gulp & php core/builder.php -w`

### Development mode

Images are compressed, styles are expanded and generated with a Sass sourcemap, and javascript is only concatenated.

`gulp --dev`

`php core/builder.php -w`


## Other notes

* JSHint is only run when you save scripts, not by default when watching
* You can run any of the tasks individually:
    * `gulp` 
    * `gulp styles`
    * `gulp jshint`
    * `gulp scripts`
    * `gulp images`

## Acknowledgements

This takes some inspiration from several excellent resources: 
* Mike Street's [Advanced Gulp File](http://www.mikestreety.co.uk/blog/an-advanced-gulpjs-file)
* Google's [Web Starter Kit](https://developers.google.com/web/starter-kit/).
* Dan Tello's [Gulp + Browserify: The Everything Post](http://viget.com/extend/gulp-browserify-starter-faq)