ReactJS Blog: The one where you GULP it up!!

First let’s start like every other blog.

So what is GULP?
Gulp is a task/build runner for development. It allows you to do a lot of stuff. You can compile sass files, uglify and compress javascript files and much more.

What is the need of gulp for development using React.

So what we showed in the first blog is not what you would do if you go and build a real world application.

Bare minimum you would have to build (convert React JSX to javascript understood by the browser), uglify, minify etc.

So how would you go about doing it.

One way is to have sites that do some of these tasks for you like uglify and minify but that becomes cumbersome if there are multiple files and with every revision in code you would have to do it.

Another way may be using libraries that do it for you but you would have to run each library manually.

This is where GULP comes into picture. With GULP you can write tasks that can be run individually or one after another to satisfy different use cases in a development environment.

Let’s go ahead and GULP IT UP.

Setting up gulp.

Install Nodejs on you machine((if you don’t have node installed please go to NodeJs websitehttps://nodejs.org/en/download/ and install the same)

Node comes with a package or dependency manager npm (node package manager).

Create new folder gulp-example. Go inside this folder and run the following command on your terminal.

npm init
(Upon running it you will get a prompt to fill some fields. Just “PRESS ENTER” in all and “yes in the end).

A file named package.json is now in your folder. If you open you’ll see that it contains the same keys with some value that you were prompted for earlier.

Now run the following commands.

npm install -g gulp
npm install --save-dev gulp

Create two new folders inside gulp-example: src & dist.

Let’s begin gulping.

GULP has a task named “default” which will run of you don’t tell it what specific task to run.

Make a file gulpfile.js inside the root folder and paste the following code.

var gulp = require(‘gulp’);
gulp.task(‘default’, function() {
console.log(‘Hello world’);
});

Run the following command on the terminal from root folder.

gulp

You will get an output like this

We get an instance of gulp by “requiring” it.

gulp.task is the function that takes in the name of the task and a callback function.

Replace code in gulpfile.js with the following code.

var gulp = require(‘gulp’);
gulp.task(‘task1’, function() {
console.log(‘Hello world’);
});

again run “gulp” command this time it will give an error.

This is because now there is no default task. (Run gulp task1 instead).

Replace code in gulpfile.js with the following code.

var gulp = require(‘gulp’);
gulp.task(‘task1’,[‘task2’] , function() {
console.log(‘I am task 1’);
});
gulp.task(‘task2’, function() {
console.log(‘I am task 2’);
});

run command “gulp task1”. You will see this output.

If you want to run some tasks before executing the main task you can pass an array of task(s) as second argument to the function which are to be executed before main functions execution.

(Try it out with multiple tasks and try to re-arrange the task position in the array you pass).

Let’s look at the final example.

Run the following command in your terminal/command prompt.

npm install gulp-concat gulp-uglify gulp-rename --save-dev

Make a folder named js in your src and dist folders you made earlier.

Create a file named “one.js” in src/js and paste the following code in it.

function one() {
console.log(‘Hi i am function 1’);
}

Create another file named “two.js” in src/js and paste the following code in it.

function two() {
console.log(‘Hi i am function 2’);
}

Replace code in gulpfile.js with the following code.

var gulp = require(‘gulp’);
var concat = require(‘gulp-concat’);
var uglify = require(‘gulp-uglify’);
var rename = require(‘gulp-rename’);
//Concat and uglify scripts
gulp.task(‘scripts’, function() {
return gulp.src(‘src/js/*.js’)
.pipe(concat(‘all.js’))
.pipe(gulp.dest(‘dist/js’))
.pipe(rename(‘bundle.min.js’))
.pipe(uglify())
.pipe(gulp.dest(‘dist/js’));
});

Just like before we have the gulp.task which tells gulp that there is some task called ‘scripts’.

Step 1: gulp.src takes the location of src folder (which is src/js) and searches for every file with .js extension. Then pipes the result onto the next step (piping is done through node streams not gulp api. Is similar to| in unix).

Step 2: After reading it concats the stream and writes it to a file named all.js (all.js is not written to memory i.e. gulp does not produce temp files rather it keeps it in memory which makes it fast).

Step 3: gulp.dest takes path of the destination folder (dist/js) and writes file onto the destination (Note if only dist folder is there it will not create the js folder and write inside it, nor will it throw any error. You will simply see the task ending with success but no output will be generated).

Step 4: rename takes copy of all.js renames it to bundle.min.js then passes onto next step.

Step 5 & 6: uglify uglifies the code in the bundle.min.js and then finally gulp.dest writes it onto dist/js.

run command “gulp scripts”. You will see this output.

and will see two files in dist/js i.e. all.js and bundle.min.js

You can write many more tasks and a lot more plugins are available like gulp-sass to compile scss to css or gulp-watch to run watch programs that look for code changes and rebuilds the bundled files and many more.

To know more about gulp visit checkout it’s API Docs

GET Code.

You can get the code shown today from here.

Just follow the Readme instructions and you’ll be good to go.

That brings us to the end of this Tutorial.

Please feel free to ask any questions.

Further Reads.

ReactJS Blog: React Basic TODO app using single HTML file

Reatjs Blog: What is an Isomorphic app