Build

Paths

Specify high level project directory names

"paths": {
    "root": "public",
    "assets": "assets",
    "source": "source",
    "build": "build"
}
OptionDescriptionRequired

root

Web accessible directory

assets

Destination of all assets and output generated build process. This directory is nested inside of web root

source

Location of all files and assets for project. The build process watches and builds from this directory

build

Build process tasks and configurations

Server

Speed up your development workflow

Browsersync

Wee uses Browsersync, a library for running a development server that monitors changes to project files and either auto-injects updates (CSS changes) or auto-refreshes the browser (JS changes) when changes are made. This can be very helpful for streamlining the development process. The CLI command wee run starts the dev server based on the configuration in wee.json.

"server": {
    "ghostMode": false,
    "host": "auto",
    "port": 9000,
    "https": true,
    "proxy": "https://wee.dev",
    "static": true,
    "reload": {
        "enable": true,
        "watch": {
            "root": true,
            "paths": [],
            "extensions": [
                "html"
            ],
            "ignore": []
        }
    }
}

Ghostmode

Browsersync provides the ability to mirror browsers on different devices. Clicks, scrolls & form inputs on any device will be mirrored to all others when this property is enabled in wee.json. This is helpful for manual device testing when you are building a page or feature of a site.

"ghostMode": true

Host

Override host detection if you know the correct IP to use for the development server. Otherwise, leave this setting on auto.

"host": "192.168.1.1"

Port

Use a specific port for the development server URL. The default port in wee.json is 9000.

"port": 8080

Https

Enable HTTPS for localhost development. Note - this is not needed for proxy option as it will be inferred from your local target URL.

"https": true

Proxy

If you already have a local server setup, set the local domain that Browsersync should proxy. When the development server is started, you will be able to access your local domain through the Browsersync proxy. The proxy domain generated by Browsersync is based on the host and port configuration properties.

"proxy": "https://wee.dev"

CLI Command

wee run --local

Running this command will override the static property in wee.json.

Static

Run the development server for serving static files (JS/CSS/HTML) located in your web root (public directory by default). Set this property to false if wanting to proxy a local domain. Otherwise, a static development server will be launched when executing wee run without a flag.

"static": true

CLI Command

wee run --static

Reload

Configure whether the development server should reload when files change as well as what files to watch for changes.

"reload": {
    "enable": true,
    "watch": {
        "root": true,
        "paths": [],
        "extensions": [
            "html"
        ],
        "ignore": []
    }
}
OptionDescriptionRequired

enable

Cause the browser to refresh, or inject the files where possible whenever changes occur

watch.root

Determine if web root should be watched. This value is configured by paths.root in wee.json

watch.paths

Specify files to watch. Globbing patterns may be used.

watch.extensions

Specify file extensions that should be watched besides css and js extensions

watch.ignore

Specify paths that should be ignored

Script

Wee utilizes Webpack to build JavaScript output files

Many of the options in the script block of wee.json directly translate to Webpack documentation. Please refer to this documentation if you would like a deeper understanding of some of the concepts discussed.

"script": {
    "entry": {
        "app": "app.js"
    },
    "output": {
        "filename": "[name].bundle.js"
    },
    "chunking": {
        "enable": false,
        "options": {}
    }
}

Entry

Define the entry point(s) for your application. Each key represents the output filename, and the value represents the starting point of Webpack's dependency graph. Think of it as the starting point of your application. In most cases, your routes will live in this file. Glob patterns can be used if referencing multiple entry points.

"entry": {
    "app": "app.js",
    "other": [
        "./source/scripts/other/*.js",
        "otherapp.js"
    ]
}
// result will be placed in /public/assets/scripts
app.bundle.js
other.bundle.js

File paths are relative to source/scripts directory unless prefixed with ./ or ../.

Output

Define name of output file(s). You can hard-code a filename or use a substitution if you have multiple entry points.

"entry": {
    "app": "app.js"
},
"output": {
    "filename": "app.bundle.js" 
}
"entry": {
    "app": "app.js",
    "other": "other.js"
},
"output": {
    "filename": "[name].bundle.js"
}

Chunking

Generate separate output files containing shared dependencies. This can be very useful if multiple entry points exist by reducing each bundle's individual payloads, and allowing the browser to cache the shared codebase.

"chunking": {
    "enable": true,
    "options": {
        "name": "test",
        "minChunks": 2  
    }
}

chunking.options can take any options passed to the CommonsChunkPlugin.

Style

Customize your stylesheet output

By default, a single minified stylesheet will be generated by the build process. The options provided here give granular control over the main stylesheet as well as the option to create additional independent stylesheets.

"style": {
    "features": {
        "buttons": true,
        "code": true,
        "forms": true,
        "print": true,
        "tables": true
    },
    "breakpoints": {
        "mobileLandscape": 480,
        "tablet": 768,
        "desktop": 1024,
        "desktop2": 1280,
        "desktop3": 1440
    },
    "breakpointOffset": 25,
    "build": [
        "./source/styles/custom1.pcss",
        "custom/*.pcss"
    ],
    "compile": {}
}

Features

Setting any of these properties to false will exclude base styling for those elements from the stylesheet output.

"features": {
    "buttons": false, // button classes will have no effect on markup
    "code": true,
    "forms": true,
    "print": true,
    "tables": true
}

Breakpoints

Each breakpoint defined in this configuration block will register a min-width media query in your stylesheet output. Each breakpoint can have a corresponding breakpoint file in styles/breakpoints as well as can be referred to in component files thanks to postcss-variable-media.

breakpointOffset is intended to account for browsers that push content over to make room for the vertical scrollbar. Each breakpoint value will have this value subtracted from it before generating the media query in output stylesheets.

Breakpoint names should be camelCase and corresponding breakpoint file names should be dash-case. If you don't want to create these files, just run the build process after adding a new breakpoint. A breakpoint file will be generated automatically.

"breakpoints": {
    "mobileLandscape": 480, // styles/breakpoints/mobile-landscape.pcss
    "tablet": 768, // styles/breakpoints/tablet.pcss
    "desktop": 1024, // styles/breakpoints/desktop.pcss
    "desktop2": 1280, // styles/breakpoints/desktop-2.pcss
    "desktop3": 1440 // styles/breakpoints/desktop-3.pcss
},
"breakpointOffset": 25
/* Example card component */
@mobileLandscape {
    .card {
        background: blue;
    }
}

/* output */
@media(min-width: 455px) {
    .card {
        background: blue;
    }
}

Build

By default, Wee includes any file that is in the styles directory into the main stylesheet. However, the build array specifies additional files that you want included.

When utilizing the component directory, it is difficult to take full advantage of the cascading nature of CSS. With proper naming conventions, the cascade should rarely need to be utilized. However, in cases where you want to ensure that one set of CSS rules come before another, the build option can help with this as well.

"build": [
    "./source/styles/style.pcss",
    "custom/*.pcss",
    "./unusual/location/style.pcss"
]

File paths are relative to styles directory unless prefixed with ./ or ../.

Compile

The compile option gives you the ability to output multiple stylesheets. Any files referenced will not be included in the main stylesheet.

"compile": {
    "array.css": [
        "path/to/one.css",
        "path/to/two.less"
    ],
    "globbing.css": "path/to/*.less"
}

File paths are relative to styles directory unless prefixed with ./ or ../.