Gulp Tutorial With Ready Quick Pack

Published in

Oceanize Lab Geeks

4 min readMay 23, 2019

Gulp is a task runner that uses Node.js as a platform. Gulp purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. It builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. These tasks can be run using Shell or Bash scripts on the command line.

These days, using a build tool is an indispensable part of your web development workflow. Gulp is one of the most popular build tools these days (along with Webpack).

Why to use Gulp?

It is shorter, simpler and faster as compared to other task runner.
Uses SASS and LESS as CSS preprocessor.
Automatically refreshes page after editing the source files.
Easy to understand and build the Gulpfile.js because, it uses pure JavaScript code to build the task.
Optimize Image
Optimizing CSS and JavaScript
Cleaning Unwanted Files

Gulp — Installation

Install Node.js and npm to your computer.
Install Gulp and other packages needed for your project.
Configure your gulpfile.js file to run the tasks you want.
Let your computer do your work for you! 🙂

Don’t worry if you don’t totally understand all the terms above. I’ll explain everything one step at a time.

Now let’s get started!

Download Node.js

The official Node.js website has installation instructions for Node.js: https://nodejs.org

After complete Node.js installation

Check for node, npm, and npx

node — version

Install the gulp command line utility

Now our scented steps is install Gulp.js package install -

npm install — global gulp-cli

Create a project directory and navigate into it

npx mkdirp my-project

cd my-project

Create a package.json file in your project directory

npm init

This will guide you through giving your project a name, version, description, etc.

Install the gulp package in your devDependencies

npm install — save-dev gulp

Verify your gulp versions

gulp — version

Create a gulpfile

Using your text editor, create a file named gulpfile.js in your project root with these contents:

Test it

Run the gulp command in your project directory:

gulp

To run multiple tasks, you can use gulp <task> <othertask>.

Result

The default task will run and do nothing.

Others Packages needed for Gulp

Initially we wanted to use Gulp to run tasks

Now we’ll be using the following packages:

gulp-sass — compiles your Sass files into CSS
gulp-cssnano — minifies your CSS files
gulp-concat — concatenates (combines) multiple JS files into one large file
gulp-uglify — minifies your JS files

Just like before, install each package by typing these lines one by one. You’ll have to wait a few seconds while each one installs before going on to the next line.

npm install gulp-sass
npm install gulp-cssnano
npm install gulp-concat
npm install gulp-uglify

Configure your Gulpfile

Initialize packages

In order to take advantage of all the features of the npm packages you added to your project, you need to export them as modules in Node. (Hence the folder name “node_modules”)

At the top of your Gulpfile, add the modules like this:

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

Create your Gulp tasks

Creating a Gulp task is done by using the following code:

gulp.task('[Function Name]', function(){
   // Do stuff here
}

Some of the main functions that we’ll be using are:

.task() — Creates a task, as mentioned above
.src() — identifies what files you will be compiling in a particular task
.pipe() — adds a function to the Node stream that Gulp is using; you can pipe multiple functions in the same task (read an excellent write-up on this topic on florian.ec)
.dest() — writes the resulting file to a specific location
.watch() — identifies the files to detect any changes on

Sass task

Here’s the code for all that:

gulp.task('sass', function(){
   return gulp.src('app/style.scss')
      .pipe(sass())
      .pipe(cssnano())
      .pipe(gulp.dest('dist/css'));
});

To test, I just put in some filler SCSS in the style.scss file:

div {
    display: block;

    &.content {
        position: relative;
    }
}

.red {
    color: red;
}

You can run each individual Gulp task on the command line if you type gulp and the name of the task. So to test the Sass task, I typed in gulp sass to check if it works without errors, and generates the minified dist/style.css file.

If everything works correctly, you should see messaging like this in your command line: