Project scaffolding and build system for static sites using Gulp, PostCSS, and Nunjucks.
Pairs well with style-kit.
Before you can build the project there are some dependencies that need to be installed. First install the system-wide dependencies listed below:
- Node.js & npm (
^0.12.0) - Gulp (
^3.9.0)
Once these are installed, clone the repository or download an archive.
Navigate to the project directory and install local project dependencies
with npm install. You can now build the project.
Build tasks are setup in gulpfile.js and configured in config.js.
The default task will clean out the configured destination directory
and build a fresh project into it. Once the project is built a local web
server will be started in the build directory and source files will be
watched for changes.
If you wish to build the project without starting a web server or watching
for changes use the build task.
CSS is processed with a small set of PostCSS plugins. These are listed below:
- autoprefixer
- postcss-import
- postcss-calc
- postcss-custom-properties
- postcss-custom-media
- postcss-color-function
- postcss-pseudoelements
- postcss-bem-linter
- pixrem
- cssnano
The golden rule: All code in any part of the code base should look like a single person typed it, no matter how many people contributed.
Linters are setup to ensure consistent stylesheet format. Feel free to adjust them to your preferences.
The style is enforced by Stylelint and a SUIT CSS / BEM linter. There is also an Editorconfig file that can be used to keep editor settings consistent.
Pages and templates are processed with
Nunjucks. Data from the root property
in config.js is made available to templates through the {{ site }}
variable.
JavaScript bundles are concatenated and minified before being output to the build directory.
Images are minified and output into the build directory.
Other assets can be copied to the build directory with the copy task.