Front-end projects have become increasingly complex, and build tools have become an integral part of the development process. A build tool, in plain English, is a tool that helps us automate these functions by configuring or writing agreed code. For repetitive tasks such as compression, compilation, unit testing, linting, etc., automation tools can reduce our labor, free our hands, and simplify our work.

Popular front-end build tools include Gulp and Webpack. This article will give a comprehensive comparison between gulp and Webpack.


Introduction to the

Gulp is a flow-based automated build tool. In addition to managing and executing tasks, it also supports listening to files, reading and writing files. The website description is as follows:

Enhance your workflow with automated build tools! Gulp automates painful or time-consuming tasks in your development process to reduce the amount of time you waste and create more value

The installation

1. Install nodejs

Gulp is based on nodejs, so you need to install NodeJS. Open the nodeJS official website, select the version (. Msi file) based on the system information, click the Download button, and install next. After the installation, you can view the installed nodeJS version by running node -v. If the version number is displayed, it indicates that NodeJS has been correctly installed.

2. Install gulp

Install gulp on the CLI

npm install –global gulp-cli

Run the gulp -v command to view the gulp version. If the version number is displayed, the gulp version is correctly installed.


Configure the gulpfile.js file,

Js is the configuration file of the gulp project (or a file named gulpfile.js with uppercase initials, just like the Makefile) and is automatically loaded when the gulp command is run. In this file, you will often see gulp apis such as SRC (), dest(), series(), or parallel() functions. In addition, pure JavaScript code or Node modules will be used. Any exported functions are registered in gulp’s task system. (For more configuration, please check the official website)

Simple gulpfile.js configuration (configuration file 1)

// import gulp const gulp = require('gulp'); Gulp.task ("print",function(){console.log(" print 123"); }) // gulp.task(name[, deps], fn) Define task name: task name deps: dependent task name fn: callback functionCopy the code

Using the plug-in’s gulpfile.js configuration (configuration file 2)

// import gulp const gulp = require('gulp'), less = require('gulp-less'); // Define a testLess task(custom task name) gulp.task('testLess', Function () {gulp.src(' SRC /less/index.less') // The file to be called by the task. Pipe (less()) // the module to be called by the task. Pipe (gulp.dest(' SRC/CSS ')); // Will generate index.css under SRC/CSS}); // gulp.task(name[, deps], fn) Define task name: task name deps: dependent task name fn: callback function // gulp.src(globs[, options]) File for executing the task globs: Gulp.task ('default',gulp.series('testLess')); // Define the default taskCopy the code

Run the gulp command

1 Run gulp print on the command line interface (CLI) based on the configuration file

Based on the configuration file 2, enter gulp default in the command line interface (CLI) to obtain the running result and generate the index. CSS file in the SRC/CSS directory


Introduction to the

Webpack is a tool to package modularized JavaScript. All files in WebPack are modules. You can convert files through Loader, inject hooks through Plugin, and output files composed of multiple modules. Webpack focuses on building modular projects. The home page of Webpack shows what Webpack is:

Install webpack

Webpack and Gulp are both node packages. Therefore, nodeJS must be installed before installing Webpack. After installing Webpack, the installation instructions are as follows

npm install --global webpack
Copy the code

Run webpack -v to view the installed WebPack version. If the version number is displayed, the installation is correct.


Configuration webpack. Config. Js

After installing Webpack, create a new webpack.config.js file in the project root directory. This is the default configuration file for Webpack and is similar to gulp’s gulpfile.js.

Since WebPack follows the CommonJS module specification, you can use it in configurations (see the official website for more configurations) :

  • Through the require (…). Importing other files
  • Through the require (…). Use the tool functions downloaded by NPM
  • Use JavaScript to control flow expressions such as? : operator
  • Use constant or variable assignment to value
  • Write and execute functions that generate part of the configuration

The basic configuration

const path = require('path');

module.exports = {
  mode: 'development'.// By selecting either development, Production, or None to set the mode parameter, you can enable webPack's built-in optimizations for that environment. The default value is production
  entry: './foo.js'.// The entry file tells WebPack which file you want to compile
  output: {    // The output property tells WebPack where to output the bundles it creates and how to name them. The default value for the main output file is./dist/main.js, and the other build files are placed in the./dist folder by default
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',}};Copy the code

Run the webpack command

Run the webpack command in the console to generate bundle.js, and the compiled file bundle.js is output to the dist directory

Contrast the conclusion

Both are front-end build tools, gulp was popular in the early days, webPack is more mainstream now, but some lightweight tasks are still handled with Gulp, such as packaging CSS files separately.

Gulp is based on tasks and streams. Similar to jQuery, find a file (or a kind of file), do a series of chain operations on it, update the data on the stream, the whole chain operation constitutes a task, multiple tasks constitute the entire Web build process.

Webpack is entry based. Webpack will automatically recursively parse all the resource files that the entry needs to load, then use different loaders to handle different files, and use plugins to extend WebPack functionality.

So to summarize:

  • In terms of building ideas

Gulp requires developers to split the entire front-end build process into multiple tasks and control the calling relationships of all tasks. Webpack requires the developer to find the entry point and to know which Loader to use to do what parsing and processing for different resources.

  • For the background knowledge

Gulp is more like a back-end developer thinking, you need to know the whole process and WebPack is more like a front-end developer thinking.

The following table compares Gulp and Webpack from various perspectives:

gulp webpack
classification Flow based automated build tools. Modular loader and packaging tool.
The target Automate and optimize development workflows for generic website development. General-purpose module packaging loader for large MOBILE SPA applications.
How easy it is to get started 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.
Build a way 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

Reference documentation

Gulp official document

Webpack official documentation…

Reference documentation

Gulp official document

Webpack official documentation