less_watch

LESS folder watcher with optional debug information

npm install less_watch
1 downloads in the last day
9 downloads in the last week
16 downloads in the last month

LESS folder watcher with optional debug information

A nodejs script that allows you to watch a folder for changes and compile the less css files into another folder, optionally passing original lessc compiler arguments. When the --line-numbers=mediaquery argument is used, this nodejs script will fix the syntax so that webkit understands it too.

An enhanced version of Q42/lesswatch with support of:

  • recursive folders
  • multiple source folders
  • automatically detection of @import, when importing .less files, those will automatically be tracked, so when changed dependent files will be automatically generated as well. These will be re-detected every time a file is updated/changed.
  • show-dependencies tree
  • generate .min.css files
  • delete empty .css and .min.css files for non-css, but less specific files such as variables.less or mixins.less

I only added those latter modifications. All credits should go to those who did the most work (which is like 80%):

Jonathan Cheung for writing the entire less watcher https://github.com/jonycheung/Dead-Simple-LESS-Watch-Compiler

Mikeal Rogers for writing the original folder watch script https://github.com/mikeal/watch

Installation instructions

First, install LESS. Best to make them accessible from anywhere in your shell.

npm install less --global

Then, install less_watch.

npm install less_watch --global

Usage

less_watch [options] <source-folder> <destination-folder>

Example

less_watch --line-numbers=mediaquery less css

That will watch ./less folder and compile the less css files into ./css when they are added/changed and add mediaquery-formatted debug info to the css for debugging with webkit-inspector.

  • This script only compiles files with .less extension. More file extensions can be added by modifying the allowedExtensions array.
  • Files that start with underscores _style.css or period .style.css are ignored. This behavior can be changed in the filterFiles() function.

Advanced options

Usage:

less_watch [options] <source-folder> [destination-folder] --source=folder1 --source=folder2 --source=folderEtc

 [options] can contain original lessc options to pass to the compiler, or
 --source=folder            Adds multiple source folders
 --case-sensitive            Files and folders are parsed case-sensitive, including their dependinces. Useful on a non-windows machine"
 --show-dependinces        Prints dependinces between less files, so you can debug why certain files are generated together.
 --generate-min            Enables generation of .min.css files as well as .css files. They will be optimized using --compress and --yui-compress arguments to lessc. --line-numbers will automatically be stripped out.

Examples:

  • Outputting all to a custom folder i.e. css
      less-watch --line-numbers=mediaquery less css
    

That will watch ./less folder and compile the less css files into ./css when they are added/changed and add mediaquery-formatted debug info to the css for debugging with webkit-inspector.

  • Outputting all to the same folder as where the less source was found
less_watch --line-numbers=mediaquery less

That will watch ./less folder and compile the less css files into ./less when they are added/changed and add mediaquery-formatted debug info to the css for debugging with webkit-inspector.

  • Monitoring multiple folders and outputting all to the same folder as where the less source was found
less_watch --line-numbers=mediaquery --source=less --source=content --source=App

That will watch ./less, ./content and ./App folders and compile the less css files into the same folder as the .less files were found when they are added/changed and add mediaquery-formatted debug info to the css for debugging with webkit-inspector.

githalytics.com alpha

npm loves you