Gruntjs - NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

Questions

I m trying to summarize my knowledge about the most popular JavaScript package managers, bundlers, and task runners. Please correct me if I m wrong:

• 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 flattened dependencies trees (unlike npm which do 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 on 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").
https://addyosmani.com/writing-modular-js/ https://addyosmani.com/writing-modular-js/

    Questions:     

• What is webpack & webpack-dev-server? Official documentation says it s a module bundler but for me it s just a task runner. What s the difference?
• Where would you use browserify? Can t we do the same with node/ES6 imports?
• When would you use gulp/grunt over npm + plugins?
• Please provide examples when you need to use a combination

Answers

Webpack and Browserify do pretty much the same job, which is bundling your modules to be used in a browser environment (though you can target other environments, like bundling your server-side ES6 code for Node). For example the Node module is a feature, which doesn t exist in the browser, and ES 6 modules are not implemented in any browser yet, which is why things need to be bundled. However, they differ in many ways, Webpack offers many tools by default (e.g. code splitting), while Browserify can do this only after downloading plugins, but using both leads to very similar results. It comes down to personal preference (I am used to Webpack). Webpack is not a task runner, it is just processor of your files (it processes them by so called loaders) run directly from CLI or by a task runner.

webpack-dev-server provides something like Browsersync - a server, where you can deploy your app and verify your FE developing progress immediately by dev-server automatically refreshing the browser or even propagating changes without it with hot deploy (e.g. React components).

I ve been using Gulp for its conciseness and easy task writing, but have later found out I need neither Gulp nor Grunt at all. Everything I have ever needed could have been done using npm scripts to run 3rd-party tools through their API. Choosing between Gulp, Grunt or npm scripts depends on your taste, JS experience and experience of developers working with you.

While tasks in Gulp (or Grunt maybe) are easy to read even for people not so familiar with JS, it is yet another tool to require and learn, and I personally prefer to narrow my dependencies and make things simple. On the other hand, replacing these tasks with combination of npm scripts and run files (where configuration and execution function of tools like Webpack lies) is more challenging. But in the majority of cases, those three are equal in terms of results.

https://github.com/kriasoft/react-starter-kit/tree/master/tools https://github.com/kriasoft/react-starter-kit/tree/master/tools

Speaking more precisely, start.js imports Webpack config for client, manipulates it to add hot module replacement capabilities, then creates both client and server side bundles, starts node server through yet another utility named runServer.js and after successful start inits Browsersync, which looks something like this.

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch  *.js  here, webpack will take care of it for us,
      // including full page reloads if HMR won t work
      files: [ build/content/**/*.* ],
}, resolve)

http://localhost:3001 http://localhost:3001

Now I don t have any equivalent example of such Grunt or Gulp configuration, but with Gulp (and somewhat similarly with Grunt) you would write individual tasks in gulpfile.js like

gulp.task( bundle , function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task( start , function() {
  // starting server and stuff
});

where you would be doing essentially pretty much the same things as in the starter-kit, this time with task runner, which solves some problems for you, but presents its own issues and some difficulties during learning the usage, and as I say, the more dependencies you have, the more can go wrong. And that is the reason I like to get rid of such tools.

Source

License : cc by-sa 3.0

http://stackoverflow.com/questions/35062852/npm-vs-bower-vs-browserify-vs-gulp-vs-grunt-vs-webpack

Related