Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
using `npm run` to build and watch with less and browserify

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
{
"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"
}
}
@am

This comment has been minimized.

Show comment Hide comment
@am

am Dec 6, 2013

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?

am commented Dec 6, 2013

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?

@mikaelbr

This comment has been minimized.

Show comment Hide comment
@mikaelbr

mikaelbr Dec 6, 2013

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 https://github.com/mikaelbr/mrun. 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 commented Dec 6, 2013

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 https://github.com/mikaelbr/mrun. 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..

@substack

This comment has been minimized.

Show comment Hide comment
@substack

substack Dec 7, 2013

@mikaelbr very cool!

Owner

substack commented Dec 7, 2013

@mikaelbr very cool!

@pkyeck

This comment has been minimized.

Show comment Hide comment
@pkyeck

pkyeck Dec 9, 2013

is there a way around installing the catw module globally?

edit
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 commented Dec 9, 2013

is there a way around installing the catw module globally?

edit
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.

@DTrejo

This comment has been minimized.

Show comment Hide comment
@DTrejo

DTrejo Dec 25, 2013

@pkyeck try this!

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

DTrejo commented Dec 25, 2013

@pkyeck try this!

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

@kirbysayshi

This comment has been minimized.

Show comment Hide comment
@kirbysayshi

kirbysayshi Apr 10, 2014

@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.

@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.

@etarkus

This comment has been minimized.

Show comment Hide comment
@etarkus

etarkus Jun 28, 2014

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

etarkus commented Jun 28, 2014

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

@brunodbo

This comment has been minimized.

Show comment Hide comment
@brunodbo

brunodbo Aug 23, 2014

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";
5 

Any ideas?

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";
5 

Any ideas?

@genghishack

This comment has been minimized.

Show comment Hide comment
@genghishack

genghishack Nov 6, 2014

@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.

@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.

@ideodora

This comment has been minimized.

Show comment Hide comment
@ideodora

ideodora Nov 8, 2014

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

ideodora commented Nov 8, 2014

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

@gregglind

This comment has been minimized.

Show comment Hide comment
@gregglind

gregglind Mar 6, 2015

One annoyance I am running into with this method. (At https://github.com/mozilla/self-repair-server/blob/master/package.json#L36-L38)

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

One annoyance I am running into with this method. (At https://github.com/mozilla/self-repair-server/blob/master/package.json#L36-L38)

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

@jevets

This comment has been minimized.

Show comment Hide comment
@jevets

jevets Sep 23, 2015

(May help someone in the future)

Instead of using catw to run a lessc compile command, I just have catw watch all my *.less files and have it run my existing build-css npm script when a .less file changes. I didn't have to adjust any --include-paths for lessc.

This triggers a rebuild when either the main .less file or a partial .less file is changed.

"scripts": {
    "build-css": "lessc assets/css/app.less > assets/css/app.css",
    "watch-css": "catw -w 'assets/css/**/*.less' -c 'npm run build-css'",
}
assets/
    css/
        app.less  // change triggers rebuild
        partials/
            nav.less  // change triggers rebuild

jevets commented Sep 23, 2015

(May help someone in the future)

Instead of using catw to run a lessc compile command, I just have catw watch all my *.less files and have it run my existing build-css npm script when a .less file changes. I didn't have to adjust any --include-paths for lessc.

This triggers a rebuild when either the main .less file or a partial .less file is changed.

"scripts": {
    "build-css": "lessc assets/css/app.less > assets/css/app.css",
    "watch-css": "catw -w 'assets/css/**/*.less' -c 'npm run build-css'",
}
assets/
    css/
        app.less  // change triggers rebuild
        partials/
            nav.less  // change triggers rebuild
@vanraizen

This comment has been minimized.

Show comment Hide comment
@vanraizen

vanraizen Jan 25, 2016

@jevets Thank you for your suggestion, that ended up being the solution that worked for me. However, I'm noticing some strange behavior and not sure if you're seeing that on your end. For me whenever a rebuild is triggered it runs the build-css task once per .less file which means that if I have 11 .less files if a single one of them changes lessc will run 11 times. This does work but it takes a long time to run. I'm wondering if there's a faster way to do this or a way to do it where we only need to run lessc once per rebuild.

@jevets Thank you for your suggestion, that ended up being the solution that worked for me. However, I'm noticing some strange behavior and not sure if you're seeing that on your end. For me whenever a rebuild is triggered it runs the build-css task once per .less file which means that if I have 11 .less files if a single one of them changes lessc will run 11 times. This does work but it takes a long time to run. I'm wondering if there's a faster way to do this or a way to do it where we only need to run lessc once per rebuild.

@alundiak

This comment has been minimized.

Show comment Hide comment
@alundiak

alundiak Dec 27, 2017

For this

"build-js": "browserify browser/*.js > static/bundle.js",

The folder static must be created beforehand. But what if not? let's say static is in .gitignore list.

How to configure browserify command line here?

I tried kinda mkdir static && browserify browser/*.js > static/bundle.js but mkdir is no proper way to pass to NodeJS

Any ideas?

alundiak commented Dec 27, 2017

For this

"build-js": "browserify browser/*.js > static/bundle.js",

The folder static must be created beforehand. But what if not? let's say static is in .gitignore list.

How to configure browserify command line here?

I tried kinda mkdir static && browserify browser/*.js > static/bundle.js but mkdir is no proper way to pass to NodeJS

Any ideas?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment