Home
Recent Q&A
Java
Cloud
JavaScript
Python
SQL
PHP
HTML
C++
Data Science
DBMS
Devops
Hadoop
Machine Learning
Azure
Blockchain
Devops
Ask a Question
Explain me the difference between NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack?
Home
GulpJS
Explain me the difference between NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack?
0
votes
asked
Jul 13, 2021
in
GulpJS
by
SakshiSharma
Explain me the difference between NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack?
npm-vs-bower
bower
Please
log in
or
register
to answer this question.
1
Answer
0
votes
answered
Jul 13, 2021
by
SakshiSharma
npm & bower are package managers. They just download the dependencies and don't know how to build projects on their own. What they know is to call webpack/gulp/grunt after fetching all the dependencies.
bower is like npm, but builds a flattened dependency trees (unlike npm which does it recursively). Meaning npm fetches the dependencies for each dependency (may fetch the same a few times), while bower expects you to manually include sub-dependencies. Sometimes bower and npm are used together for front-end and back-end respectively (since each megabyte might matter in front-end).
grunt and gulp are task runners to automate everything that can be automated (i.e. compile CSS/Sass, optimize images, make a bundle and minify/transpile it).
grunt vs. gulp (is like maven vs. gradle or configuration vs. code). Grunt is based on configuring separate independent tasks, each task opens/handles/closes file. Gulp requires less amount of code and is based on Node streams, which allows it to build pipe chains (w/o reopening the same file) and makes it faster.
webpack (webpack-dev-server) - for me it's a task runner with hot reloading of changes which allows you to forget about all JS/CSS watchers.
npm/bower + plugins may replace task runners. Their abilities often intersect so there are different implications if you need to use gulp/grunt over npm + plugins. But task runners are definitely better for complex tasks (e.g. "on each build create bundle, transpile from ES6 to ES5, run it at all browsers emulators, make screenshots and deploy to dropbox through ftp").
browserify allows packaging node modules for browsers. browserify vs node's require is actually AMD vs CommonJS.
Related questions
0
votes
Q: Package Management with Bower Questions and Answers
asked
Aug 11, 2022
in
PowerBI
by
sharadyadav1986
package-management
bower
bower-questions
0
votes
Q: Bower is a new package manager for ______.
asked
Aug 18, 2021
in
AngularJS Packaging and Testing
by
SakshiSharma
bower
bower-package
0
votes
Q: Bower was introduced by engineers at _____.
asked
Aug 18, 2021
in
AngularJS Packaging and Testing
by
SakshiSharma
bower
0
votes
Q: Can you explain the difference between Grunt and Gulp?
asked
Feb 12, 2023
in
GulpJS
by
sharadyadav1986
gulpjs
grunt
0
votes
Q: Explain Gulp vs Grunt?
asked
Feb 15, 2020
in
JAVA
by
rahuljain1
#gulp-vs-grunt
Java-questions-answers
0
votes
Q: What's the difference between webpack loaders and plugins?
asked
Jul 13, 2021
in
GulpJS
by
SakshiSharma
webpack
plugins
0
votes
Q: GRUNT vs. GULP
asked
Feb 25, 2020
in
JavaScript
by
miceperry
+1
vote
Q: Include Bower Dependency in Grunt.JS
asked
Feb 28, 2020
in
JavaScript
by
miceperry
+1
vote
Q: Between Grunt and Gulp, which is relatively fast?
asked
Feb 15, 2020
in
JAVA
by
rahuljain1
#gulp-vs-grunt
Java-questions-answers
0
votes
Q: List some pitfalls of Webpack
asked
Jul 13, 2021
in
GulpJS
by
SakshiSharma
pitfalls-webpack
...