What is the best tech stack for building a frontend?

Question

Automation

I want to automate the project (remote VPS server),
There are several directories (their number will grow about 30)
The path is demo/$var/themes/$template/
Instead of the $var and $template variables, there can be any directory names.
The $template directory can have any number of subfolders.
The build for the frontend will be integrated into PrestaShop CMS.
Now ruby ​​is installed on the server and it works, but not fast and not perfect.
I want to transfer to node.js, if only because node already needs everything or almost everything, and it also works faster and faster.
First you need to uninstall ruby, then install the following on the remote server.
We work from under windows, many editors, for various reasons, cannot cope with all tasks, or editors are made in such a way that it is inconvenient to work with them.
Moving to other operating systems is not yet considered, because development should go as fast as before and even faster. In the future, we will transfer the development to MAC OS.
There are often scss duplicates in the code, too large images, not full cross-browser compatibility after using sass, autoprefixer or postcss for prefixing.
The transition to preprocessors has just begun, many projects are still written in css.
In order not to rewrite all this manually, advise a technology stack that will meet the task:
gulp, brocolli, metalmeaths, brunch
1. We analyze the project 1 time we look for css in all subdirectories in the $template folder
2. We clean css from unnecessary code, from duplicates, so that the layout does not go. (adaptive layout)
3. Convert css files to sсss, create a source map. After this step, we work only with scss
4. In scss, the styles are overwritten and the original paths are preserved. for example, template/css/modules/block/style.css will be rewritten to template/sass/modules/block/style.scss
5. For variables, extension, color, font, separate import files are created and written in the header of each style.
Example: prntscr.com/7cip1t
6. After editing scss, css is overwritten, a source map is created, prefixes are added to styles via autoprefix, css styles are formatted in a readable form and garbage is removed from them, which should not be, but if it suddenly appears.
At the moment, if you parse a compressed style file, it will be 24000 lines of code, the task is to make this file as short as possible. And do the same as above.
Ideally, you need to set it up to be like here in terms of speed:
https://speakerdeck.com/addyosmani/css-performance...

Answer 1

Well, the first five points are probably easier to do manually than rely on the machine, and then painstakingly restore what went.
The sixth point, as 27cm said , is grunt/gulp. It is believed that the second is faster and simpler.