With the development of front-end, front-end projects are becoming more and more complex. Thanks to the development of NodeJS, front-end modularization, componentization and engineering are also the trend of The Times. Grunt, Gulp and Webpack have all flourished in recent years with the development of engineering.

In the early days of front-end engineering, it was mainly to solve the problem of repeated tasks. Grunt and Gulp are the representatives. For example, compress, compile less, sass, add hash to address, replace, etc.

The Grunt website says:

For tasks that require repetition, such as minification, compilation, unit testing, linting, etc., do most of the boring work.

Webpack today is more of a front-end engineering solution. Using powerful plug-in mechanism, solve the problem of front-end static resource dependency management.

Webpack author Tobias replies with a comparison to Grunt Gulp NPM scripts

Tobias: The NPM script is fine for me. In fact, it’s not entirely accurate to say that Webpack is an alternative to Grunt/Gulp. Grunt and Gulp, as well as NPM scripts, are task executers. Webpack is a module packager _. These two types of programs have different goals. But it is also true that Webpack simplifies Web development tasks that must be “overused” with Grunt and Gulp and NPM scripts. The NPM script is an alternative to Grunt and Gulp. However, there are reasons for a task runner beyond pure build, such as deployment, code review, versioning, and so on.

Webpack and Grunt and Gulp mechanisms

# grunt gulp thinking [source file] - > [matching rules] - > 【 package 】 do on-demand loaded, resources of packaging, whether to use, do not care about packaging process. # webpack [entry] -> [module dependency loading] -> [dependency analysis] -> [packaging] In the process of loading, analysis, packaging, we can do some specific solutions. For example: code split

Grunt and Gulp performance comparison

Grunt: After each task is processed, it is stored in the local disk. TMP directory. There is local disk I/O operation, which will lead to slow packaging speed. Gulp: Both Gulp and Grunt are task-based. Gulp has the concept of a file stream. The results of each build step are not stored on the local disk, but are stored in memory, and the next step is available to use the memory of the previous step, greatly increasing the speed of packaging.

Reference: Grunt website Webpack authors accepted articles for interview