Gulp – The stream build system – Part 1

While developing any JavaScript project it includes processes such as testing, minification, concatenating files, compiling templates. This is most error prone and tedious task. What if you have a build tool to automate all these repetitive tasks for you. One of such tools is Gulp.

What is Gulp ?

In one word: AUTOMATION.

Gulp is a stream build system which automates common tasks such as:

  1. Compiling your pre-processed CSS.
  2. Minifying JavaScript.
  3. Reloading your browser.
  4. Compile LESS files into CSS.
  5. Refreshing your browser automatically when you save a file.
  6. Optimizes all assets (CSS, JS, fonts, and images) for production

Gulp is publicly available on npm: https://www.npmjs.com/package/gulp and can also be found on Github: https://github.com/gulpjs/gulp.

Installing gulp:
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

You need to have Node.js (Node) installed onto your computer before you can install Gulp.

Install gulp globally:
$ npm install –global gulp

Install gulp in your project devDependencies:
$ npm install –save-dev gulp

Writing your first gulp task:

Step 1:
Create a gulpfile.js at the root level of your project.

Step 2:
Require gulp in your gulpfile.

var gulp = require(‘gulp’);

Step 3:
Write your task with this gulp variable.

gulp.task(‘task-name’, function() {
// Stuff here
});

task-name refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing – gulp task-name

To test this, let’s create a hello task in your gulpfile that says Hello World!

gulp.task(‘hello’, function() {
console.log(‘Hello World!’);
});

Now run this task in the command line with: gulp hello
The command line will print a log that says Hello World!

So any problem as a JavaScript developer during automation? Just GULP it.

6 thoughts on “Gulp – The stream build system – Part 1

  1. Hi.. thank you. You cannot use gulp without node because gulp is a node.js based task runner. It is a package of node and hence needs node to execute it. I hope this solves your confusion.

    Liked by 1 person

Leave a Reply to digitechnotes Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s