Grommet-toolbox NPM

grommet-toolbox

DEPRECATED: Please use grommet pack and grommet check available in the new grommet-cli

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: 'babel-loader', exclude: /(node_modules\|bower_components\|src\/lib)/ }`
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'`