public
substack / package.json
Created

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

  • Download Gist
package.json
JSON
File suppressed. Click to show.
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
File suppressed. Click to show.

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?

mikaelbr commented

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 commented

@mikaelbr very cool!

pkyeck commented

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 commented

@pkyeck try this!

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

kirbysayshi commented

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