Pangolin.jsUsage
Legacy version
You’re browsing the documentation for v5. View the docs for the latest version →
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.js 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-disable no-console). Exclude files from linting with an .eslintignore configuration file.
The build task produces up to three files in normal mode:
| File | Purpose |
|---|---|
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:
vendors.modern.jsmain.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 Guidelineswith 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.js 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.