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 asvariables.less
ormixins.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 theallowedExtensions
array. - Files that start with underscores
_style.css
or period.style.css
are ignored. This behavior can be changed in thefilterFiles()
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 --
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.