Gulp.js is a build system which automates several tasks of your web projects and enhances your workflow. It’s often used for front end development tasks.

In simple words, we write a JavaScript file and store within our web project which has some functions or tasks to be performed and then we run that file through Command Prompt utilizing Node.js platform.

To this moment, if you have never heard about Node.js or nothing know about then its ok. Particularly for using gulp.js, you don’t need to know anything about it.

How-to-enhance-your-workflow-through-gulp.js

What you can do with Gulp.js

If you check the official site of gulp, you will find +2500 plugins or tasks are listed over there. You can do almost anything by using them. Here are some like –

  • Minifying CSS & Js files.
  • Compiling SASS to CSS.
  • Compressing images.
  • Checking Bootlint, w3c etc errors.

These are some of the basics tasks which you can perform.

Installing & Getting Started

1. First of all, install Node.js in your system.

2. After that open Command Prompt, then type

npm install --global gulp

By running this command, the gulp will install globally. It takes 1-2 minutes to complete.

 

gulp-command-prompt

 

3. Then install the gulp in your project.

npm install --save-dev install gulp

Previously we install the gulp globally, now again we install it but within our project. As you can clearly see that I installed it where my project is located. A folder named node_modules will be created.

 

gupl-save-dev

 

4. Create a gulpfile.js file and placed at the root of your project.

 

gulp3

 

Note:

  • Never change the name of gulpfile.js to some other. If you do it will not work. 
  • With every new project, you need to install gulp and its dependencies within project.

Everything is set. Now its time for performing our first task.

Performing A Basic Task

UglifyJs

Now, say we want to perform some tasks like minifying Js files, Compile SASS to CSS, and find Bootlint errors.

For that, open the gulp website, tab on plugin link , search for gulp-uglify.

It will redirect us to npmjs.com, here “npm” stands for node package manager and “js” for javascript as you all know. That is the reason we first install the node.js in our system.

 

gulp-uglify

 

 

For performing this task, install the gulp-uglify within your project same as we done previously.

npm install --save-dev gulp-uglify

Then open your gulpfile.js, then type the below code.

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

The first line of code is mandatory to be written.

What we are doing above is that we are creating a variable which catches the required task to be performed.

//Uglify Task
gulp.task('scripts', function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});

You can clearly see that we are creating a task and we named it ‘scripts’.
We are giving the source from where it have to pick the files, uglify or minifying it and then save it to the destination.

//Initiate
gulp.task('default', ['scripts']);

Save the gulpfile.js.

Open the Command Prompt. Write gulp and hit enter.

 

gulp-run

 

It runs the task and you find a folder named ‘build’ which have all minified js files.
How simple is that :).

Code all together

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
 
//Uglifies
gulp.task('scripts', function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
 
//Initiate
gulp.task('default', ['scripts']);

 

Conclusion

As you see it is very easy to run the task right!. You can perform many tasks just by writing few lines of code.

In near future, I will try to include more tasks in this article.

Please do comment below if you like it and also if you have some doubt regarding this article, I’m glad to help you.

LEAVE A REPLY

Please enter your comment!
Please enter your name here