Preface ☀ ️

  • For just graduated into the social small white front end, in the habitVueScaffolding It is built after completing serviceswebpackAfter packaging, there is basically only one impression of packaging:npm run build
  • But most of the time when we look at job postings there is a line like this: experience with automated engineering for Gulp, Webpack, etc is preferred
  • At this time we go to find the difference between the two, listen to a simple description on the Internet is that the two ❓ do the same thing ah are not both optimize performance ❓
  • When it comes toautomation“, which we often refer to as a front-end build tool, because build tools are designed to keep us from doing repetitive things and free our hands, but actuallygulpandwebpackThe positioning is different, there is no comparison, let alone conflict, after reading a lot of information to record in this article, if there is wrong to say the place welcome big guys in the comment area ~~~~😰

Usage Scenario 🏄

Let me give you a few simple scenarios to understand

  • File compression

We know that the larger the file, the slower it will be to download or open in the browser. For CSS files and JS files, the newlines and whitespace are just for us developers to read, but they are the same for computers, so if we reduce the whitespace and newlines, we can reduce the size of the file.

  • File merging

There must be more than one JS file on a website, so if you have more JS files, the overall speed of concurrent download will be slower. If you can reduce the number of JS files, can you also speed up the speed?

Of course, there are a lot of scenes and distress we often encounter in development, we have to solve these problems including the size of the image and the like in the previous need to compress their own website compression, but with the automated build tools we can improve our development efficiency so that we focus on the code

Gulp ⌛ ️

  • As stated on the website, Gulp automates painful or time-consuming tasks in the development process to reduce the amount of time you waste and create more value
  • gulpFocus on the front-end development process,gulpCan be donejs.html.css.imgCompression packaging, is an automated build tool that can be multiplejsThe file orcssCompressed to a single file, and can be compressed to a single line to reduce file size, speed up requests, and reduce the number of requests.
  • Not only can site resources be optimized, but many of the repetitive tasks in the development process can be automated with the right tools, allowing us to focus on the code, improve work efficiency, in simple terms, to configure the required plug-ins, can help you do the things you need to do manually before.

To learn more about how to use gulp, go to the official website

Webpack ⏳

Yes, this is the same picture, and I’m sure you’re familiar with WebPack

  • As stated on the website, WebPack is essentially a static module packaging tool for modern JavaScript applications
  • webpackFocusing on modular packaging,webpackOnly knowjavascript, so all the resources used include pictures,jsFiles,cssFile, etc passloaderandpluginProcessing into modules.

For more information on how to use WebPack, go to the webpack website

Talk about both ❔

The reason

  • In the old days when developers wanted to write CSS with Sass and had a lot of large images in their project, they had to compile their files to the compiler and use the image compression tool to compress the images. Then a few days later and changed the demand and changed the picture, so to go through the compression tool to compress the picture for such a repeated operation. Then we developed a Grunt/Gulp that automates the process, writing code and releasing it on the command line.

  • However, gulp cannot solve the problem of modularizing JS files, so plugins such as sea-. js and require.js are configured to solve the js modularizing problem.

  • And then a Webpack came out and said can we take all the files and use JS to generate dependencies and then generate a bundle? So Webpack introduced loaders to solve the problem of converting different files, such as sass-loader to convert sass into CSS etc.

  • Later, it was discovered that WebPack had a plugins option that could be used to further process the bundle.js generated by the Loader, so someone wrote a plug-in for it, and eventually WebPack could use automated builds as well.

While both can do the job of automating builds, their positioning is different.

To compare

  • gulpIt is essentially an automated build tool that focuses more on standardizing the front-end development process and requires plugins to support modularity.
  • webpackIs the module wrapper and passesloaderThe system supports different modules,pluginThe system provides more additional functionality on the surfacewebpackIs thejsThe code is translated, actually everyjsFiles are individual modules, andwebpackIs a tool that packages these modules together to produce a finaljs.

Here’s a table from @dom that compares Gulp and Webpack from all angles:

Gulp Webpack
positioning Flow based automated build tools A universal module packer
The target Automate and optimize development workflows for generic website development General-purpose module packaging loader for large MOBILE SPA applications
Learning difficulty Easy to learn and easy to use, the API has only five methods in total There are plenty of new concepts and apis, but fortunately there is extensive official documentation
Applicable scenario Flow – based job is suitable for multi – page application development Everything is modular for single page application development
practices The js, TS, SCSS, less and other source files input (gulp.src) are bundled, compiled, compressed, renamed, and then output (gulp.dest) to the specified directory to be packed for building A dependency graph is generated by recursively parsing the entry files, and then all dependencies are packaged together. Before packaging, all dependencies are translated into packable JS modules, built for packaging
use Regular JS development, writing a series of build tasks (task). Edit various JSON configuration items
advantages Suitable for multi-page development, easy to learn, easy to use, elegant interface. Can package all resources for various module systems
disadvantages Output is weak for single page applications and is a bit difficult to handle with popular single page technologies (e.g. Vue single file component, which is difficult to handle with Gulp, but can be easily handled by a single loader for WebPack) Not suitable for multi-page application development, high flexibility but at the same time the configuration is complicated. The “package everything” advantage is particularly important for HTTP/1.1, because packaging all resources together significantly reduces the number of resource requests the browser makes when accessing the page, thus reducing the amount of time the application must wait. However, this advantage may become less prominent as HTTP/2 becomes more popular, as multiplexing of HTTP/2 effectively solves bottlenecks when clients are parallelizing requests.
conclusion Browser multi-page application (MPA) preferred solution Browser single page application (SPA) preferred solution

Put it at the end 👋

A bad example of the relationship between Gulp and Webpack is when you want to go to a massage shop (Gulp) to relax. One day you go to a barber shop (Webpack) to wash your hair and the guy says he can give you a massage. From then on, you find it very convenient to wash your hair and massage it.

  • Going back to the two, they are not a question of one replacing the other, based on the existence of the other,gulpIt’s not native. It’s likereactThat way, just close to the original. It’s like it’s likelinuxandwindows.
  • gulpTask definition and managementwebpackCan’t do that,gulpA lot of functionality needs to be extended to support modularity, andwebpackModularity itself is the core.
  • It’s not comparable, as the Internet saysVueIntegrated bidirectional binding is awesome, but for many scenariosReactBetter. It’s the same thing. Of course,webpackWhat makes it cool is that the idea applies to most scenarios, most of the problems we’re likely to encounterwebpackSolve, especially it encapsulates the most processing details, so that let more people directly simple configuration can be very good to use, making a fool of the directly, especially powerful development ability let him almost omnipotent, but for programmers are not absolute good thing, just like with more abstract forgot the bottom, with more problem solving tool, we can only rely on solutions to have a meal, So a lot of bosses would sayAh? The front end is so simple
  • So what we can do is we can broaden our horizons, we can read more, we can write more, we can use different tools and different ideas for different scenarios.
  • If you think this article is helpful to your words might as well support yo ~~😛