EDUCBA Logo

EDUCBA

MENUMENU
  • Explore
    • EDUCBA Pro
    • PRO Bundles
    • Featured Skills
    • New & Trending
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Log in
  • Sign Up
Home Software Development Software Development Tutorials Web Development Tutorial Gulp Uglify
 

Gulp Uglify

Updated April 3, 2023

Gulp Uglify

 

 

Definition of Gulp Uglify

Basically, gulp is used to automate developer tasks as per their requirement, gulp provides the different types of features to the developer. In that, uglify is one of the features provided by the gulp. Basically uglify is used to avoid the error event if it is not able to minify our file. Mainly in modern web development many times we need to run repetitive tasks on our local server, so during the development phase many errors may occur at that time we need to avoid that error or we can say emit that error during the execution. The gulp uglify provides such a feature to the developer.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

What is Gulp Uglify?

gulp uglify transmits a ‘blunder’ occasion in the event that minifying a particular file can’t. The Gulp Uglify Error constructor is sent out by this module for instance of checks. It contains the accompanying properties: fileName The full document way for the record being minified.

The assignment peruses all JavaScript documents in the js registry (comparative with the gulpfile.js record), executes the uglify work on them (uglifying/minifying the code), and afterward places them in a form catalog (making it in the event that it doesn’t exist). Present-day web advancement has numerous redundant undertakings like running a nearby server, minifying code, streamlining pictures, preprocessing CSS, and then some. This text talks about gulp, a forming device for mechanizing these assignments.

Gulp is a cross-stage, streaming undertaking sprinter that allows designers to robotize numerous improvement assignments. At an undeniable level, gulp peruses documents as streams and lines the streams to various errands. These assignments are code-based and use modules. The assignments adjust the documents, building source records into creation documents. To find out about what gulp can do actually take a look at the rundown of gulp plans on GitHub.

Gulp Uglify Installation

Now let’s see how we can install gulp uglify as follows. First, we need to install node.js on our machine by using the below command.

node -v

Explanation

By using the above command, we can see the installed version of Node.js, after execution we can see the result in the following command as follows.

k

In the command line prompt, enter the accompanying order to show the variant of npm (Node.js bundle chief) which is utilized to introduce modules. It will show the introduced Node.js form. By using the below command.

npm -v

Explanation

After execution of the above command, we can see the currently installed version of npm on our machine as shown in the below screenshot.

npm

Now we successfully installed the Node.js, now we need to install the gulp by using the following command as follows.

npm install gulp -g

Explanation

In the above command, we use g for a flag that ensures gulp is globally available for all projects. After entering the above command we get the following screen as shown in the below screenshot.

npm 1

For verification of gulp, we need to run the following command as follows.

gulp –v

Explanation

After execution of the above command, we get the currently installed version of a gulp as shown in the below screenshot.

gulp 4

Now we need to add a package with the help of npm to install uglify by using the following command as follows.

npm install --save-dev gulp-uglify

Explanation

After execution of the above command, we get the following result as shown below screenshot.

nd

After that we need to create gulpfile.js and add the following code as follows.

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pipeline = require('readable-stream').pipeline;
gulp.task('compress', function () {
return pipeline(
gulp.src('lib/*.js'),
uglify(),
gulp.dest('dist')
);
});

Explanation

In the above we can see we use different features of gulp such as gulp.src() and gulp.dest() as shown, as well we also include the pipeline to handle error properly as per our requirement.

Now let’s see what the error is as follows.

Gulp uglify emanates a ‘mistake’ occasion in the event that minifying a particular file can’t. The Gulp Uglify Error constructor is sent out by this module for instance of checks. It contains the accompanying properties:

Name of the file: The full document way for the record being minified.

Reason: The first Uglify JS blunder, if accessible.

The common error message contains the following properties as follows.

  1. First message or we have msg
  2. Name of the file that contains the error
  3. Line

Now let’s see an example for better understanding as follows.

var gulp = require('gulp'),htm_lclean = require('gulp-htmlclean'),uglify = require('gulp-uglify');
var path = {
source: 'C:Gulp/Demo',
build: 'build/'
};
gulp.task('html', function() {
var result = path.build + 'html/';
return gulp.src(source.source + 'html/*/*')
.pipe(html_clean())
.pipe(gulp.dest(out));
});
gulp.task('js',['html'], function() {
return gulp.souce(path.source + 'js/*/*')
.pipe(uglify())
.pipe(gulp.dest(path.build + 'js/'));

Explanation

In the above example, we try to implement the uglify as shown, here we try to clean the html file by using the uglify function. Here we first send the path of the HTML file to process with uglify function as shown, here we use the pipeline concept to show errors in the proper format that we want. At the end of the program, we also need to send the destination path to build the js. For the execution of the above code, we need to use the following command as follows.

gulp is

After execution of the above command, the following result is shown below screenshot as follows.

gulp 5

gulp uglify Options

Now let’s see an option in uglify as follows.

The greater part of the minify choices from the UglifyJ API is upheld. In option, we have different types of cases.

The sourceMap choice should not be set, as it will be naturally designed in view of your Gulp arrangement. See the documentation for Gulp sourcemaps.

Basically, uglify provides the different options as follows.

Annotations: it is used to provide the comment annotation, used to external tools.

Compress: It is used to provide the custom object.

ie: it enables internet explorer bugs.

It also provides different options such as Keep_fargs, keep_fnames, mangle, nameCache, etc.

Conclusion

With the help of the above article, we try to learn about Gulp uglify. From this article, we learn basic things about Gulp uglify and we also see the integration of the Gulp uglify and how we use it in the Gulp uglify.

Recommended Articles

We hope that this EDUCBA information on “Gulp Uglify” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. Gulp vs Webpack
  2. Gulp vs Grunt
  3. Full Stack Technologies
  4. Angular Material Version

Primary Sidebar

Footer

Follow us!
  • EDUCBA FacebookEDUCBA TwitterEDUCBA LinkedINEDUCBA Instagram
  • EDUCBA YoutubeEDUCBA CourseraEDUCBA Udemy
APPS
EDUCBA Android AppEDUCBA iOS App
Blog
  • Blog
  • Free Tutorials
  • About us
  • Contact us
  • Log in
Courses
  • Enterprise Solutions
  • Free Courses
  • Explore Programs
  • All Courses
  • All in One Bundles
  • Sign up
Email
  • [email protected]

ISO 10004:2018 & ISO 9001:2015 Certified

© 2025 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

🚀 Limited Time Offer! - ENROLL NOW