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?
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'"
}
}