Usage

Tasks

Change the current terminal directory to the project root:

cd path/to/project

Then run tasks with npm, for example:

npm run dev

Available tasks:

TaskPurpose
devStarts the development server with file watching and auto reload.
buildBuilds production-ready files (output to dist).
docsExport for static file servers (output to static).
inspectPrint the webpack configuration to the console.
lint:cssLints CSS with stylelint.
lint:jsLints JavaScript with ESLint.

About tasks

Tasks are pre-defined package.json scripts for the corresponding pangolin-core command.

JavaScript

JavaScript files are bundled with webpack and transpiled with Babel and the env preset. To learn more about JavaScript Modules (also known as ES Modules or ESM) head over to the MDN articles for the import and export statements.

ESLint is pre-configured with the JavaScript Standard Style. Global ESLint rules are set in .eslintrc.cjs. Per-file rules can be set with comments (e.g. // eslint-disable no-console). Exclude files from linting with an .eslintignore configuration file.

CSS

Sass is a CSS preprocessor supporting variables, nesting and mixins – among many other features. For a quick start jump to the Sass Basics.

PostCSS is a CSS postprocessor. It is similar to Sass but runs after the CSS has been bundled. With the env preset PostCSS can be used like Babel but for CSS.

stylelint monitors the code for errors and consistency deviations defaulting to the Sass Guidelines with a few additions. Global stylelint rules are set in stylelint.config.cjs. Per-file rules can be set with comments (e.g. /* stylelint-disable selector-max-id */). Exclude CSS files from linting with a .stylelintignore configuration file.

HTML

Nunjucks is an HTML templating engine based on JavaScript. Pangolin.js uses Fractal to create static HTML from Nunjucks files. Take a look at the templating docs for further information on Nunjucks.

The dev task serves the web UI with a built-in web server. The build task generates HTML for static file servers.