Home

Oscar Otero edited this page Oct 23, 2015 · 10 revisions
Clone this wiki locally

Getting started:

Stylecow uses a stylecow.json file to store its configuration. To create this file interactively, just execute:

stylecow init

Once the file is created, run stylecow to execute it. If the file is placed in other directory or is not named stylecow.json, use the option --config (or -c) to locate it. For example: stylecow --config stylecow-production.json.

watcher

There's a watcher included to keep tracking the css files and converts the code when the files change. Just use the option --watch (or -w).

live reload

Another advance tool is the live reload utility. This creates a server and reload the css in the browser when any css file is modified. Use the option --live-reload (or -r). When the live reload starts, you will see a javascript code that you have to place in your html and it's like the following:

<script type="text/javascript" src="//127.0.0.1:8081"></script>

This creates a websocket that connects your browser with stylecow and it's used to reload the styles. It works like browsersync but simpler and only for css, so fits well for simple use cases.

custom plugins

If you have custom plugins to fit your own needs, use the key modules in stylecow.json to load them, like any other plugin. For example:

{
    "files": [
        {
            "input": "css/styles.css",
            "output": "css/styles.min.css",
            "map": "css/styles.min.map"
        }
    ],
    "support": {
        "explorer": 10,
        "firefox": 30,
        "chrome": 35,
        "safari": 6,
        "opera": 22,
        "android": 4,
        "ios": 6
    },
    "plugins": [
        "color"
    ],
    "modules": [
        "my-plugins/plugin1",
        "my-plugins/plugin2"
    ],
    "code": "minify"
}

To learn how to create plugins, visit the API page

Advanced use

If stylecow.json is not enough, you can use stylecow.js, a javascript file that will be executed by stylecow. Example:

module.exports = function (stylecow) {
    let css = stylecow.parseFile('css/styles.css');
    //do stuff
}

To execute it: stylecow run (it search automatically for stylecow.js file). If your file is named differently, use stylecow run your-filename (with no .js).

For developers

You can learn more about stylecow (API, AST, etc) here

Usage examples: