This his article is about how to start with gulp process as a beginner. It is a simple step by step guide to install and start with gulp.
Before we jump into the process, lets get to know a little about Gulp.
What is Gulp?Gulp is a build tool or simply a toolkit which helps to automate your repetitive set of tasks (known as task-runners) in your development work. These tasks can be anything such as compiling CSS preprocessors, JavaScript or image files, building a project and deployment of the files in a separate folder, browser reloading, minification and so on. Basically these development tasks are time consuming or tedious and Gulp does it all for us. We will not get into how all this work as of now but remember it works with package managers and handles front-end tasks.
Getting started with Gulp
1. Install Node.jsAs I mentioned Gulp works with a package manager npm. Node is server side package manager.
First step is to make your environment ready for Gulp. Download Node.js from its site here.
Install with the install wizard. Once you have Node installed, open up your terminal (command or powershell) and check few things. You should be able to type node -v in prompt which should see something like 'v6.10.3' or whatever version you installed. Likewise, you can also detect npm version by typing npm -v in terminal. npm gets installed with Node itself.
2. Install GulpNow, you need to install Gulp globally. Execute this command in the terminal npm install -g gulp. If you have Mac or Linux it will need extra sudo keyword to install Gulp. Once installed, again just check to see its version by typing gulp -v in command line.
This install command uses Node Package Manager (npm) to install Gulp on your system. The -g flag in this command tells npm to install Gulp in global directory allowing you to use the gulp command anywhere and in every project later.
3. Define folder structure
Define a proper folder structure. Here we will assume we have below structure in our working directory.
Suppose you have your HTML site ready, a root folder is "projects", point to this directory in CLI (command line interface). Inside "projects" we have "dev" folder where we have all development files. "depl" folder will store all deployed files. So the final output will be rendered from here.
4. Drive to your working directoryFrom within this directory, run this command npm init. So we are initiating nmp in this "projects" folder. The output should be like below. It renders project name, version and so on, don't worry much about these just hit enter unless you reach the last line as shown in below image.
This process creates package.json file in the same folder. It stores information about the project, like the dev dependencies. In below screen, see 'devDependencies' which indicates it requires gulp.
Once package.json file is crated in your working directory, install gulp for this directory by using following command.
npm install gulp --save-dev
So first time we installed gulp globally and this time locally, just for "projects" directory. When the command has executed, you can see "node_modules" folder created in the "projects" directory created by Gulp. Notice that "node_modules" folder in first screen. Inside "node_modules", you should find another folder called "gulp".
Other two files created are "gulp.env" and "gulp.config" in the root folder.
Almost done! We are all set up to start working with gulp now.
5. Create gulpfile.js and your first taskThis is a configuration file which should lie in the root of your project folder. A basic gulp file looks like this:
You can create this in any editor like a JavaScript file or from CLI type "touch gulpfile.js". This gulpfile wont do anything because we need to write tasks in it yet.
The first task would be:
var gulp = require('gulp');
The require statement tells Node to look into the "node_modules" folder for gulp package. Once the gulp package is located, it assigns its contents to the variable gulp.
We can now begin to write a gulp task with this gulp variable. Lets create a simple task to test. As you might noticed in above screenshot, it has a basic task as,
gulp.task('hello', function() {
console.log('Hello world!');
});
gulp.task – defines a new task with a name. In above case "hello" is a [task-name].
Now run this task in command line to execute. Write gulp hello in terminal. It should return a log that says Hello world!
Gulp provides other additional gulp methods like we used gulp.task above which we may learn in future posts.
Thus we're set up with our first gulp task. Real tasks will be more complex than this though.
A real job starts after all these setup where you need to create some gulp tasks which will automatically preprocess your saas files for example or any other task which you want to automate in development process. The more complex part of gulp, its tasks, and about other files in the root directory will be explained in future posts soon.
