Embed URL


SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

using `npm run` to build and watch with less and browserify

View package.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
"name": "my-app",
"version": "0.0.0",
"dependencies": {
"browserify": "~2.36.1",
"less": "~1.5.1"
"devDependencies": {
"watchify": "~0.4.1",
"catw": "~0.2.0"
"scripts": {
"watch-css": "catw -c 'lessc -' 'style/*.less' -o static/bundle.css -v",
"watch-js": "watchify browser/*.js -o static/bundle.js -dv",
"watch": "npm run watch-css & npm run watch-js",
"build-css": "catw -c 'lessc -' 'style/*.less' > static/bundle.css",
"build-js": "browserify browser/*.js > static/bundle.js",
"build": "npm run build-css && npm run build-js"
View package.json

The package.json above expects .less files to be in style/, browser code to be in browser/, and static files to be in static/.

To watch the less and js files for development, do:

npm run watch

To build for production, do:

npm run build
am commented

Nice approach =) although it could get messy as soon as you need to add some more detailed configuration to each task.
Is this faster than executing the same with Grunt?

Clever stuff – I've often thought about the npm scripts and how it can be used for more complex stuff.
An alternative to this, might be to install grunt, which is unnecessary for such an trivial and simple task.
I tried to make this even easier, by making a really simple npm module wrapper at My thought being, that it's repetitive to copy/paste this for each project. By using "mrun" it's easy
to just update your package.json. All credit goes to this, though..


@mikaelbr very cool!

is there a way around installing the catw module globally?

ok, found it: ./node_modules/.bin/catw

but how can I "just" watch a folder and run one command when any of the files changes?
I got a less-file that includes all submodules so I only have to compile this file - it outputs the complete, concatenated css.

@pkyeck try this!

"watch-css": "catw -c 'lessc -' 'style/MY_ONE_BIG_FILE.less' -o static/bundle.css -v",

@pkyeck when running an npm script entry, npm searches through dependencies for "binaries" first. So catw is not actually a global, it's just that npm automatically adds it to the lookup path when executing commands.

@substack it seems like it doesn't work on windows.. does it?

I'm using the following to watch .less files:

"watch-less": "catw -wvc 'lessc $FILE' assets/less/site.less -o web/css/styles.css",

While this compiles my CSS file when I first run npm run watch-less, afterwards (while watching) it only compiles the CSS file when I edit site.less directly. When I edit one of the partials that's referenced in site.less, my CSS file isn't recompiled.

I tried using @DTrejo's suggestion, but it didn't didn't work for me. I get the following error:

FileError: 'partials/global/_base.less' wasn't found in - on line 4, column 1:
3 // Base partials
4 @import "partials/global/_base.less";

Any ideas?

@brunodbo when you have imports in your less files and are using catw in this way, the paths to the imports need to be relative to the folder in which you are calling 'npm run watch-less', not relative to the file that contains the import command. Stumbled over this one myself until I figured it out.

watch-less stop watching when error occur. Is there any way to handle the errors to make node keep running?

One annoyance I am running into with this method. (At

I keep typing npm build (which is a real command!) instead of npm run build. I am thinking of renaming my 'action' to compile (, b/c npm compile isn't a valid command.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.