Vlaanderen Build Tool

Hello awesome developer,

This mono-repository holds all the build scripts and mechanisms to develop components for the Flemish government. All the developer documentation can be called upon inside the repository with an npm script.

The main goal of this build is to contain all the components in one place, to have a good development workflow and to have control over the releases that are put on our: npm,cdn or aws.

This repository holds all the component packages and it is being managed with a tool called Lerna

Features

Packaging & Building:

• Node, Npm, Yarn, Lerna
• BrowserSync, Enquirer

Html, Css & Js:

• Nunjucks
• Sass, Postcss, Csso, Autoprefixer
• Rollup, Babel

Linting:

• EsLint, SassLint

Optimalisations:

• Csso, Imagemin, UglifyJs

Installation

1. Clone the repository:

git clone [email protected]:vlaamseoverheid/vl-build.git

2. Install the dependencies and components:

npm i or yarn install

Getting started

After you have done the installation you can browse trough the files and have a look. All the components are npm packages, and work together with this build.

Filestructure

vl-build/
  + config/
  + dist/
  + scripts/
  + package/
  .env
  .eslintrc.yml
  .gitignore
  .sass-lint.yml
  package.json
  README.md

These are the mainly used files and folders:

Folders:

• config: Holds all the configuration files for the scripts or for the binaries to run.
• dist: This is a generated folder. It is the main folder that gets deployed or served to test your code.
• scripts: This is folder holds all the npm scripts that are used in the package.json. You should not alter any code here.
• package: This folder holds all components, demo, core and util packages.

Files:

• .env: This file must be created to make a release see .config/.env.example, it holds secret config settings.
• .eslintrc.yml: config file for EsLint.
• .gitignore: ignores files in git.
• .sass-lint.yml: config file for SassLint.
• package.json: Contains all dependencies and scripts.
• README.md: This file

Getting Help

Running scripts & Working on the project

We have developed a clean documentation of every script. There you can find the Usage of every script.

You just have to run this to get help:

npm run help:doc or yarn help:doc

You can also run a script to get a list of all scripts:

npm run help:ls:scripts or yarn help:ls:scripts

You can also get information for every component:

npm run help:repo:info -- --npm or yarn help:repo:info -- --npm

Our delivery system

TODO

Authors

• Jeroen Vanhaeverbeke
• Joannes De Backer
• Jonathan Meurrens
• Kris Van Herzeele
• Robbie Bardijn
• Warre Buysse