We understand and work with gulp

Hello. If you are connected with JS, you probably heard about such an application as gulp . And maybe even used. From my own experience I can say that it is difficult to “enter” how to work with it, although the key to understanding lies on the surface. Therefore, publish this material, hoping that it will be useful.



Also, on the basis of this material a video was shot, so you can choose in what form to consume.





If you compare gulp with other popular assembly systems, then this is how to compare a ready-made quadrocopter like “bought and flew”, and a set for self-assembly of a drone. Yes, you only take off the next day, but your hands have more flexibility and control, especially if you have a non-standard task.

')

In fact, after overcoming the threshold of entry, gulp does not look so difficult, and the moments are even understandable and logical. But, without proper preparation, it can be difficult to come to such a state. Let's dive into the most it and consider the principles on which the gulp is built.



Let's go from afar. In the nodejs ecosystem, there is such a thing as streams , or stream. Due to the complexity of the translation, threads are also called threads or threads of a multithreaded program. In our case, a stream is an object representing streaming data, and is a completely different concept.



So these threads offer a convenient interface for asynchronous work with data. The node engine is engaged in the entire read / write process, and we have only the corresponding callbacks, when a new piece of data appeared, when an error occurred, when the stream ended, etc. In this way, I / O efficiency is achieved at minimal cost by the programmer.

const fs = require('fs'); const input = fs.createReadStream('myfile'); input.on('data', (chunk) => { console.log(chunk); }); input.on('end', () => { console.log('file is read'); }); 

Almost everything can be streams in nodejs, from files or strings to sockets. For example, in the well-known framework Express, HTTP request and response are nothing more than streams. Streams can only be read, write only, or both.



Threads have one useful function: they can be added together by a chain called pipe. Thus, we can combine several streams between each other, and manage it as one whole. The output of one stream goes to the next input and so on to the end. As you can guess from the translation of the word pipe, it is very similar to the pipeline.



This allows you to determine the desired data flow (again, the complexity of the translation. Here we mean flow, or flow) right here and now, without waiting for the data to become available.



For example, this is how we can determine what we want to give as a result, and the engine itself is already engaged in “how” to give.

 const fs = require('fs'); const express = require('express'); var app = express(); app.get('/', function (req, res) { fs.createReadStream('myfile') .pipe(res); }); app.listen(3000); 

Please note that the request handler is completed before the file even opens - the node engine takes care of the rest.



Gulp is built on a similar approach. This is his advantage, but it is his fault. The disadvantage, at least, can be called because of the confusion that arises, since gulp uses other, similar, but incompatible flows. Gulp works closely with the file system, which is why it uses streams that represent not so much a data stream as separate virtual files, each with its own content.



If you have ever heard of vinyl , this is exactly the implementation of streams used in gulp. If we take the standard task for the galp, and see what's inside, we find that for each call to the data event, we receive a file object, which contains all the necessary information: the file name, the path to the file, the working directory and of course its content.

 const gulp = require('gulp'); gulp.task('default', function() { gulp.src('./*.js') .on('data', function(file) { console.log('data callback'); console.log(file.inspect()); /* It outputs: * data callback * <File "index.js" <Buffer 2f 2a 20 67 6c 6f 62 ... >> * data callback * <File "another.js" <Buffer 2f 2a 2a 0a 20 2a 20 ... >> */ }) .pipe(gulp.dest('dist/')); }); 

Content can be presented in two formats: in the form of a buffer already read, or in the form of a native Nodow stream. Each stage of the Galp pipe takes such files to the input, does a certain transformation and transfers the output to the next chain. The last chain usually simply saves them to disk.

 .pipe(gulp.dest('dist/')); 

Awareness of the fact that flows in a gulp leads others to enlightenment and understanding, as this explains most of the problems and mistakes.



Consider a real example. You want to use browserify for pasting your JS files. You go and find the gulp-browserify plugin. But you see a postscript that says that the plugin is deprecated, i.e. Outdated







As a well-educated programmer, you dismiss this option, and go to look, and what solution is not outdated. Find the official recipes from gulp, and see that browserify works with galp directly. Well, directly, through the vinyl-source-stream interlayer, which just translates the native Nodal stream into a vinyl stream, which gulp understands. Without it, nothing would have worked, since these are different streams.



If you want to write your own transformation, you can use this template .

As you can see, everything is simple: our handler will be called for each file, which will perform the modifications. We can do whatever we want: change the contents of the file, rename the file, delete the file, or add a couple more new files to the stream.



As we remember, the contents of a file in a vinyl stream can be represented as a buffer or as a data stream. However, it is not necessary to support both. You can always use the vinyl-buffer package, which subtracts the data stream and saves it to the buffer for subsequent transformations.



That's all for now. I hope that you have become a little clearer how to work with gulp. Thank.