Basic understanding of Gulp, Elixir, Webpack...

I'm a bit confused about Gulp vs Elixir vs Webpack, so I will try to give you what I understand (correct me if I'm wrong):

npm install - this command is used to install JavaScript libraries and frameworks (dependencies) inside the node_modules directory;

Webpack is used by Elixir (or Gulp??) to compile Javascript libraries and frameworks that are installed using the npm install command - which means to combine (and minify) app/assets/js/app.js and all of the files that are required there into a single bundled file in the public/js directory;

Elixir provides a clean, fluent API for defining basic Gulp tasks - which means that in gulpfile.js we use Elixir to specify which files will be compiled when we run the gulp command;

Gulp is a javascript task runner that lets us automate tasks and it can use Webpack (or Browserify...) to compile dependencies installed via npm install, but Gulp can also compile (combine and minify) JavaScript files into one file. Gulp also can combine and minify CSS files, Sass and Less.