Learning Gulp Js - Task Runner
Tags: gulp, javascript, automation
Published: 2020-07-20 23:31:52

<h2>Gulp Overview</h2>

<h3>What is Gulp?</h3>

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

<h3>Common Tasks</h3>

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

<h3>Environment</h3>
1) Install <a href="https://nodejs.org/en/download/">Node.js</a>. 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 <b>gulpfile.js</b> file. This is where we tell Gulp what to do.

<h3>Task Example</h3>

In order to utilize Gulp, we need to define it in our gulpfile.js. 
``` javascript 
const gulp = require('gulp');
```
<h4>Top Level Functions</h4>
``` javascript 
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
```
<h4>Example Task</h4>
``` javascript 
gulp.task("message", async function () {
  return console.log("Gulp is running");
});
```
Run "gulp message" to see the output:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/26kihu8c2ob2d0finmmi.png)

<b>Note:</b> 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.

<h3>Task #1 - Copy Files</h3>
This task will copy html files from our <b>src</b> folder into our <b>public</b> folder.

1) Create an <b>src</b> folder 
2) Create an <b>Index.html</b> file within the <b>src</b> folder.

``` html
<!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 <b>About.html</b> file within the <b>src</b> folder.
``` html
<!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. 
``` javascript
gulp.task("copyHtml", async function () {
  gulp.src("src/*.html").pipe(gulp.dest("public"));
});
```
4) Run "gulp copyHtml"

<b>Output:</b>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lwc2kqmgyxy096srxe5e.png)

The <b>public</b> folder was automatically generated with the two html files copied over.

<h3>Task #2 - Optimize Images</h3>
This task will optimize our images by using the popular <a href="https://www.npmjs.com/package/gulp-imagemin">gulp-imagemin</a> plugin.

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

2) Define imagemin in <b>gulpfile.js</b>
``` javascript
const imagemin = require('gulp-imagemin');
```

3) Create an <b>images</b> folder within the <b>src</b> folder (include image files).

4) Create task in gulpfile.js.
``` javascript
gulp.task('imageMin', () =>
	gulp.src('src/images/*')
		.pipe(imagemin())
		.pipe(gulp.dest('public/images'))
);
```

5) Run "gulp imageMin"

<B>Before:</b>
<i>src/images/elphant.jpg = 245kb</i>

<B>After:</b>
<i>public/images/elphant.jpg = 203kb</i>

<b>Note:</b> If you'd like to modify the compression settings, check out the additional functions <a href="https://www.npmjs.com/package/gulp-imagemin">here</a>.


<h3>Task #3 - Minify Javascript</h3>

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

2) Define uglify in <b>gulpfile.js</b>
``` javascript
const uglify = require('gulp-uglify');
```

3) Create <b>js</b> folder inside our <b>src</b> folder.

4) Add javascript file inside our <b>js</b> folder. i.e. <b>functions.js</b> and <b>functions2.js</b>.

``` javascript
// function.js

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

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

``` javascript
// 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.
``` javascript
gulp.task('minify', function(){
  gulp.src('src/js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('public/js'));
});
```
6) Run "gulp minify"

<b>Output:</b>
<i>public/js/function.js</i>
``` javascript
console.log("This is part 1"),console.log("This is part 2");
```
<i>public/js/function2.js</i>
``` javascript
console.log("This is part 3"),console.log("This is part 4");
```
Both javascript files in our <b>src</b> folder were successfully minified and added into our <b>public</b> folder.

<h3>Conclusion</h3>
These basic functions should give you an idea for some of the type of tasks that we can accomplish with Gulp. Check out <a href="https://www.mikestreety.co.uk/blog/advanced-gulp-file">this article</a> by Mike Street for more advanced gulp tasks.