GULP.JS – BASIC TUTORIAL AND FIRST STEPS

In this article, we will learn how to use Gulp.js to improve and speed up our workflow by developing and trying to understand how it works.

WHAT IS GULP.JS?

Gulp.js is a build system that allows you to automate common development tasks such as minification of JavaScript code, browser reloading, image compression, code syntax validation and endless tasks.

As you’ll see, it does not matter if you’re a Front-End, Back-End developer or both at the same time. If today you do not want to waste time doing common tasks “manually”, it’s time to learn to use an automator like Gulp.js.

Additionally Gulp.js is built with Javascript, works on Node.js and is Open Source, so your source code can be found in github.

WHY SHOULD YOU BE INTERESTED IN USING GULP.JS?

Because today a developer’s workflow has become more complex, we use many development tools, so configuring each task and executing it “manually” and separately takes too much time.

Because Gulp.js not only solves this problem but also provides improvements, becoming a tool that has practically everything in one, it also allows us to manage and control all those tasks in one place.

Because Gulp.js prefers the code over the configuration, this not only makes it very easy to write tasks, but also makes it simpler to read and maintain.

Because Gulp.js has strict guidelines for creating its plugins, which ensures that these are simple and that they work as expected.

Just to mention it, one of the guidelines is the following: “A plugin should only do one thing and do it well”. This guideline has been very positive for users of Gulp.js, we will check later when we see how to configure a task with Gulp.js.

HOW DOES GULP.JS WORK?

Gulp.js uses the Node.js Stream module, which makes it faster to build, unlike Grunt.js.

Gulp.js does not need to write temporary files and / or folders on the hard disk, which means that it will perform the same tasks as Grunt.js but in less time.

Gulp.js uses the pipe () method, this method obtains all the data of a Readable stream and writes it in destiny that we indicate it or otherwise it delivers or it serves to another pipe.

In the following image we will see how Grunt.js manipulates the files when performing its tasks:

Grunt.js

And in this we will see how Gulp.js manipulates the files when performing its tasks:

Gulp.js

As we can see, although the 2 did the same task Gulp.js did not write temporary files on the hard drive. Gulp.js performed 4 operations and Grunt.js performed 8 operations.

Gulp.js uses the power of the Node.js package vinyl-fs to read and write Streams.

Gulp.js also uses a Node.js package for the sequencing, execution of tasks and dependencies in maximum concurrency, called Orchestrator.

Later on we will see in more detail how Node.js. Streams work.

HOW TO INSTALL GULP.JS?

To install Gulp.js the only requirement is to have Node.js installed. If you use Linux Ubuntu and still do not have it installed this post can serve you.

INSTALLING GULP.JS GLOBALLY ON OUR SYSTEM

<span class="pln">
npm install </span><span class="pun">-</span><span class="pln">g gulp
</span>

If you are using Linux or Mac, you may need to put the word sudo before you can run this command with the administrator permissions, like this:

<span class="pln">
sudo npm install </span><span class="pun">-</span><span class="pln">g gulp
</span>

We have verified that Gulp.js has been successfully installed.

<span class="pln">
gulp </span><span class="pun">-</span><span class="pln">v
</span>

If we have it installed correctly, it will show us the following:

<span class="pln">
CLI version </span><span class="lit">3.8</span><span class="pun">.</span><span class="lit">6</span><span class="pln">
</span><span class="typ">Local</span><span class="pln"> version </span><span class="kwd">undefined</span><span class="pln">
</span>

Where CLI version is the version of Gulp.js installed in our system and Local version is the version of Gulp.js installed in our local project, but as we have not yet created our project we will be undefined.

HOW TO USE GULP.JS?

Once installed on our system we are ready to create our first project using Gulp.js, our little project will concatenate two .js files in one and then minify it. So we will configure 2 tasks (concatenate and minify), all contained in a task called “demo”.

We create a folder called: gulp-first-steps , we enter that folder via terminal.

Then there we create our file: gulpfile.js , which is the file that Gulp.js needs to know what tasks will perform and for now we will not have any content.

Then we write the following (at this point we assume that we have installed Node.js):

<span class="pln">
npm init
</span>

Npm will ask us the data of our project, since this time we are just doing a demo. Simply press Enter to answer all the questions.

With this, Npm must have created a file called: package.json, which will contain something like the following:

<span class="pln">
</span><span class="pun">{</span><span class="pln">
  </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"gulp-first-steps"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"version"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"0.0.1"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"description"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Gulp: first steps"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"main"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"gulpfile.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"author"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"wesharethis"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"license"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"MIT"</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span>

Now we will add the development dependencies to our project, the first one to install will be: gulp, so we write the following in our terminal:

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp
</span>

Then install: gulp-concat

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">concat
</span>

And finally we installed: gulp-uglify

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">uglify
</span>

Note that if we do not add the parameter: -save-dev , then Npm will not add this package as a development dependency of our project and much less add it to our package.json file.

As we can see, our package.json file has changed and should contain something like the following:

<span class="pln">
</span><span class="pun">{</span><span class="pln">
  </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"gulp-first-steps"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"version"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"0.0.1"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"description"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Gulp: first steps"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"main"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"gulpfile.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"author"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"wesharethis"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"license"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"MIT"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"devDependencies"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"gulp"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"^3.8.7"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"gulp-concat"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"^2.3.4"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"gulp-uglify"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"^0.3.1"</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span>

As we see, we added the dev Dependencies key and inside it we begin to save our development dependencies and the version that we installed locally.

Then we will create the following folders and files:

We create the folder js and inside this folder we will create the source folder.

Within the source folder we will create the file 1.js and we will add the following content:

<span class="pln">
</span><span class="com">// Content of file 1.js</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> sumar </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> b</span><span class="pun">){</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> a </span><span class="pun">+</span><span class="pln"> b</span><span class="pun">;</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
</span>

Again within the source folder we will create the file 2.js and we will add the following content:

<span class="pln">
</span><span class="com">// Content of file 2.js</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> restar </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> b</span><span class="pun">){</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> a </span><span class="pun">-</span><span class="pln"> b</span><span class="pun">;</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
</span>

Now let’s put the following content into our gulpfile.js file :

<span class="pln">
</span><span class="com">/*
* Dependencies 
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
  concat </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-concat'</span><span class="pun">),</span><span class="pln">
  uglify </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-uglify'</span><span class="pun">);</span><span class="pln">

</span><span class="com">/*
* Setting up the task 'demo'
*/</span><span class="pln">
gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'demo'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="str">'js/source/*.js'</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">concat</span><span class="pun">(</span><span class="str">'todo.js'</span><span class="pun">))</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">uglify</span><span class="pun">())</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'js/build/'</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

With this we have everything configured, so to test it in our terminal we write the following:

<span class="pln">
gulp demo
</span>

And if all goes well, it will give us the following message:

<span class="pln">
</span><span class="pun">[</span><span class="lit">11</span><span class="pun">:</span><span class="lit">23</span><span class="pun">:</span><span class="lit">09</span><span class="pun">]</span><span class="pln"> </span><span class="typ">Using</span><span class="pln"> gulpfile </span><span class="pun">~</span><span class="str">/htdocs/</span><span class="pln">gulp</span><span class="pun">-</span><span class="pln">first</span><span class="pun">-</span><span class="pln">steps</span><span class="pun">/</span><span class="pln">gulpfile</span><span class="pun">.</span><span class="pln">js
</span><span class="pun">[</span><span class="lit">11</span><span class="pun">:</span><span class="lit">23</span><span class="pun">:</span><span class="lit">09</span><span class="pun">]</span><span class="pln"> </span><span class="typ">Starting</span><span class="pln"> </span><span class="str">'demo'</span><span class="pun">...</span><span class="pln">
</span><span class="pun">[</span><span class="lit">11</span><span class="pun">:</span><span class="lit">23</span><span class="pun">:</span><span class="lit">09</span><span class="pun">]</span><span class="pln"> </span><span class="typ">Finished</span><span class="pln"> </span><span class="str">'demo'</span><span class="pln"> after </span><span class="lit">9</span><span class="pln"> ms
</span>

Which tells us that the demo task was executed successfully in 9 milliseconds.

To check if the 2 required tasks were executed, go to the js / build folder and open the todo.js file and show the following content:

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> add</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">r</span><span class="pun">,</span><span class="pln">n</span><span class="pun">){</span><span class="kwd">return</span><span class="pln"> r</span><span class="pun">+</span><span class="pln">n</span><span class="pun">},</span><span class="pln">subtract</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">r</span><span class="pun">,</span><span class="pln">n</span><span class="pun">){</span><span class="kwd">return</span><span class="pln"> r</span><span class="pun">-</span><span class="pln">n</span><span class="pun">};</span><span class="pln">
</span>

As we see, with simple and clean lines of code we have done 2 common development tasks (concatenate and minify .js files).

For this we use 2 plugins of Gulp.js, the good news is that there are currently more than 1800 plugins for Gulp.js, so imagine everything you can automate in your workflow with Gulp.js.

ANALYZING THE GULPFILE.JS

Now let’s analyze the code we wrote in our gulpfile.js to understand a
little more how Gulp.js.

First to carry out the tasks that we want, we require the following packages: gulp, gulp-concat and gulp-uglify, like this:

<span class="pln">
</span><span class="com">/*
* Dependencies 
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
  concat </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-concat'</span><span class="pun">),</span><span class="pln">
  uglify </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-uglify'</span><span class="pun">);</span><span class="pln">
</span>

API

Gulp.js has a small API, this will allow you to learn Gulp.js quickly.

GULP.TASK ()

With the gulp.task () method we define a task, this method takes 3 arguments: the name of the taskthe tasks that this task depends on and the function that will execute when calling this task.

In our example we only use 2 parameters: the name and function, like this:

<span class="pln">
</span><span class="com">/*
* Setting up the task 'demo'
*/</span><span class="pln">
gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'demo'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="com">// Content of the task 'demo'</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

With this we declare “demo” as the name of the task and inside we write what we want our task to do.

So if we want to call this task just write in our terminal:

<span class="pln">
gulp demo
</span>

TO-DO LIST

A task can also act as a task list, suppose we want to define a task that runs other tasks, for example: imagescss and js. Then we would write the following:

<span class="pln">
gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'Static'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'images'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'css'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'js'</span><span class="pun">]);</span><span class="pln">
</span>

Which means that when executing the task “static” with the static gulp command will execute these 3 tasks.

The detail is that these tasks will run asynchronously, so that they will all run together at the same time without any order of execution.

TASKS AS A DEPENDENCY

If we want a task to execute yes and only if another task has finished before, then we can do the following:

<span class="pln">
gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'css'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'imagenes'</span><span class="pun">],</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="com">/*
  * Here would go the content of my task 'css'   
  * It will run only when the task  
  * 'Images' is finished.
  */</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

Then, when we run the “css” task, Gulp.js will first execute the “images” task, wait for this task to finish and then just run the “css” task.

DEFAULT TASK

Gulp.js allows us to define a default task, which only runs when typing the gulp command. This can be done just by setting the task to the default name, like this:

<span class="pln">
gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'default'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="com">/*
  * Code of our default task.
  */</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

And of course, you can also make your default task a task list, like this:

<span class="pln">
gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'default'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'css'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'js'</span><span class="pun">]);</span><span class="pln">
</span>

This task will execute the tasks ‘css’ and ‘js’, just typing in our terminal:

<span class="pln">
gulp
</span>

GULP.SRC ()

The gulp.src () method takes as a parameter a glob value ie a string that matches one or more files using the patterns used by the unix shell (shell) and returns a stream that can be “piped” to An additional plugin or to the gulp.dest () method.

This parameter can be a string or a collection of glob values.

Gulp.js uses the Node.js node-glob package to get the files specified in it or the globes entered.

EXAMPLES OF GLOBS

  • Js / source / 1.js exactly matches the file.
  • Js / source / *. Js matches the files that end in .js inside the js / source folder.
  • Js / ** / *. Js matches the files that end in .js into the js folder and into all of its sub-folders.
  • ! Js / source / 3.js Excludes specifically the 3.jsfile
  • Static /*.+ (js | css) matches files ending in .js or .css within the static /

There are more patterns, you can check them from the documentation of the minimatch library.

So you have the opportunity to make all possible combinations as you need them.

As in our demo, we needed to find all files ending in .js inside the js / source folder , like this:

<span class="pln">
gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="str">'js/source/*.js'</span><span class="pun">)</span><span class="pln">
</span>

Every time Gulp.js finds a file that matches our pattern, it will get it into a Stream, which will be like a collection of files. Of course, respecting the properties of each file (path, etc).

Then we can say that we will have all those files with their respective properties inside a Stream, This Stream can be manipulated by Gulp.js.

THE PIPE () METHOD OF NODE.JS

The pipe () can read, help transform and record the data of a Stream.

That is why in our example we use the pipe () method 3 times.

The first time we use it to read the Stream and we pass it to the concat plugin for it to concatenate and transform the Stream data like this:

<span class="pln">
</span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">concat</span><span class="pun">(</span><span class="str">'todo.js'</span><span class="pun">))</span><span class="pln">
</span>

The second time we use it to read the current data (js concatenated) and pass it to the “uglify” plugin, so that it performs the minification of the concatenated file. All this without writing to the disk no temporary files, like this:

<span class="pln">
</span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">uglify</span><span class="pun">())</span><span class="pln">
</span>

The third time we pass it to the method gulp.dest () , so let’s see that it does this method.

GULP.DEST ()

It channels and writes files from a Stream, so it can channel to several folders. It will create the folders that do not exist and will return the Stream, in case we want to do some more action.

In short, it serves to write the current data of a Stream.

And in our example we use it like this:

<span class="pln">
</span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'js/build/'</span><span class="pun">))</span><span class="pln">
</span>

So we write the resulting Stream data into the js / build /folder.

The final code looks like this:

<span class="pln">
</span><span class="com">/*
* Dependencies 
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
  concat </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-concat'</span><span class="pun">),</span><span class="pln">
  uglify </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-uglify'</span><span class="pun">);</span><span class="pln">

</span><span class="com">/*
* Setting up the task 'demo'
*/</span><span class="pln">
gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'demo'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="str">'js/source/*.js'</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">concat</span><span class="pun">(</span><span class="str">'todo.js'</span><span class="pun">))</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">uglify</span><span class="pun">())</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'js/build/'</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

As I performed 2 consecutive tasks, with Gulp.js you can do many more.

GULP.WATCH ()

View files and do something when a file is modified. This always returns an EventEmitter that issues the change events.

It has 2 ways to use:

Gulp.watch (glob, tasks) or gulp.watch (glob, callback) .

<span class="pln">
gulp</span><span class="pun">.</span><span class="pln">watch</span><span class="pun">(</span><span class="str">'js/source/*.js'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'js'</span><span class="pun">]);</span><span class="pln">
</span>

Thus, whenever a js file that is inside the folder is modified js / source / automatically the task will run js.

<span class="pln">
gulp</span><span class="pun">.</span><span class="pln">watch</span><span class="pun">(</span><span class="str">'js/source/*.js'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
  </span><span class="com">/*
  * Here would go the code of the action you want to perform, 
  * When changes are made to these files.   *  
  * You could also execute a task using the method
  * gulp.start('js')
  *
  * But this method is not official, it belongs to the   
* 'Orchestrator' package since Gulp inherits the  
 * Orchestrator methods.
  */</span><span class="pln">  
</span><span class="pun">});</span><span class="pln">
</span>

With this we can already use the API of Gulp.js very easily.

PLUGINS

As I said before Gulp.js has about 1800 “official” plugins and other unofficial plugins, “official” plugins can be found on the plugins page of Gulp.js or looking with the keyword gulpplugin in npm.

Currently there are plugins to almost everything that is needed when developing, if you want you can go through our post about the most used plugins of Gulp.js and its basic configurations.

Most plugins are fairly easy to use, have good documentation and run in the same way (by channeling a stream of file objects). These plugins normally modify the files (although some, like validators, will not) and return the new files that will be passed to the next plugin in a Stream.

For example let’s say that in example we had to add the syntax validation functionality, then we would do the following:

<span class="pln">
npm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev gulp</span><span class="pun">-</span><span class="pln">jshint
</span>

And then our gulpfile.js would look like this:

<span class="pln">
</span><span class="com">/*
* Dependencies 
*/</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> gulp </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp'</span><span class="pun">),</span><span class="pln">
  jshint </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-jshint'</span><span class="pun">),</span><span class="pln">
  concat </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-concat'</span><span class="pun">),</span><span class="pln">
  uglify </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'gulp-uglify'</span><span class="pun">);</span><span class="pln">

</span><span class="com">/*
* Task configuration 'demo'
*/</span><span class="pln">
gulp</span><span class="pun">.</span><span class="pln">task</span><span class="pun">(</span><span class="str">'demo'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  gulp</span><span class="pun">.</span><span class="pln">src</span><span class="pun">(</span><span class="str">'js/source/*.js'</span><span class="pun">)</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">jshint</span><span class="pun">())</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">jshint</span><span class="pun">.</span><span class="pln">reporter</span><span class="pun">(</span><span class="str">'default'</span><span class="pun">))</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">concat</span><span class="pun">(</span><span class="str">'todo.js'</span><span class="pun">))</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">uglify</span><span class="pun">())</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">gulp</span><span class="pun">.</span><span class="pln">dest</span><span class="pun">(</span><span class="str">'js/build/'</span><span class="pun">))</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

I just added 3 specific lines to my gulpfile.js and I am already doing another task on the same files, that is why it is simpler than Grunt.js, where you can not code but you have to put in the JSON object your configuration, Which limits you a lot and causes you to generate a very large configuration file and always get very messy.

ABOUT PIPES ON UNIX

To further understand the Gulp.js process below let’s see how pipes work in Unix.

In unix, bash commands can “pipear” or “pipe” the output of another bash command, allowing to operate that information before being returned, let’s see a practical example.

For example if we want to find out our MAC address in unix we execute the following command:

<span class="pln">
ifconfig
</span>

Which gives us all this information:

<span class="pln">
eth0
  inet addr</span><span class="pun">:</span><span class="lit">192.111</span><span class="pun">.</span><span class="lit">77.27</span><span class="pln">  </span><span class="typ">Bcast</span><span class="pun">:</span><span class="lit">192.111</span><span class="pun">.</span><span class="lit">77.255</span><span class="pln">
  </span><span class="typ">Link</span><span class="pln"> encap</span><span class="pun">:</span><span class="typ">Ethernet</span><span class="pln">  </span><span class="typ">HWaddr</span><span class="pln"> </span><span class="lit">00</span><span class="pun">:</span><span class="lit">1b</span><span class="pun">:</span><span class="lit">00</span><span class="pun">:</span><span class="pln">bb</span><span class="pun">:</span><span class="lit">1c</span><span class="pun">:</span><span class="pln">ab
  </span><span class="typ">Mask</span><span class="pun">:</span><span class="lit">255.255</span><span class="pun">.</span><span class="lit">255.0</span><span class="pln"> </span><span class="typ">Scope</span><span class="pun">:</span><span class="typ">Link</span><span class="pln">
  collisions</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> txqueuelen</span><span class="pun">:</span><span class="lit">1000</span><span class="pln">
</span>

But we do not want all that information, but only our MAC address, so here we can use the power of the pipes to accomplish this with the following code.

<span class="pln">
ifconfig </span><span class="pun">|</span><span class="pln"> grep </span><span class="str">"HWaddr"</span><span class="pln">
</span>

Now we did get specifically what we needed:

<span class="pln">
</span><span class="typ">HWaddr</span><span class="pln"> </span><span class="lit">00</span><span class="pun">:</span><span class="lit">1b</span><span class="pun">:</span><span class="lit">00</span><span class="pun">:</span><span class="pln">bb</span><span class="pun">:</span><span class="lit">1c</span><span class="pun">:</span><span class="pln">ab </span><span class="typ">Link</span><span class="pln"> encap</span><span class="pun">:</span><span class="typ">Ethernet</span><span class="pln">
</span>

CLARIFICATIONS

  • The ifconfig command returns all the network information to our computer.
  • The grep command looks for lines that match a pattern we passed.
  • Pipe = |

EXPLANATION OF THE PROCESS

The process was as follows:

  1. The ifconfig command generated a response.
  2. Before it is written “channel” that response using a pipe.
  3. To that answer we apply the command grep with the pattern: “HWaddr”.
  4. And finally it returns only the MAC address.

All this was done directly on the initial response and without storing it or writing it to disk temporarily.

In the same way works Gulp.js, channeling the resulting stream of a function or plugin and passing that response to be operated by a new function and so on.

ARE THERE OTHER BUILDING SYSTEMS MADE WITH JAVASCRIPT?

Of course, I will list the ones that I find most interesting:

If you were already encouraged to use Gulp.js then I recommend you read our article Gulp.js most used Plugins and their basic configurations. To create tasks in Gulp.js, start automating your projects and start saving time.

I hope this article has helped you to know Gulp.js, if you have any doubt, query or clarification just leave it your comments, we will be ready to help.

Here at Wesharethis,  we are willing to share knowledge, to teach and to learn!.

If you like the article, please share it on social networks. That way they help us a lot! The options to share are below, thank you very much.

Written by
Am a tech geek.. Do you wanna know more about me..? My contents will do tell you.

Have your say!

0 0

3 Comments

  1. I with you agree. In it something is. Now all became clear, I thank for the help in this question.
    https://twitter.com/top_choise
    http://www.sexybang.top/gal/2740.html
    http://elind.pw/
    http://www.sexybang.top/gal/7034.html

  2. Thanks Ahmad.

    I am trying to learn this. Thanks Bro

    • Tips..
      You are highly welcome..Am glad you find it helpful. Thanks for your kind word… Always look back for me

Comments are now closed for this post.

Lost Password

Please enter your username or email address. You will receive a link to create a new password via email.

GULP.JS - BASIC TUTORIAL AND FIRST STEPS

by Ahmad
Turn up.. Let's be friends on social networks also