What are mix files?

Mix files are html files with extra syntax sugar. They allow you to do things that html would otherwise not allow such as including other files, looping over arrays, if/else statements, and many other things.

My first mix file

A basic mix file can contain any html and even exclude any of the additional extras that are included to be considered valid.

<!doctype html>
<html>
  <head>
    <title>Horsepower</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

If we create a file called main.mix (above code) and place some html within the file we can load the file using the render() feature built into the server. It could look something like this:

Router.get('/', client => client.response.render('main.mix'))

Mix files can become more powerful by using extends to extend a parent file and using block to set html within the parent.

Minify

Mix files are automatically minified, for a small data transfer over http. Settings can be changed using the builtin settings found in the html minifier package.

The default settings that are set are as follows:

{
  collapseWhitespace: true,
  collapseBooleanAttributes: true,
  decodeEntities: true,
  removeAttributeQuotes: true,
  removeComments: true,
  removeEmptyAttributes: true,
  removeOptionalTags: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true,
  minifyCSS: true,
  minifyJS: true
}

To replace or add your own options you can update the minifier object within the config/view.js file.

module.exports = {
  minifier: {
    removeOptionalTags: false
  }
}