@wok-cli/preset-standard

A standard preset with pre-configured common tasks for Wok.

• Installation
• Usage
• Environmental Defaults
• Folder Structure
• Exposed tasks
  • bump
  • clean
  • copy
  • styles
  • scripts
  • modernizr
  • views
    • Subfolders
    • Nunjucks globals
  • server
  • watch
  • default
  • serve
• Extending the configuration
• Configuring Babel

Installation

This preset requires @wok-cli/core and gulp.

npm i gulp @wok-cli/core @wok-cli/preset-standard --save-dev

Usage

1. Create a wok.config.js file in the root folder of your project with the following code:

module.exports = require('@wok-cli/preset-standard/config');

2. Create a gulpfile.js in the root folder of your project with the following code:

const $ = require('@wok-cli/core');
const preset = require('@wok-cli/preset-standard');

const wok = preset($);

module.exports = wok.resolve();

Alternatively to point (1) you can reference the preset config in a wok property in your project's package.json:

{
  "name": "my-project",
  // ...
  "wok": "@wok-cli/preset-standard/config"
}

Environmental Defaults

This preset sets the following environmental options:

| parameter | value | description | | ---------- | ------ | --------------------------------------------- | | lint | true | lints JavaScript and CSS files on build | | sourcemaps | | writes external sourcemaps during development | | paths | | an object with path fragments |

Folder Structure

The paths object defines the expected folders structure as follows:

├─ application # sources root folder
│  ├─ assets
│  │  ├─ javascripts # JavaScript files
│  │  ├─ stylesheets # SASS files
│  ├─ vendors # 3rd party files not installed by any package manager
│  ├─ fixtures # Data files. May contain JSON, JS, Markdown, etc...
│  ├─ views # Nunjucks/HTML files
│  │  ├─ partials # View partials
│  │  ├─ templates # Nunjucks templates
│  │  ├─ *.njk # Views
├─ static # Files to be copied into `public` "as-is" like images, fonts, videos
├─ public # Build destination folder

Exposed tasks

bump

Implements @wok-cli/task-bump.

clean

Removes all files in the public folder.

copy

Copies files from the static folder into the public folder. Image files will be processed using @wok-cli/plugin-imagemin.

styles

Processes CSS and SCSS files in application/assets/stylesheets and outputs the results in public/assets/stylesheets. SCSS files are processed using @wok-cli/plugin-sass.

Files will be linted with gulp-stylelint before processing. Set the lint property to false to disable the linter.

Note: sass includePaths options is set by default to: ['application/vendors', 'node_modules'].

scripts

Processes JavaScript files in application/assets/javascripts and outputs the results in public/assets/javascripts. Files will be parsed using Babel. See below for configuration options.

Files will be linted with gulp-eslint before processing. Set the lint property to false to disable the linter.

modernizr

Generates a custom Modernizr build parsing JavaScript, CSS and SCSS files in the application/assets/javascripts and application/assets/stylesheets folders. The output build will be saved into the public/vendors/modernizr folder.

Implements @wok-cli/task-modernizr.

views

Processes view files in application/views and outputs the results into public.

This task implements the following modules:

• @wok-cli/task-views
• @wok-cli/plugin-render-nunjucks: Nunjucks templates support.
• @wok-cli/plugin-useref: Assets replace and concatenation (production only).

Subfolders

You can create as many sub-folders in application/views as your project requires. Note that template is a reserved folder for extendable Nunjucks templates and partials should only be used for HTML/Nunjucks partials.

Files starting with _ will be ignored.

Nunjucks globals

The task will also parse JSON view data sources from application/fixtures/ and expose them to the Nunjucks templates as global objects.

It will also expose two additional global objects:

• _: the lodash library
• faker: the faker library

server

Runs a static server on localhost:8000 serving the public and static folder.

Implements @wok-cli/task-server.

watch

Watches files in application and static for changes, processes them and reloads the page.

CSS files trigger a live-reload (file injection) instead of a full reload.

You can customize the running watchers by tapping into the watchers hook. Hook functions receive an array as first argument. The array can contain:

• a configuration object suitable for $.watcher
• a custom function

Hook function also receive an object as 4th argument with the following properties:

| parameter | value | description | | --------- | ------ | --------------------------------------------------------------------------------- | | tasks | object | An object containing all the previously defined tasks (both normal and composed). | | params | object | The watch task params | | reload | task | Reload task | | stream | task | Reload stream task |

default

The default task (executed by running gulp on a terminal) will perform the following tasks:

• clean
• copy
• styles
• scripts
• modernizr
• views

For production builds, assets will be revised using @wok-cli/task-rev and scripts will be minified with gulp-minify.

serve

A shorthand task executing the following tasks: default, watch and server.

Note: when executed within serve the default task will not copy files from static to public.

Extending the configuration

The preset exposes a configuration function that returns an object that you can extend to customize it:

module.exports = (env) => {
  const presetConfig = require('@wok-cli/preset-standard/config')(env);

  return {
    ...presetConfig,
    // add your properties here
  };
};

Configuring Babel

This plugin comes with a default configuration for Babel based on @babel/preset-env and including @babel/plugin-proposal-class-properties.

@babel/preset-env is configured with the following options:

{
  modules: false,
  loose: true,
  useBuiltIns: false,
}

In order to use this configuration on your project create a .babelrc.js file in the root folder of your project and add the following content:

module.exports = require('@wok-cli/preset-standard/configs/babel');

Also remember to configure target browsers by adding a browserslist property to your project's package.json:

{
  // ...
  "browserslist": [
    ">= 1%",
    "last 1 Chrome version",
    "last 1 ChromeAndroid version",
    "last 1 Edge version",
    "last 1 Firefox version",
    "last 1 iOS version",
    "last 1 Safari version"
  ]
}