Node Scripts: Chaining commands with watchify

Question

I'm using npm scripts (see my npm file below) to watch files for changes with watchify and then compile and notify once compiled. However what happens is that the watchify task runs (this takes 40s when first run) then the notify:js task gets immediately called. I would like the notify:js to be called after watchify has finished compiling.

{
  "dependencies": {
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "exorcist": "^0.4.0",
    "osx-notifier": "^0.2.2",
    "watchify": "^3.6.1"
  },
  "scripts": {
    "watch": "watchify src/app.js -o build/bundle.js -t [ babelify --presets [ es2015 react ] ] -dv | npm run notify:js",
    "compile:js": "browserify -e src/app.js -d -o build/bundle.js -t [ babelify --presets [ es2015 react ] ] -v",
    "notify:js": "osx-notifier --title 'JavaScript Compiled' --message 'JavaScript compiled to build/bundle.js' --type pass"
  }
}

I've tried the following command variations.

watchify src/app.js -o build/bundle.js -t [ babelify --presets [ es2015 react ] ] \
-dv & npm run notify:js

The above command does the same as the | operator.

watchify src/app.js -o build/bundle.js -t [ babelify --presets [ es2015 react ] ] \
-dv && npm run notify:js

The above command does the same as the & operator.

I can't see any option in the watchify documentation for what I am trying to achieve. Am I missing something here or is this not possible with the way I am trying to do this?

watchify runs in the background, so I think you can't use it to do what you want in a traightforward way. If you replace watchify by browserify, then the last variant of commands you have tried (with `&&`) should work; but you would loose the benefit of watchify recompiling the files on change. Otherwise, try to watch the change son bundle.js, and (re)start the notifier only when that happens... — Mehdi, Dec 02 '15 at 12:46
Have you considered using something like [`gulp`](http://gulpjs.com/)? — robertklep, Dec 02 '15 at 12:48
@robertklep I've used `gulp` and `grunt` but I'm moving away from those tools in favour of this approach. — Enijar, Dec 02 '15 at 13:04

score 3 · Accepted Answer · answered Dec 04 '15 at 09:21

I solved this using nodemon and browserify-incremental.

This compiles JavaScript into a bundle.js file.

browserifyinc -e resources/assets/js/app.js -o public/assets/js/bundle.js --cachefile .browserify-cache.json && npm run notify:js

This is my package.json file.

{
  "dependencies": {
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  },
  "devDependencies": {
    "babelify": "^6.1.3",
    "browserify": "^12.0.1",
    "browserify-incremental": "^3.0.1",
    "nodemon": "^1.3.8"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  },
  "scripts": {
    "build": "npm run compile:js && npm run compile:sass",
    "watch": "npm run watch:js & npm run watch:sass",
    "notify:js": "osascript -e 'display notification \"JavaScript compiled to public/assets/js/bundle.js\" with title \"JavaScript Compiled\"'",
    "notify:sass": "osascript -e 'display notification \"CSS compiled to public/assets/js/app.js\" with title \"CSS Compiled\"'",
    "compile:js": "browserifyinc -e resources/assets/js/app.js -o public/assets/js/bundle.js --cachefile .browserify-cache.json && npm run notify:js",
    "compile:sass": "sass resources/assets/sass/app.scss:public/assets/css/app.css && npm run notify:sass",
    "watch:js": "nodemon --watch 'resources/assets/js' --exec 'npm run compile:js'",
    "watch:sass": "nodemon --watch 'resources/assets/sass' -e scss --exec 'npm run compile:sass'"
  }
}

Node Scripts: Chaining commands with watchify

1 Answers1