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 for CMS integration. Outputs to dist.
build:dev Generates a version of Pangolin for static file servers. Outputs to dev.
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 head over to the MDN articles on import and export.

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

The build task produces up to three files in normal mode:

File Purpose
runtime.js webpack runtime and manifest data.
vendors.js Third-party scripts from node_modules (only if files from npm are imported).
main.js Main application code.

The build --modern mode generates three additional files:

  • runtime.modern.js
  • vendors.modern.js
  • main.modern.js

These skip transpilations to ES5 in order to serve smaller bundles for modern browsers.

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 Guidelines with a few additions. Global stylelint rules are set in .stylelintrc.json. 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.

The build task produces up to two files:

File Purpose
vendors.css Third-party CSS from node_modules (only if files from npm are imported).
main.css Main application CSS.

HTML

Nunjucks is an HTML templating engine based on JavaScript. Pangolin creates static HTML from Nunjucks files. Take a look at the templating docs for further information on Nunjucks.

Nunjucks resolves all file paths relative to the src folder.

The Nunjucks templates are for development and reference purposes only and the build task will not create any HTML. The dev task serves the components folder with a built-in web server. The build:dev task generates HTML for static file servers.