Gulp Config

Gulp Setup

Local Configuration

Emulsify keeps Gulp config in a dedicated file and allows you to override those defaults by keeping a local config file in your project. For example, if you want to run all gulp tasks from the root of a Drupal 8 project, below are the steps required:

1. Create local.gulp-config.js in your root directory and copy/override contents from the original
2. In that file, set the theme path accordingly, e.g. const themeDir = './docroot/themes/custom/YOUR_THEME/';
3. Also, set the browserSync startPath variable, e.g., startPath: 'docroot/themes/custom/YOUR_THEME/pattern-lab/public/',

Available Commands

SVG icons

We are using an SVG sprite generator, which automatically creates the SVG sprite in the dist directory. Simply add separate SVG files into images/icons/src/ and run:

gulp icons

For more on how to configure and use icons in your components, see the documentation in components/_patterns/01-atoms/04-images/icons/icons.md.

Performance Testing

Emulsify ships with a couple of performance testing suites included. Google PageSpeed Insights offers quick, simple overview of your application while WebPageTest.org returns a large amount of useful data for measuring your site. WebPageTest.org requires an API key which can be requested here. When you get your key, insert it into your local Gulp config file (see Local Configuration above) in the wpt key section near the bottom. See below for commands.

Google PageSpeed Insights: gulp psi

WebPageTest.org: gulp wpt

Deployment

To automatically deploy your Pattern Lab instance to Github Pages for public review, simply run:

gulp ghpages-deploy

This will automatically create your gh-pages branch and send the correct files into that branch. Your Pattern Lab instance will then be available at https://YOUR_GITHUB_ORG.github.io/emulsify/pattern-lab/public/ (check your repo settings for exact base url).

This is what was used to deploy the Emulsify demo.