Skip to content
Dennis Heibuelt edited this page Jun 1, 2015 · 16 revisions

Patternlab-scaffolding offers a few grunt tasks for you.

$ grunt

$ grunt is the main task which provides (amongst others) the following things:

  • It cleans the public Pattern Lab folder.
  • It looks for new bower components to be injected.
  • It copys the images, fonts and JavaScript from source/ to public/.
  • It compiles Sass, autoprefixes any vendor-specific properties and lints the compiled CSS.

Generates Pattern Lab & frontend assets (no watcher!). Could be integrated in build/deploy process.

$ grunt dev

$ grunt dev extends the $ grunt-task by starting a local server at http://localhost:8000/ and watches any changes being made on the source code. If changes are detected, the relevant compilation takes effect and the browser is reloaded.

This is likely your most frequently used grunt task.

$ grunt sync

$ grunt sync provides a possibility to check your Pattern Lab environment with browser sync. Have a look at their docu for further information.

$ grunt lint

$ grunt lint provides a task to lint your SCSS files according to SCSS-Lint. Potential lint-errors are printed in the terminal. You can check the linters in the .scss-lint.yml-file in the project root and compare it with the linters-docu.