CODEWITHSUNDEEP
node.jsnpmsasswatch
Sean Newell
Sean Newell

Reputation: 1113

NPM Scripts using watch works in CLI but breaks in npm scripts

I'm trying to set up the following npm scripts on Windows 10 (using git bash, MINGW):

Snippet from scripts in my package.json:

...
"sass:build": "cat assets/styles/* | node-sass | postcss --no-map -u autoprefixer -u cssnano > dist/public/styles/styles.css.min",
"sass:watch": "watch sass:build ./assets/styles/",
...

After running npm i --save-dev node-sass postcss autoprefixer cssnano watch I get this error:

$ npm run sass:watch

> [email protected] sass:watch C:\repos\thenewells
> watch sass:build ./assets/styles/

>Watching ./assets/styles/
The filename, directory name, or volume label syntax is incorrect.

But if I do npm i -g node-sass postcss autoprefixer cssnano watch then this happens...

$ watch 'npm run sass:build' ./assets/styles/

> Watching ./assets/styles/

> [email protected] sass:build C:\repos\thenewells
> cat assets/styles/* | node-sass | postcss --no-map -u autoprefixer -u cssnano > dist/public/styles/styles.css.min

√ Finished stdin (373ms)

Why does the plain CLI version work, while the npm scripts version error when trying to find the directory?

I've also tried putting 'npm run sass:build' in the sass:watch task. Same effect. I can run sass:build via npm run sass:build and that works.

Workaround

I'm able to define a bash script to run the watch command and it works.

sass-watch (no file extension, unix style)

watch 'npm run sass:build' ./assets/styles/

And now the sass:watch job can just be bash ./sass-watch.

And that works fine. So I can probably chain that in a more complex script chain so I can get my npm run dev to work, but I would rather not have to reach for wrapping scripts in a script for such a strange use-case. It seems like what I wrote in sass:watch originally should work... :\

Just another reason to ditch Windows and install Ubuntu...? Or does npm do something to the environment that makes the watch command expect something else?

Upvotes: 1

Views: 546

Answers (1)

Yi Kai
Yi Kai

Reputation: 640

Try surrounding the command with quotes and see if it works:

"sass:watch": "watch \"npm run sass:build\" ./assets/styles/"

Explaination:

First of all, it has to be npm run sass:build, not sass:build because that's how you run a npm script you defined.

Secondly, the reason you have to quote the command is that watch is reading command from process.argv using minimist, it treats the first argument as the command, if you don't quote the entire command, it'll be npm, and the rest of arguments are all treated as directories it watches, that's why you get an error saying wrong filename.

Thirdly, I'm not sure why single quotes didn't work, maybe it's a problem related to Windows and Mingw, because the difference between double quotes and single quotes is that one will be evaluated and the other will be treated literally in shell.

Upvotes: 2

Related Questions