DEV Community

Cover image for Learning Gulp Js - Task Runner
aryaziai
aryaziai

Posted on

4 2

Learning Gulp Js - Task Runner

Gulp Overview

What is Gulp?

  • Open source Javascript task runner
  • Bult on Node.js and NPM
  • Used for repetitive tasks
  • Variety of plugins for different tasks

Common Tasks

  • Concatenation
  • Minification of scripts and styles
  • Cache busting
  • Testing

Environment

1) Install Node.js. If you're unsure whether you have Node on your system, simply type "node" into the command-line.

2) Create an empty directory and CD into it.

3) Run "npm init" to create package.json (application metadata).

4) Run "npm install --save-dev gulp" to save Gulp as a development dependancy.

5) Create a gulpfile.js file. This is where we tell Gulp what to do.

Task Example

In order to utilize Gulp, we need to define it in our gulpfile.js.

const gulp = require('gulp');

Top Level Functions

gulp.task // Define tasks 
gulp.src // Points to files to use
gulp.dest // Points to folder to output
gulp.watch // Watch files and folders for changes

Example Task

gulp.task("message", async function () {
  return console.log("Gulp is running");
});

Run "gulp message" to see the output:

Alt Text

Note: Make sure to prepend "async" in front of your function. Gulp 4.x is very strict with asynchronous Javascript.

Now that you are getting the hang of it, let's create more advanced tasks.

Task #1 - Copy Files

This task will copy html files from our src folder into our public folder.

1) Create an src folder
2) Create an Index.html file within the src folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example App</title>
</head>
<body>
    <h1>Example App</h1>
</body>
</html>

2) Create an About.html file within the src folder.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example App</title>
  </head>
  <body>
    <h1>About Us</h1>
  </body>
</html>

3) Create task in gulpfile.js.

gulp.task("copyHtml", async function () {
  gulp.src("src/*.html").pipe(gulp.dest("public"));
});

4) Run "gulp copyHtml"

Output:
Alt Text

The public folder was automatically generated with the two html files copied over.

Task #2 - Optimize Images

This task will optimize our images by using the popular gulp-imagemin plugin.

1) Run "npm install --save-dev gulp-imagemin" to save as a dev dependency.

2) Define imagemin in gulpfile.js

const imagemin = require('gulp-imagemin');

3) Create an images folder within the src folder (include image files).

4) Create task in gulpfile.js.

gulp.task('imageMin', () =>
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('public/images'))
);

5) Run "gulp imageMin"

Before:
src/images/elphant.jpg = 245kb

After:
public/images/elphant.jpg = 203kb

Note: If you'd like to modify the compression settings, check out the additional functions here.

Task #3 - Minify Javascript

1) Run "npm install --save-dev gulp-uglify" to save as a dev dependency.

2) Define uglify in gulpfile.js

const uglify = require('gulp-uglify');

3) Create js folder inside our src folder.

4) Add javascript file inside our js folder. i.e. functions.js and functions2.js.

// function.js

// Console Log #1
console.log('This is part 1');

// Console Log #2
console.log('This is part 2');
// function2.js

// Console Log #3
console.log('This is part 3');

// Console Log #4
console.log('This is part 4');

5) Create task in gulpfile.js.

gulp.task('minify', function(){
  gulp.src('src/js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('public/js'));
});

6) Run "gulp minify"

Output:
public/js/function.js

console.log("This is part 1"),console.log("This is part 2");

public/js/function2.js

console.log("This is part 3"),console.log("This is part 4");

Both javascript files in our src folder were successfully minified and added into our public folder.

Conclusion

These basic functions should give you an idea for some of the type of tasks that we can accomplish with Gulp. Check out this article by Mike Street for more advanced gulp tasks.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay