arrow-left Back to Blog

Gulp


Main image of the post

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-clinpm 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 Contact – combines several files into one.

Culp-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-nitify – 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-multiple – 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

  grunt Gulp gear brunch
Beginning of work The entry barrier is extremely low. As for the threshold of entry into already finished projects, then things are a little different. Getting started with Gulp is as fast as with Grunt. However, it does not have the flaws that exist when working with grunt for large projects. High entry barrier: there are no clear examples in the documentation. Everything is quite clear.
performance Does not use multistreaming, does not use caching.(10 JS, 10 CSS files) ~+180ms Uses multistreaming, uses only one input / output stream when performing a series of tasks with files.(10 JS, 10 CSS files) ~+30ms -//-(10 JS, 10 CSS files) - 300ms -//-(10 JS, 10 CSS files) ~+80ms
documentation The documentation is compact and completely satisfying any requests. All you need to work with the system can be found at the office. site. The documentation is slightly inferior to the grunt, but in general everything is clear. The documentation for this project is a simple set of APIs. No guideline or best practice is here you will find. In git there are 5 files that describe in detail the work with the system and 1 FAQ. Information is simple, easy to understand.
plugins 2000+ plugins, however some part was not updated after the release and / or did not release any releases. 2000+ plugins, and the number increases. In addition to the gear-lib with 5 plug-ins, nothing exists for this system. 50+ plugins, the trend towards a very slow increase in the number.

We have 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.

Share

Read more

Contact us

Send us a few words about your project

+31 641039634 team@mifort.org

Netherlands, Amsterdam, 74-2 Albert Cuypstraat

View on map

Belarus, Minsk, Romanovskaya Sloboda 5

View on map