npm scripts nodemon - watching js and scss files for changes

6
votes

I'm experimenting with setting up a dev environment to use NPM only, without the use of grunt.js or bower.js.

I followed this tutorial: http://beletsky.net/2015/04/npm-for-everything.html

I'm using nodemon to watch my .js and .scss files for changes which restarts the node server. So in my package.json file, under scripts I have

scripts:

"watch-js": "nodemon -e js --watch public/js -x \"npm run build-js\"",

"watch-sass": "nodemon -e scss --watch public/sass -x \"npm run build-sass\"",

"watch": "npm run watch-js & npm run watch-sass"

But when I run npm run watch it only watches for the public/js files to change. And it triggers a build accordingly.

But it won't watch for the sass files.

Versions: node v0.10.36 nodemon v1.4.1

I also include a build script which if I run compiles the sass to css, so my build-sass script should be ok

"build": "npm run build-js & npm run build-sass",
"watch": "npm run watch-js & npm run watch-sass"
3
javascriptnode.jsnpmwatchnodemon
I've tried setting this up, and it seems to work fine as you have it. I replaced your -x with -x \"echo js file changed\" for both js and sass, and the messages were shown as expected for both. So it seems nodemon is working. Maybe the issue is in your build-sass script? – Robbie
build-sass script: "build-sass": "node-sass public/sass/main.scss public/build/main.css", I also have a build script with uses the build sass script and it works fine – conor909
when you say it won't watch for the sass files, do you mean that the sass files are not getting rebuilt or that nodemon is not re-running the task? – Robbie
nodemon is not running that part (sass) of the task at all, yet it does watch for js changes – conor909
Yes I am on windows! Ill go over those resources and update this page on progress. I appreciate the contribution @Robbie – conor909

3 Answers

4
votes

If you are using windows, you might be encountering the windows problem

Because npm is reliant on the operating systems shell to run scripts commands, they can quickly become unportable. While Linux, Solaris, BSD and Mac OSX come preinstalled with Bash as the default shell, Windows does not. On Windows, npm will resort to using Windows command prompt for these things

If so, you can try using parallelshell or npm-run-all for better cross platform support.

1
votes

This works for me in Mac OS

  1. Install nodemon

    npm install --save-dev nodemon

  2. Install npm-run-all:

    npm install --save-dev npm-run-all

  3. In package.json add two scripts:

    "startn": "nodemon ./app.js", "watch-jscss": "gulp watch"

    • Where 'app.js' is your server file
    • "gulp watch" can be replace by whatever task is doing a sass watch

  4. In the console:

    npm-run-all --parallel watch-jscss startn

-3
votes

try to change,

"watch": "npm run watch-js & npm run watch-sass"

to

"watch": "npm run watch-js && npm run watch-sass"