Advanced Usage

This wiki page aims to explain few additional grommet-toolbox features that deviates from the regular usage but can be useful depending on your situation.

Modular loading

When you import grommet-toolbox as in: import grommetToolbox from 'grommet-toobox' all tasks will be injected into your gulp instance. If you are only interested in one particular feature (e.g. linters), you may want to load things separately. Luckily, you can do that using the following import:

import gulp from 'gulp';
import {linterTasks} from 'grommet-toolbox';
// or import {testTasks} from 'grommet-toolbox';
// or import {devTasks} from 'grommet-toolbox';
// or import {distTasks} from 'grommet-toolbox';
// or import {syncTasks} from 'grommet-toolbox';
// or import {linterTasks, devTasks, distTasks, syncTasks} from 'grommet-toolbox';

linterTasks(gulp);
// or testTasks(gulp);
// ...

Load current options

If you want to access the current options instance from grommet-toolbox you can do the following:

import {getOptions} from 'grommet-toolbox';

const options = getOptions();

Run webpack from command-line

If you want to run webpack from the command-line you can do the following:

webpack --config node_modules/grommet-toolbox/lib/webpack.dist.config.js

Use your own webpack configuration

If you have your webpack config and want to use grommet-toolbox you can do the following:

gulp dist --config $PATH_TO_YOUR_WEBPACK_CONFIG

Use your own linters

To use your own linter configuration just add .eslintrc and/or .scss-lint.yml at the root folder of your project.

Create a dist without minified code

Sometimes it is useful to run gulp dist and evaluate the generated bundle. To achieve that, run the following:

gulp dist --skipMinify