Gulp, Npm, Yarn, Webpack - What to use in 2017-2018?

Question

Node.js

To work on my projects, I use gulp in conjunction with bower, for simple layout, connecting libraries and outputting the finished project to the backend.
Everything was assembled successfully, all JS files and libraries into one file, all Sass files into another. I gave it to the backend worker, he implemented it, not life, but a fairy tale.
I recently started coding for Ruby Railse, Chamelion and spreecommerce.
And then the inconvenience began.
In the requirements of preparing a project for the backend, it is necessary to separate all JS and CSS files. You can no longer lump everything together.
Connect, only those scripts, on html pages, on which they are used. It's the same with CSS.
No more merges!
I decided to make an assembly, started to google and then my head went around!
Everyone already uses Yarn instead of Npm, Webpack instead of Gulp, ES6 instead of ES5.
So the question became, what to use today?

Answer 1

npm - when a few commands are enough to build (using "scripts":{} via cli)
webpack - for building medium and large applications (HMR, live reload, etc. are very convenient)
gulp - more universal, since it just a assembler, but a task runner, but at the same time, written tasks may not be as easy to read and maintain as configs in webpack
, there is also rollup - almost the same as webpack, only more modest and is usually used to build libraries , where there is nothing special besides js
And as for your specific question, probably webpack will do

Answer 2

That feeling when you don't use assemblers and separate all styles/scripts page by page...

Answer 3

Yarn and npm are one and the same.
Gulp and webpack are a task runner and a bundler, use what you need for a specific project.
ES6 can't be used instead of ES5, it's ES5 + roughly syntactic sugar. If you are comfortable using es6, use it to write code faster and prettier, if not, write in vanilla.

Answer 4

yarn is a handy wrapper for npm.
You need to use Webpack. If something is not enough in terms of functionality, then in conjunction with Gulp.
Bower died a couple of years ago.

Answer 5

it seems to me that many people use them because of the hype around them, combine all the files into one, minify that's all the dubious benefits

Answer 6

ES6 is not something different and trendy, it's javascript. It is desirable to know. Yarn instead of npm - nothing special again, it does everything the same, the command names are slightly different, and then with the new version of npm it seems to make no sense anymore. It used to be about speed, and it also seemed like yarn automatically added the installed package to dependencies. Now npm does this too. In any case, if you are familiar with npm, then yarn is 5-10 minutes to figure it out.
All that remains is webpack, but if you don’t want to understand it at all, you can find a starter kit on github.
In the end, there is nothing terrible here. And there will always be something new, especially if you do not follow trends for a long time.

Answer 7

npm5 has been updated but yarn is still a bit faster https://youtu.be/Pq05bTlTDPM
now everyone uses webpack it's a fact
there are people who use gulp for css and for project optimization