grommet-toolbox

Developer Environment for Grommet applications with the following built-in features:

• Ability to create a production ready distribution with minified JavaScript and CSS
• Ability to sync your distribution to a remote location
• JavaScript and Sass linters
• Development server with hot-reloading
• Test infrastructure based on tape and gulp watch
• Code coverage using Istanbul
• Convert raw svgs to Grommet icons with accessibility support
• Bundle your project and its dependencies in a compressed file

grommet-toolbox runs on top of Gulp.

Install

npm install grommet-toolbox --save-dev

Basic usage

gulpfile.babel.js

import gulp from 'gulp';
import grommetToolbox from 'grommet-toolbox';

var opts = {
  copyAssets: [
    'src/index.html',
    {
      asset: 'src/img/**',
      dist: 'dist/img/'
    }
  ],
  scssAssets: ['src/scss/**/*.scss'],
  jsAssets: ['src/js/**/*.js'],
  mainJs: 'src/js/index.js',
  mainScss: 'src/scss/index.scss',
  devServerPort: 9000
};

grommetToolbox(gulp, opts);

Grommet-toolbox augments gulp object with these additional tasks:

• gulp copy: uses copyAssets option to move files to distribution folder.
• gulp generate-icons: uses icons option to convert raw svg icons to Grommet icons.
• gulp scsslint: uses scssAssets option to lint your Sass code.
• gulp jslint: uses jsAssets and testPaths options to lint your JavaScript code.
• gulp dev: starts a webpack dev server with hot reloading. See options for example configuration.
  • --config: Set the path of the config file to use.
  • --no-preprocess: Skips preprocess tasks.
  • --no-open: Skips opening dev server url in a browser.
• gulp dist: prepares your application/library for production.
  • --config: Set the path of the config file to use.
  • --no-preprocess: Skips preprocess tasks.
  • --no-minify: Skips minifying JS code.
• gulp sync: uses sync option to sync distribution content to a remote server.
• gulp test: uses testPaths option to execute tests based on Tape.
• gulp test:watch: runs tests and watch for changes to execute the tests again.
• gulp test:coverage: runs tests and generates a code coverage report.
• gulp test:update: runs all the tests and updates the Jest snapshots for the project.
• gulp pack: uses the package.json dependencies object to create a compressed file with all the dependencies included.

Recommended Usage

As your configuration grows it gets really difficult to manipulate everything inside a single gulp file. Grommet-toolbox offers a config file where you can store your application specific settings. This is the recommended way of using this tool. Now you will have two files, grommet-toolbox.config.js and gulpfile.babel.js:

grommet-toolbox.config.js

export default {
  copyAssets: [
    'src/index.html',
    {
      asset: 'src/img/**',
      dist: 'dist/img/'
    }
  ],
  scssAssets: ['src/scss/**/*.scss'],
  jsAssets: ['src/js/**/*.js'],
  mainJs: 'src/js/index.js',
  mainScss: 'src/scss/index.scss',
  devServerPort: 9000
};

gulpfile.babel.js

import gulp from 'gulp';
import grommetToolbox from 'grommet-toolbox';

grommetToolbox(gulp);

grommet-toolbox will look into your application's root folder and extract the configuration for your project.

Options

property	type	description	default	example
argv	object	Optional. Default cli args set on gulp tasks. See above.	{}	{open: false}
base	string	Optional. Base working directory	process.cwd()	base: '.'
copyAssets	array	Optional. Assets to be copied to the distribution folder	undefined	See copyAssets WIKI
eslintConfigPath	string	Optional. Path to your custom eslint config file	undefined	eslintConfigPath: path.resolve(__dirname, '../.eslintrc')
eslintOverride	string	Optional. Path to your custom eslint overrides	undefined	eslintOverride: path.resolve(__dirname, 'customEslintrc')
devPreprocess	array	Optional. A set of tasks to run before gulp dev	undefined	['set-webpack-alias']
devServerDisableHot	boolean	Optional. If true, will disable webpack hot reloading	false	devServerDisableHot: true
devServerHost	string	Optional. Host address for the webpack dev server	'localhost'	devServerHost: '127.0.0.1'
devServerPort	int	Optional. Sets a listener port for the webpack dev server	8080	devServerPort: 9000
devServerProxy	object	Optional. Proxy requests from the webpack dev server	undefined	devServerProxy: { '/rest/*': 'http://localhost:8114' }
devServer	object	Optional. Any additional options for the webpack dev server	undefined	devServer: { https: true }
dist	string	Optional. Location of the distribution folder	'dist'	dist: 'distribution'
distPreprocess	array	Optional. A set of tasks to run before gulp dist	undefined	['dist-css']
env	object	Optional. Adds environment variables for Node	undefined	{ DEV_MODE: 'true'}
icons	object	Optional. Converts raw icons to a Grommet icon	undefined	See icon WIKI
jsAssets	array	Required. Location of your JavaScript Assets	[]	jsAssets: ['src/js/**/*.js']
jsLoader	object	Optional. If you want to use another webpack loader for your JavaScript Assets	react-loader	`{ test: /.jsx?$/, loader: 'react-hot!babel-loader', exclude: /(node_modules
lintCache	boolean	Optional. If true, it will skip caching for linters (build time increases).	true	lintCache: false
mainJs	string	Required. Location of your main JavaScript file	undefined	mainJs: 'src/js/index.js'
preCommitTasks	array	Optional. The gulp tasks to run as git pre-commit hooks	jslint, scsslint, test	['jslint','scsslint','test']
publicPath	string	Optional. Your main app context	'/'	publichPath: '/docs'
scssAssets	array	Optional. Location of your Sass Assets	[]	scssAssets: ['src/scss/**/*.scss']
scssLoader	object	Optional. If you want to use another webpack loader for your SCSS Assets	react-loader	{ test: /\.scss?$/, loader: 'file?name=assets/css/[name].css!sass'}
scsslint	boolean	(deprecated) Optional. If false, it will skip Sass linting	true	scsslint: false
sync	object	Optional. Syncs your content to a remote server	undefined	sync: { hostname: 'grommet.io', username: 'grommet', remoteDestination: '/var/www/html/'}
testPaths	array	Optional. Location of your test assets	undefined	testPaths: ['test/**/*.js']
webpack	object	Optional. Additional webpack options to be used in gulp dist	undefined	See Webpack Configuration
webpackProfile	string	Optional. Location to save webpack profile stats in json format.	undefined	webpackProfile: './stats.json'

Example

See grommet-todo

Advanced

See Advanced Usage wiki