Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jakesidsmith/watch-less-do-more
Watch less files and their dependency tree for changes & automatically recompile
https://github.com/jakesidsmith/watch-less-do-more
css dependency-tree less postcss postcss-modules recompile watch watcher
Last synced: 16 days ago
JSON representation
Watch less files and their dependency tree for changes & automatically recompile
- Host: GitHub
- URL: https://github.com/jakesidsmith/watch-less-do-more
- Owner: JakeSidSmith
- Created: 2017-02-24T15:34:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T10:41:46.000Z (over 1 year ago)
- Last Synced: 2024-04-14T22:12:34.809Z (7 months ago)
- Topics: css, dependency-tree, less, postcss, postcss-modules, recompile, watch, watcher
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/watch-less-do-more
- Size: 421 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# watch-less-do-more [](https://circleci.com/gh/JakeSidSmith/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
```shell
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`.
```shell
npm install watch-less-do-more less --save
```
Optionally install postcss if you want to use postcss modules.
Currently supports postcss `5.x.x`.
```shell
npm install postcss --save
```
## Usage
In these examples we're adding a script to our package.json
### Single main file
```json
{
"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
```json
{
"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.
```json
{
"watch-less": "watch-less-do-more -u autoprefixer -i source.less -o output.css"
}
```
### Options
```shell
--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]
```