In simple words, Gulp is a task runner i.e. rather than manually running multiple tasks over and over again during the lifetime of your project you can tell Gulp to do it for you. By tasks I mean processes like minifying your JavaScript file, converting SCSS/SASS to CSS, watch file for any changes and many other tasks. Gulp makes use of different plugins for every task which can be found here.

Gulp uses Node.js to install, download plugins and execute. You can install node.js from it official website. You can check whether node has been successfully installed by running node -v from you command prompt/terminal; it will show the current node.js version number installed.

Next step is to install gulp globally using npm(Node Package Manager). To install gulp globally use the below mentioned command.

npm install -g gulp

NOTE: prefix sudo if not able to install on Mac.
sudo npm install -g gulp

You can check for the gulp version installed using gulp -v command.

The above command will install the gulp globally on your system so that you can run the gulp command from anywhere. But along with the global installation you also need to install gulp locally for each project. To install gulp locally, run the following command from the root of your project.

npm install --save-dev gulp
// It will be saved inside the node modules folder

Make sure that you have run ‘npm init’ command (if not already done) before installing the gulp. npm init will create a package.json file in your root folder with list of the dependencies.

NOTE: We use –save-dev for installing those packages that have to be used at the development environment and not at the production. For example, you will convert SASS to CSS in development environment and not at the live server.

All gulp tasks are to be created inside a file called ‘gulpfile.js’; so create a ‘gulpfile.js’ at the root of your project.

So, we are ready to create our first task.

Open you gulpfile.js in a text editor and write the following code in it.

var gulp=require('gulp');

gulp.task('default',function(){
// our default task code can come here
console.log("Just ran our first gulp task");
});
var gulp=require('gulp');

The packages that we want to use in the gulpfile.js are to be imported using the require() function. On the left hand side variable name can be anything, it will contain the reference of the package to be used. It is recommended to use the same name as the package name for less confusion.

gulp.task('default',function(){
});

Next we need to use the gulp variable to call the task function. This function accepts two parameters, first one the task name and second one is the function which will be called when this task runs. You can create multiple tasks in a gulpfile. To run a task run need to go to the project root in the command prompt or terminal and just run the task using the gulp command followed by the task name. For example: ‘gulp minifiction’. But for the default task that we have created we don’t need to mention the task name after the ‘gulp’ command. It means it is the default task that will be executed whenever we just run ‘gulp’ command.

gulp.task('default',function(){
// our default task code can come here
console.log("Just ran our first gulp task");
});

Inside our default code we can write any functionality. For the time being we will just output a text to the console.
So to check if its working fine, go to the project root using command prompt and run ‘gulp’ command. You should be able to see a message on your console “Just ran our first gulp task”.

Congratulation, you have just successfully installed gulp and run your first task. In the later posts we will focus on other packages and more advanced tasks that can be accomplished using gulp.

Related Posts