Creating First Gulp Task
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.
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,
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.
var gulp = require('gulp');
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.
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 🙂