Getting Started
Houl is created for simplifying a common workflow of static site coding. It builds source files with customizable tasks, watches source changes and serves built files.
Since Houl abstracts the common workflow as its own feature, you will not be annoyed with complex config files any more. All you have to do is just declare how to transform each file and which file the transformation is applied.
Installation
Install Houl from npm:
# npm
$ npm install -g houl
# yarn
$ yarn global add houl
Simple Example
Let's look into how to transform your .pug
and .scss
files with Houl. Install depedencies at first:
$ npm install -D gulp-pug gulp-sass
Then write a task file (houl.task.js
) which you declare how to transform for each file:
// houl.task.js
const pug = require('gulp-pug')
const sass = require('gulp-sass')
exports.pug = stream => {
return stream.pipe(pug())
}
exports.sass = stream => {
return stream.pipe(sass())
}
You also specify a directory path of the source/destination and which file the transformation is applied in a config JSON file (houl.config.json
):
{
"input": "src",
"output": "dist",
"taskFile": "houl.task.js",
"rules": {
"pug": "pug",
"scss": {
"task": "sass",
"outputExt": "css"
}
}
}
Build the src
directory after adding some source files by following command. The output is in dist
directory:
$ houl build
The configurations are quite simple because Houl automatically handle a dev server and watching. The important thing is that you can use any Gulp plugins in a Houl task file. So you would easily migrate your Gulp workflow to Houl.