@videinfra/static-website-builder

[npm-url]: https://npmjs.org/package/@videinfra/static-website-builder
[npm-image]: http://img.shields.io/npm/v/@videinfra/static-website-builder.svg
[travis-url]: https://travis-ci.org/videinfra/static-website-builder
[travis-image]: https://travis-ci.org/videinfra/static-website-builder.svg?branch=master

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url]

static-website-builder is a customizable static site project builder powered by Gulp, Rolldown, SASS, PostCSS, TwigJS, BrowserSync

Requirements

- Node.js >= 20.0.0

Features

- Gulp: built using gulp
- Built-in Server: Local development server with hot reloading
- Templates: HTML templates with minification
- TWIG: Optional TwigJS template engine with optional plugins for additional functions and filters
- Stylesheets: Autoprefixing and minification with PostCSS support
- SASS: Optional SASS / SCSS compilation
- Javascript/Typescript: Transpilation, bundling and minification with rolldown
- SVG icons: Sprite generation from individual SVG files

* Paths: Source and destinations paths are configurable
* Features: All features can be configured or disabled
* Plugins: create additional plugins / gulp tasks

Quick start

``
npm init
npm install @videinfra/static-website-builder --save
npx builder init
`

Start development server
`
npm run start
`

Build production files
`
npm run start
`

Note: these commands are added to the project during npm init.

Commands

$3

`npx run builder watch`

$3

`npx run builder build`

$3

`npx run builder --tasks`

Project templates

As used in quick start, project templates are used to generate boilerplate / starter files and add commands to the project:

- default - simple template with normalize.scss

Plugins

Built-in plugins:
- sass - adds .sass and .scss file rendering using SASS
- twig - adds .twig file rendering using TwigJS
- twig/symfony-filters - adds humanize filter as found in Symfony
- twig/symfony-functions - adds asset function as found in Symfony
- twig/lodash-filters - adds omit, pick, filter, reject and find filters as in lodash

Plugins can be enabled by adding them to the config/config.js, eg.

`js
export const plugins = [
// Enables SASS engine and .sass and .scss file compilation
require('@videinfra/static-website-builder/plugins/sass'),

// Enables TwigJS engine .twig file compilation
require('@videinfra/static-website-builder/plugins/twig'),
require('@videinfra/static-website-builder/plugins/twig/symfony-filters'),
require('@videinfra/static-website-builder/plugins/twig/symfony-functions'),
require('@videinfra/static-website-builder/plugins/twig/lodash-filters'),
];
``

Wiki

See our wiki for additional information.

[npm-url]: https://npmjs.org/package/@videinfra/static-website-builder
[npm-image]: http://img.shields.io/npm/v/@videinfra/static-website-builder.svg
[travis-url]: https://travis-ci.org/videinfra/static-website-builder
[travis-image]: https://travis-ci.org/videinfra/static-website-builder.svg?branch=master