Customizable static site project builder
npm install @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
- Node.js >= 20.0.0
- 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
```
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.
`npx run builder watch`
`npx run builder build`
`npx run builder --tasks`
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
Built-in plugins:
- sass - adds .sass and .scss file rendering using SASStwig
- - adds .twig file rendering using TwigJStwig/symfony-filters
- - adds humanize filter as found in Symfonytwig/symfony-functions
- - adds asset function as found in Symfonytwig/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'),
];
``
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