Streams of Gulp

Modern Ecology of advanced tools made web development quite easy and more welcoming . As you can see there is countless stuff out there to bake our scratch-pad quite quick. Javascript task runner is a new juice among web developers. Gulp is that kind of legion .

Dive into streams

There is task runner like Grunt out there . But still , Gulp is awesome . In my opinion it uses streams of very specific module which is baked to do a very specific task. And to learn more about it , please read this article :Grunt VS Gulp . As you can see this is quite needed to know what we are working with.

So, today we will get geared with gulp by working with it . At the very beginning I would like to say,You must have the Nodejs and Npm package manager installed in your Computer. Go into official NODEJS page and download it from there.

After that to install gulp globally we have to write

npm install -g gulp

in our terminal. After that to check if it is installed there or not, we can write

gulp -v

Let us consider a situation, that we are working with a HTML5-Boilerplate and We badly in need to compress the javascript codes so the performance of the server response get raised.

So, here is what we are going to do, in our terminal we are going to type destination of the current directory where we are working on. Like In my case its in,

$ home/workstation/gulp-try/

This is why in my terminal I wrote cd /workstation/gulp-try/. After that to install the gulp specific node module of uglify js which is named as “gulp-uglify” . We have to type, npm install — save-dev gulp-uglify in our Terminal. This will invoke the nodejs terms to get the module installed in our local directory.

After that in the directory we have to create a file named gulpfile.js. After creating the file and opening it on any text editor. We have to write something like this to use gulp and gulp uglify. Just follow along and later we will explain more about it.

var gulp        = require('gulp'),
      gulpUglify  = require('gulp-uglify');

  gulp.task('compress', function() {
  return gulp.src('lib/*.js')
    .pipe(gulpUglify())
    .pipe(gulp.dest('dist'));
  });

  gulp.task('default',['compress']);

If we take a good look now we will see that we had to define two variable named gulp and gulpUglify and what it does is , these variables requires the gulp and gulp-uglify node modules and loads it and make it ready.

After that you can see we wrote gulp.task() this is where we write specific task a module need to done for us. Inside the parentheses you will notice we named the task as compress and called a callback function after that. Inside the function returned the destination of scripts location we want to get compressed .

After getting the source path we wrote , a pipe method which will add boundless and limitless features to a gulp task. In here we at first added the required gulpUglify() method and after that, we send a destination where it should save the files after compressing.

At the very bottom of the code snippets , we wrote a default task , which will run when we invoke gulp in our terminal from that directory. This default task can take a array of tasks, thus you can invoke a series of different tasks module pretty easily one after another.

So this is it . You have the idea about GULP and streams of it. There is thousands of gulp module available in the gulp site . Here is the link of it Gulp Plugins . So search what you need to get done. And make it happen.