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. var themeDir = './docroot/themes/custom/emulsify/';
3. Also, set the browserSync startPath variable, e.g., startPath: 'docroot/themes/custom/emulsify/pattern-lab/public/',

Available Commands

SVG icons

We are using a gulp SVG sprite generator, which automatically creates the SVG CSS in _icon_sprite.scss including a Sass mixin and class (using that mixin) for each icon. Simply add separate SVG files into images/icons/src/ and run:

gulp icons

For more on how to configure icons, see the documentation in Pattern Lab or this file.

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