# Usage

# Tasks

Change your current terminal directory to the project root with cd path/to/project.

Then run tasks with npm run task-name, e.g. npm run dev.

Task Purpose
dev Starts the development server with file watching and auto reload.
build Builds production-ready files (output to dist) and static export (output to static).
inspect Print the webpack configuration to the console.
lint:css Lints CSS with stylelint.
lint:js Lints JavaScript with ESLint.

Note

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 (commonly known as ES modules) 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.js. 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.

stylelint monitors the code for errors and consistency deviations defaulting to the Sass Guidelineswith a few additions. Global stylelint rules are set in stylelint.config.js. 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.