jakesidsmith / watch-less-do-more

Watch less files and their dependency tree for changes & automatically recompile

watch-less-do-more

Watch less files and their dependency tree for changes & automatically recompile

About

Rather than watching a directory for changes in any files, like other watchers, watch-less-do-more watches your main less file and automatically watches only its dependencies. If the main file, or any of it's dependencies change, the main file is compiled. This also allows you to watch multiple main files in a directory, and only compile the ones that have either changed themselves, or have had their dependencies changed. Additionally, this means that updating your node_modules (if any are dependencies of your less) will cause your less to recompile.

Example

If we have the following files

main-a.less
main-b.less
dependency-of-a.less
dependency-of-b.less
dependency-of-a-and-b.less
not-related-to-other-files.less

And we run the command

watch-less-do-more -i main-a.less -o main-a.css -i main-b.less -o main-b.css

• Changes to not-related-to-other-files.less will not cause any less to compile.

• Changes to dependency-of-a-and-b.less will cause both main-a.less and main-b.less to recompile.

• Changes to dependency-of-a.less will cause only main-a.less to recompile.

• Changes to dependency-of-b.less will cause only main-b.less to recompile.

Install

Install watch-less-do-more. You'll also need to install less. Currently supports less 2.x.x.

npm install watch-less-do-more less --save

Optionally install postcss if you want to use postcss modules. Currently supports postcss 5.x.x.

npm install postcss --save

Usage

In these examples we're adding a script to our package.json

Single main file

{
  "watch-less": "watch-less-do-more -i source.less -o output.css"
}

Multiple main files

You can define as many files as you like, as long as there is an output argument for every input file

{
  "watch-less": "watch-less-do-more -i source-a.less -o output-a.css -i source-b.less -o output-b.css"
}

PostCSS

You can use PostCSS modules with watch-less-do-more incredibly easily. Just install the modules you want, and tell watch-less-do-more to use them in the same way you would with PostCSS.

{
  "watch-less": "watch-less-do-more -u autoprefixer -i source.less -o output.css"
}

Options

--input, -i   Path to input LESS file                      [string] [required]
--output, -o  Path to output CSS file                      [string] [required]
--use, -u     PostCSS module to use                                   [string]
--help        Show help                                              [boolean]
--version     Show version number                                    [boolean]

watch-less-do-more's Issues

Fails to watch changes on files with special characters in their path

I added a log of output.imports inside parseFileAndWatchImports in watch-less-do-more source. My project returns some relative paths (for node_modules), and some absolute paths (for my own files). My directory contains /{{directory}}/my-file.less characters, and these seem to prevent updates.

Ditch yargs for jargs

Yargs is changing far too regularly (and doesn't really have a nice API, IMO).

The current version has vulnerabilities and needs upgrading, so may as well switch to jargs instead.

Process exited with code null

Should ensure this is code 0

--once

Add --once option to compile the less a single time & then exit, without adding any watchers.

This gives users the ability to adopt watch-less-do-more as their main less build tool.