Front-end build tool development and comparison

Rollup

We can’t help but marvel at how fast front-end technology is evolving and how new ideas and frameworks are emerging to make development more efficient. But they all have one thing in common: the source code doesn’t run directly, it has to be transformed to run properly.

The first two parts of this article are excerpted from Webpack 1.2 by Wu Hao-lin, all rights reserved

Build tools do just that, converting source code into executable JavaScript, CSS, AND HTML code, including the following:

• Code conversion: compile TypeScript to JavaScript, COMPILE SCSS to CSS, etc.
• File optimization: compress JavaScript, CSS, HTML code, compress merged images, etc.
• Code segmentation: Extract the common code of multiple pages, extract the first screen without executing part of the code to make it asynchronously recorded in.
• Module consolidation: In a modularized project, there are many modules and files that need to be grouped into a single file by building functionality.
• Automatic refresh: Listens for local source code changes and automatically rebuilds and refreshes the browser.
• Code validation: Verifies compliance with specifications and unit tests before submitting code to the repository.
• Automatic release: After the code is updated, the automatic build releases the code online and transfers it to the release system.

In fact, construction is the embodiment of engineering and automation ideas in front-end development, a series of processes with code to achieve, so that the code automatically execute this series of complex processes. Build injects more energy into front-end development and frees up our productivity.

There have been a series of build tools throughout history, each with its own strengths and weaknesses. Since front-end engineers are familiar with JavaScript and Node.js can handle all build requirements, most build tools are developed in Node.js, and they are described below.

I. Development history and trend of building tools

Npm Scripts

Npm Scripts (Npm Scripts) is a task performer. NPM is a package manager that comes with Node installation. NPM Script is a built-in feature of NPM that allows you to define tasks using the scripts field in package.json files:

{
    "scripts":{
        "dev": "node dev.js",
        "pub": "node build.js"
    }
}Copy the code

The scripts field is an object, and each property corresponds to a Shell script. The above code defines two tasks, dev and pub. The underlying implementation principle is to run script commands by calling the Shell. For example, executing the NPM run pub command is equivalent to executing the Node build.js command.

Advantages: NPM Scripts has the advantage of being built-in and does not need to install other dependencies. Disadvantages: It provides pre and POST hooks, but cannot easily manage dependencies between multiple tasks.

The attached:
NPM Scripts Usage Guide

Grunt

Grunt

Grunt is now largely out of use. Just to be brief. Grunt, like Npm Scripts, is a task-taker. Grunt has a large number of plugins that encapsulate common tasks, manage dependencies between tasks, and automate the execution of dependencies. The specific execution code and dependencies for each task are written in the configuration file gruntfile.js.

The advantages of Grunt are:

• Flexible, it is only responsible for performing tasks that we have defined;
• A number of reusable plug-ins encapsulate common build tasks.

The downside of Grunt is that it is not very integrated and requires many configurations to be written before it can be used out of the box.

Grunt is an evolved version of Npm Scripts. It was created to fill in the gaps of Npm Scripts.

Gulp

Gulp

Gulp is a stream-based automated build tool. In addition to managing and executing tasks, it also supports listening to files and reading and writing files. Gulp is designed to be simple enough to support almost any build scenario with just five methods:

• Register a task with gulp.task;
• Execute tasks using gulp.run.
• Monitor file changes through gulp. Watch.
• Read the file from gulp.src;
• Finish writing the file through gulp.dest.

Gulp introduces the concept of streams and provides a series of plugins to handle streams. Streams can be passed between plugins, as follows:

Var Gulp = require(" Gulp "); Var jshint = require("gulp-jshint"); var sass = require("gulp-sass"); var concat = require("gulp-concat"); . Gulp.task (' SCSS ', function() { SRC ('./ SCSS /*.scss') // the SCSS plugin compiles the SCSS file to css.pipe (sass()) // output file.pipe(guilp.dest('./ CSS ')); }); Gulp.task ('scripts', function() { gulp.src('./js/*.js') .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('./dest')); }); Gulp.task ('watch', function() {gulp.watch('./ SCSS /*.scss', ['sass']); gulp.watch('./js/*.js', ['scripts']); });Copy the code

The advantage of Gulp: It’s easy to use and flexible enough to build on its own or with other tools.

Disadvantages: Similar to Grunt. Integration is not high, need to write a lot of configuration before it can be used, can not do out of the box.

Gulp can be seen as an enhanced version of Grunt. Compared with Grunt, Gulp has the functions of file listening, reading and writing, and streaming processing.

FIS 3

FIS 3

Fis3 is an excellent domestic build tool from Baidu. Compared with Grunt and Gulp, these tools only provide basic functions. Fis3 integrates build features commonly used by developers, as described below.

• Read and write files: use fis. Match to read files and release to configure the output path of files.
• Resource location: Resolves dependencies between files and file locations.
• File fingerprint: When using useHash to configure the output file, add md5 stamps to the URL of the file to optimize the browser cache.
• File compilation: Use the Parser to convert files, such as COMPILING ES6 to ES5.
• Compressed resources: Configure the code compression method using the Optimizer.
• Image merge: Use the Spriter configuration to merge images imported from CSS into a single file to reduce HTTP requests.

The general usage is as follows:

/ / add the md5 fis. Match (' *. {js, CSS, PNG} ', {useHash: true}); Fis.match ('*.ts', {parser: fis.plugin('typescript')}); Fis.match ('*.css', {// assign useSprite useSprite: true}); Fis.match ('*.js', {optimizer: fis.plugin(' uglip-js ')}); Fis.match ('*.css', {optimizer: fis.plugin('clean-css')}); Fis.match ('*.png', {optimizer: fis.plugin('png-compressor')});Copy the code

As you can see, Fis3 is powerful, with a lot of functionality built in and a lot of work done without much configuration.

The advantages of Fis3: The integration of various build features required by the Web legacy, simple configuration, out of the box. The disadvantage is that it is no longer officially updated and maintained, and does not support the latest version of Node.

FIS3 is a complete solution focused on Web development, and if Grunt, Gulp are compared to the engine of a car, FIS3 is a complete car.

Webpack

Module. exports = {// All modules' entry, webpack from entry to all dependent modules entry: './app.js', output: {// Pack all the modules that the entry depends on into a bundle.js file and print filename: 'bundle.js'}}Copy the code

Rollup

Rollup

Rollup is a module packaging tool similar to Webpack but focused on ES6. Its highlight is Tree Shaking ES6 source code to remove code that has been defined but not used and Scope it in order to reduce output file size and improve performance. However, these highlights of Rollup have since been imitated and implemented by Webpack. Since Rollup is used in much the same way as Webpakc, I won’t go into the details of how Rollup is used here, but rather explain the differences:

• Rollup was an alternative to Webpack when it became popular;
• Rollup ecological chain is not perfect, the experience is not as good as Webpack;
• Rollup is not as featureas Webpack, but it is simpler to configure and use;
• Rollup does not support Code Spliting, but the benefit is that there is no Webpack loading, executing, and caching Code in the packaged Code.

Rollup has an advantage over Webpack when it comes to packaging JavaScript libraries because the code it packages is smaller and faster. However, its functionality is not perfect enough to find a ready-made solution in many scenarios.

Why Webpack?

Differences between Gulp and Webpack

Gulp is often compared to WebPack, and the two build tools overlap in functionality, either alone or together, but the essential differences are less clear.

Gulp emphasizes the workflow of front-end development. We can configure a series of tasks, define the transactions that the tasks handle (such as file compression merging, Sprite graphics, server startup, version control, etc.), and then define the execution sequence so that Gulp can execute these tasks, thus building the whole front-end development process of a project. A Task Runner is a person who performs tasks one by one.

What Gulp does not solve is the js Module problem, which is how you structure your code when you write it.

Webpack is a front-end modular solution, which focuses more on module packaging. We can treat all resources in development (pictures, JS files, CSS files, etc.) as modules, process the resources through loader and plugins, and package them into front-end resources that meet the deployment of production environment.

Similarities: File merge & compression (CSS, JS), SASS /less precompilation, start server, version control.

The differences, although both front-end automation build tools, are not peer to peer based on their positioning.

• Modularity is not strictly gulp’s thing; it’s about standardizing the front-end development process.
• Webpack is more clearly focused on modular development, and those functions of file compression and consolidation, pre-processing, but it is incidental to his functions.