Gulp Task For JavaScript Minification -Tutorial Savvy

In my previous post we have developed a task to convert SCSS files to CSS using gulp-sass plugin.
In this Demo, “We will learn to create a Gulp task for minifying javascript file using gulp-uglify plugin”.
The gulp-uglify plugin is based on UglifyJS2 library.UglifyJS is a JavaScript parser, minifier, compressor or beautifier toolkit.
The gulp-uglify plugin can be installed using npm install gulp-uglify –save-dev command.The following screenshot shows the terminal with gulp-uglify plugin execution.

To demonstrate gulp-uglify task we have created project named FlowerListDemo.The index.html file contains HTML markup of flower list and 2 buttons. The dev/app.js file contains the javascript code which attaches a click event listener to the 2 buttons to show and hide the flower names. The dist/app.js file is the minified version of dev/app.js generated by the gulp task.The following screenshot shows the directory structure of FlowerListDemo project.

The gulpfile.js contains the code for gulp task.The three different tasks are uglifyTask, uglifyWatchTask and default.The uglifyTask takes all the javascript file present in the dev directory and generates the minfied version of these javascript file and saves in dist directory.The code contains of gulpfile.js file are as follows.

var gulp = require('gulp'),
    gulpUglify = require('gulp-uglify');

gulp.task('uglifyTask', function() {
    return gulp.src('./dev/*.js')
        .pipe(gulpUglify())
        .pipe(gulp.dest('dist'));
})

gulp.task('uglifyWatchTask', function () {
    gulp.watch('./dev/*.js', ['uglifyTask']);
});

gulp.task('default',['uglifyTask','uglifyWatchTask']);

The code content of dev/app.js file are as follows.

(function(){
    var showButton = document.getElementById("showButton"),
        hideButton = document.getElementById("hideButton"),
        flowerContainer = document.getElementById("flowerContainer");
    showButton.addEventListener('click',function(){
        flowerContainer.style.display = "block";
    });
    hideButton.addEventListener('click',function(){
        flowerContainer.style.display = "none";
    })
})();

The code content of index.html file are as follows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gulp JavaScript Minification Task</title>
</head>
<body>
    <button id="hideButton">Hide Flower names</button>
    <button id="showButton">Show Flower names</button>
    <div id="flowerContainer">
        <h1>Flower List</h1>
        <ol>
            <li>Flower</li>
            <li>Rose</li>
            <li>Lily</li>
            <li>Lotus</li>
        </ol>
    </div>
</body>
<script src="dist/app.js"></script>
</html>

The Gulp task can be run using gulp uglifyTask command or simply gulp command or gulp uglifyWatchTask command.The following screenshot shows the gup task in execution.

The code content of generate dist/app.js file are as follows.

!function(){var e=document.getElementById("showButton"),t=document.getElementById("hideButton"),n=document.getElementById("flowerContainer");e.addEventListener("click",function(){n.style.display="block"}),t.addEventListener("click",function(){n.style.display="none"})}();