Gulp

Gulp

According to the definition given in the official resource, Gulp is a streaming build system. It is initially focused on the building projects. However, you can use Gulp for other tasks besides building projects, because you can write completely different gulpconfig files. This is why it is often possible to find the definition of Gulp as a system for describing an arbitrary kind of tasks.

Benefits

According to the definition given in the official resource, Gulp is a streaming build system. It is initially focused on the building projects. However, you can use Gulp for other tasks besides building projects, because you can write completely different gulpconfig files. This is why it is often possible to find the definition of Gulp as a system for describing an arbitrary kind of tasks.

The developers distinguish the following advantages of gulp:

• Efficiency – gulp has one of the fastest file processing speeds among such build systems as grunt, gear, branch (10 JS, 10 CSS files gulp processes 120ms faster than grunt and 50ms faster than branch);
• Supportability – it is easy to support existing files and write new ones due to simple syntax.

Installing gulp

Example of installation from the official site: npm install --global gulp-cli, npm install --save-dev gulp. Gulp must be installed locally (npm install gulp), and globally (npm install -g gulp). A local gulp is required for the use and conneсtion of the required commands. Global – to write tasks on the command line.

Vinyl fs

Let’s have a look at for implementing methods such as gulp src and gulp dest, which are some of the main gulp methods. We can note that these methods inherit the functional from the Vinyl fs module. To understand the basics of gulp, we need to understand what kind of module it is. So, what is Vinyl and Vinyl fs?

Vinyl is a metadata object that describes the file. This is a virtual object, to which the file information is received during the execution of the gulp src command is copied. Later this information is used to work with files. Vinyl itself only describes the file, but we also need a way to get the ability to modify the files. For this we need Vinyl fs. Vinyl fs is a vinyl adapter for the file system.

In the core of gulp, there is a virtual file system Vinyl fs. It adds src and dest methods to work with the files that create the stream. By default, gulp src reads each file and passes information about its contents to the contents property. Src returns a stream of objects of vinyl type. Further, these objects pass through the plugins and end up in the gulp dest method. The dest method returns a writable stream and writes vinyl objects to disk in the directory that was specified by the user. As a result, we can see the result of gulp working with our files in the directory that was specified in gulp dest.

The ways of signaling about completion of the process

In gulp, all tasks are asynchronous. Each task should signal that it is completed in one of the following ways.

• callback;
• return new Promise((resolve, rejected) =>{….resolve("result");});
• return require(‘fs’).createReadStream(__filename).).

Important note: returned streams, promises, etc. in gulp will be read, but the results will not be passed on, but will be discarded. This means that we can not pass the result of executing one task as a starting point for another task.

Gulp plugins

There are about 3200 plugins for gulp. Consider the most commonly used plugins.

Gulp concat – combines several files into one.

Gulp-if – checks whether any condition specified in brackets is satisfied. If the condition is satisfied, the code will be execute.

Gulp-newer – connects to the chain, receives from the src files in the stream and looks: if the file in the directory is the same and it has the same or a new modification date - it does not miss it.

Gulp-autoprefixer – adds browser prefixes.

Gulp-watch – monitors files and performs the specified actions if the files have been changed. The previous assembly is not completely removed. The new assembly is built on the basis of the previous one.

Browser-sync – synchronizes not only changes but also actions in browsers.

Error handling

When you run the gulp src command, the vinyl object passes through the plugin chain. If an error occurs in some threads, an error event is generated. You can catch it by connecting to the error event.

.on('error', function(err) {
console.log(err.message);
this.end
})

Unlike node js, the process does not die when errors occur. This is due to the async done library, which runs tasks and waits for them to be executed. In order to understand what exactly went wrong, the following plugins are used:

• Gulp-notify – connects to the stream and monitors the onerror event. If it occurs, displays information about the error in the console;
• Gulp-plumber – returns a special stream that does nothing with the data. It has an error handler built-in that not only subscribe to the error for one plug-in, but it will automatically do this for all subsequent plug-ins connected via pipe;
• Gulp-multipipe – combines several streams into one. When we take a single stream and into it something pipim, then it passes the data on the chain.

Comparison of popular assembly systems

Today we reviewed one of the streaming build systems. What conclusions can we draw on the basis of the above and should we spend our time studying this tool? Gulp is an easy-to-learn, productive build system with detailed documentation and a large number of plugins. All this in aggregate can help you, as a developer, to simplify not only the build process, but also the development process too.