Statix
A configurable static site generator used for our front end projects. It uses a file in the root of your project called statix.config.js that the CLI will consume to build and create a development server for you.
Demo Project
- Run
npm run demo
Use in project
npm install hemamaps/statix
- Create
path-to-project/statix.config.js
// This example uses the configuration from hemamaps/statix-demo
var statixPlugins = require('statix').plugins;
var iconOptions = require('./lib/icons');
var webpackConfig = require('./webpack.config');
module.exports = {
useFileWatch: true,
port: 8000,
sourceFolder: process.cwd() + '/source', // Expects absolute URL to the source
outputFolder: process.cwd() + '/build', // Expects absolute URL to the output folder
watchFolders: [process.cwd() + '/source'], // Expects absolute URL to the folders you want the file watcher to be applied to
plugins: [
[
new statixPlugins.SassPlugin({
directories: ['/assets/**/*.scss']
}, {
pattern: ['/**/*.scss']
}),
new statixPlugins.HandlebarsPlugin({
directories: ['/**/*.html.hbs'],
templateData: { test: 'test example'},
batch: ['/layouts', '/partials']
}, {
pattern: ['/**/*.html.hbs']
}),
new statixPlugins.CopyPlugin({
directories: ['/**/*.png']
}, {
pattern: ['/assets/img/**/*.png', '/assets/img/**/*.jpg']
})
],
new statixPlugins.GroupPlugin({
plugins: [
new statixPlugins.DirectoryColorfyPlugin({
colors: iconOptions.test.colors,
targetFolder: '/assets/img/svgs/support-src'
}),
[
new statixPlugins.DirectoryEncoderPlugin({
targetFolder: '/assets/img/svgs/support-src-colorfy',
cssFileName: '/assets/img/svgs/support.css',
template: '/assets/img/svgs/support.css.hbs',
selectors: iconOptions.test.selectors,
prefix: 'support-'
}),
new statixPlugins.DirectoryEncoderPlugin({
targetFolder: '/assets/img/svgs/icon-src',
cssFileName: '/assets/img/svgs/icon.css',
template: '/assets/img/svgs/icon.css.hbs',
prefix: 'icon-'
}),
],
new statixPlugins.ConcatFilesPlugin({
files: ['/assets/img/svgs/support.css', '/assets/img/svgs/icon.css'],
outputFolder: '/assets/css',
fileName: 'svg.css'
}),
new statixPlugins.CleanPlugin({
directories: ['/assets/img/svgs/support-src-colorfy', '/assets/img/svgs/support.css', '/assets/img/svgs/icon.css']
})
]
}, {
pattern: ['/assets/img/svgs/**/*.svg']
}),
new statixPlugins.WebpackPlugin({
configuration: webpackConfig
})
]
};
- Install statix CLI
- run
statix serve
Plugins
Clean Plugin
This plugin will remove files that have been generated in your source folder as part of another task
Concat files plugin
This plugin concatinates multiple files into a single file and outputs into the statix .tmp directory
Copy Plugin
This plugin copies files from source to the statix .tmp directory
Directory Colorfy Plugin
This plugin runs directory colorfy
Directory Encoder Plugin
This plugin runs directory encoder
Group Plugin
This plugin takes an array of other plugins that will be run synchronous. Useful for if you have multiple tasks that are all related to the outcome.
Handlebars Plugin
This plugin takes handlebars templates and builds them
Sass Plugin
This plugin builds your sass files
Webpack Plugin
This plugin runs a webpack server
Contributing
Build Project
Built on ES6 and uses babel to compile down to ES5
- Run
npm run build