public
Created

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

  • Download Gist
package.json
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"
}
}
readme.markdown
Markdown

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

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 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 very cool!

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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.