marvinhagemeister / kiki

Best practice powered bundler

Kiki Bundler

Kiki-Bundler is an opiniated frontend bundler, providing a great out-of-the-box bundling experience with minimal configuration need.

At work we got frustrated with slow watch-tasks, when tools don't support incremental building (except for rollup, which is awesome!). Having recently inherited a huge legacy project with a lot of different root scss files, we needed something faster. The existing code used grunt which took up to 10s to compile.

These simple benchmarks were taken on my Macbook Pro 13" 2016.

Tool	Compiler	Complete Build	incremental Build
grunt-contrib-sass	Ruby-Sass	10s	10s
grunt-sass	Libsass	2.1s	1.8s
kiki + autoprefixer	Libsass	1.8s	150 - 300ms

So yeah, kiki is a LOT faster even with autoprefixer included.

Currently only sass compilation is supported, but support for javascript via rollup or webpack is planned.

Usage

npm install --save-dev kiki-bundler

Add a config called kiki.config.json at the project root:

{
  "sass": {
    "src": "path/to/my/scss",
    "dest": "path/for/compiled/output"
  }
}

Add kiki to your npm scripts in your package.json:

{
  "scripts": {
    "build": "kiki build",
    "watch": "kiki watch"
  }
}

Configuration Options

Sass

Option	type	default	Description
src	string	null	Path to scss root directory
dest	string	null	Path to output directory
addVendorPrefixes	boolean	true	automatic vendor prefix insertion via autoprefixer
cssnext	boolean	false	use tomorrows css features today

CLI-Arguments

Usage: kiki <command> [options]

Commands:
  watch  Watch for file changes and compile immediately
  build  Build minified production files

Options:
  -c, --config   Path to config file      [string] [default: "kiki.config.json"]
  --production   Force production builds
  -v, --version  Show version number                                   [boolean]
  -h, --help     Show help                                             [boolean]

Examples:
  kiki build -c myconfig.json

Copyright 2016 Marvin Hagemeister

Why the name?

At work we have quite a football table culture (which is called Kicker in German) and some of us even play in the german football table league. It only made sense to name the tools we use daily accordingly.

kiki's Issues

Add support for CSS-Modules

Will likely happen via postcss-modules.

Remove synchronous IO calls

Watch mode wrong base path for nested styles

Steps to reproduce:

1. Create scss in subfolder
2. Trigger watch by making a change
3. Wrong base path is applied for the destination file

We likely need to change the base option of IFile

Rewrite config handling

Is a bit of a mess right now

Improve Error messages

Improve Error messages instead of throwing the whole stack trace, when there was a compilation error.

newly added partial is not recognized as such in watch mode

This only happens once upon creating the partial.

Implement source map support

Throw a warning when a root file is used like a partial

I've experienced a few instances where users didn't know about the difference between root files and partials (the latter starting with an _). Kiki should print an error in these cases, but not throw an exception.

Remove first slash in success message paths

I fear that people we incorrectly assume that the file is created at the unix root /.

  /public/assets/css/file1.css
  /public/assets/css/file2.css
  /public/assets/css/file3.css

Investigate stream api

The streaming api seems like a better fit. Have to check how to stream an array instead of a file

Add silent mode

Or somehow silence console output during tests

Implement sass-graph

This will likely speed up compilation by skipping files which are not affected by new changes. Have to compare if this check doesn't take longer than simply compiling everything though.

See https://github.com/xzyfer/sass-graph

Add minify via NODE_ENV=production

Here is a benchmark of current minifiers:

https://github.com/GoalSmashers/css-minification-benchmark

Add clean task

add css:next

Implement browser-sync

Requirements:

• User can specify watch patterns
• Won't start when no server property is available in config
• Allow middlewares (redbox, webpack, etc)
  • How to pass errors to browser-sync/console.log?

Switch from `yargs` to `commander`

yargs's dependency tree is ridiculous: http://npm.anvaka.com/#/view/2d/yargs . To keep install size small and speedy we should switch to a different cli argument parsing tool.

Candidates so far:

• commanderjs has a similar API and a much saner dependency graph: https://github.com/tj/commander.js

Print errors to `stderr`

Currently all errors are printed to stdout.

Moreover the build task should fail with an exit code of 1. Watch tasks should not exit with 1, because that would abort the process and stop the watcher obviously.