Creating first Gulp project

Creating First Gulp Task

gulp-1

Welcome to the second article of Gulp for Beginners, in the previous article we have seen the way to install gulp in our local machine in this article we would create a Gulp project as well a gulp file with default task

Creating Project Root

We will create a folder in the desired location and name it as a project, this will serve root folder for the project that we are going to create. Then navigate this folder on the command prompt, and type the following command.

npm init

This will prompt few details like project name, project version and few more details about the project, it will create the package.json which will contain information about the project. Once package.json file is created we can install gulp to our project using the following command.

npm install gulp --save-dev

–save-dev flag is added with the npm command to install dev dependency. As of now, we have installed npm modules in our root folder. Next, we would set up generic web app folder setup as follows.

A generic web app folder structure will look as follows,

|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json

In this above folder structure, the app folder is intended for development purpose and dist folder is used to store optimized code for production. Now we will start to create gulpfile.js.

Creating gulpfile.js

The gulpfile is simply a JavaScript file, open any text editor and create a gulpfile.js file and save at appropriate place as shown on the folder structure example above, add the following code on to the file and finally save.

var gulp = require('gulp');

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

require statement looks for gulp package on the node_modules folder and loads its contents if it found. On the second line of the above snippet, we are trying to create a gulp task which will just print the text hello. Head back to the terminal type gulp and hit enter, this will display the text hello at the command prompt.

Screenshot (230)

Note : The default task is the initial task that will executed when gulp
command is executed on the command prompt, if we name it as different
than default we should the name on command prompt.

eg: gulp function_name

We have created first simple gulp task but typically a gulp task would be bit complex than this, we will explore more gulp packages on upcoming articles.

Happy coding 🙂