This is ultimately a NPM problem, though any Sass-specific tips would be helpful. Ultimately I want to do three things when I start my server:
"scripts": {
"build-css": "node-sass scss -o public/stylesheets",
"watch-css": "node-sass scss -wro public/stylesheets",
"serve": "node ./bin/www",
}
Here are my current options, all of which are unsatisfactory for one reason or another:
Running all 3 scripts from the terminal
~$ npm run build-css && npm run watch-css && npm run serve
I would rather not have to explicitly run the css scripts, rather ensure that the CSS is built and watched every time the server is started.
Put the css scripts in a prestart script
"scripts": {
"prestart": "node-sass scss -o public/stylesheets && node-sass scss -wro public/stylesheets",
"start": "node ./bin/www",
}
This is lovely, but it isn't truly cross-platform - PowerShell still doesn't support the && operator. As profoundly annoying as this is, there's no way around it that I know of. I'd be satisfied with the ugly preprestart option, but unfortunately it doesn't work.
Use another watch method
"watch": {
"build-css": "scss"
},
"scripts": {
"build-css": "node-sass scss -o public/stylesheets",
"serve": "node ./bin/www",
}
This works, but it requires pulling in another dependency such as node-watch or nodemon. This also forces rebuilding the entire directory if just one file is changed, which can be a pain on large projects. Plus the watching isn't being done by node-sass, which possibly means losing functionality.
Using npm-run-all
"scripts": {
"build-css": "node-sass scss -o public/stylesheets",
"watch-css": "node-sass scss -wro public/stylesheets",
"serve": "node ./bin/www",
"start": "npm-run-all *"
}
This, again, works in theory, but it requires pulling in a dependency to do a fairly simple task. npm-run-all in particular pulls 23 dependencies, many of which have fairly deep dependency trees themselves, to do a fairly simple task. On top of that, this didn't work for me because it looked for the node-sass binary in the vendor subdirectory, which isn't where it is. I'm unsure whether there is a simple way around this.
Something tells me there must be an easier way to do what I'm trying to accomplish here, but I've been searching for a while now and haven't found anything. Any help would be appreciated.