lessio

Auto-compiles less stylesheets and auto-reloads them in the browser.

npm install lessio
16 downloads in the last week
32 downloads in the last month

Installation

npm install -g lessio

Configuration

Go to your project's main directory, and execute:

lessio --generate

Mappings

This will generate an example configuration file with the name lessio.json. Edit this file and change the mappings configuration so it reflects your project structure. Each mapping has a name to distinguish between mappings in the lessio log feedback. A mapping's main LESS file(which can import other less files) is specified with a relative path in the mapping' in directive. The out directive is a relative path that the lessCss compiler uses to write the result to. This css file is eventually included in your project's html head.

The href mapping directive is used to recognize the mapping's out CSS in the browser, when a reload is triggered. This can be the full path or a partial href, as long it uniquely identifies this CSS file.

Watch

Normally you don't have to change anything here, unless you want to run LessIO's watch service on another port...

Usage

Compile

When you only need to compile all mappings just once, use the compile option like:

lessio --compile

Watch

LessIO's watch service autocompiles LESS to CSS and autoreloads the CSS in the browser. Launch LessIO's watch service in the same directory as the configuration file once you finished configuring it:

lessio --watch

Autocompile

When you save a modified LESS file, specified in one of the mappings, LessIO's watch service will automatically compile/save all LESS mappings to their respective CSS counterparts.

Autoreload

With the watch service running, navigate your browser to localhost:8081. You should see a blank page with a Bookmarklet link. In order to use autoreload on your project's html-page, the browser needs to connect to LessIO's watch service. This is done by injecting some javascript into your project's webpage, using a bookmarklet. A LessCSS bookmarklet(Chrome) can be made like this:

  • Right-click on The Bookmarklet link at localhost:8081
  • Select Copy Link Address
  • Right-click in the bookmarks bar, select Add Page
  • Paste the javascript in the URL field
  • Enter LessIO for the Name field

Now that you have a bookmarklet in the browser's navigation bar, open the URL to your development site(e.g. http://localhost:8123). CLick on the LessIO bookmarklet link in the navigation-bar and start editing your LESS files(as specified in the configation mapping). Once you save a LESS file, it should trigger an autocompile on the out file and an autoreload on the href version in the browser.

Happy styling!

Ps. Don't forget to update the bookmarklet when you change watch service settings!

npm loves you