EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials Web Development Tutorial Gulp Uglify
Secondary Sidebar
Web Development Tutorial
  • Basics
    • App Development Tool
    • Career In Web Development
    • Python and Django for Web Development
    • 10 Web Development Tools
    • Web Design and Development
    • Web Development Frameworks
    • Web Development Interview Questions
    • Web Development Software
    • Web Analytics Tools
    • What is Software Development
    • Drupal Web Development
    • What is Methodology
    • Website Design Layout
    • Web Designing Software for beginners
    • Web Design Tools
    • Graphic Designer Assistant
    • Online Website Builder (Guide)
    • Best Web Analytics Tools
    • Free Web Page Designing Software
    • Website Services
    • Web Designing Tools
    • Website Developer Tools and Resources
    • Web Page Design Layout
    • Features of Effective Web Designer Portfolio
    • Types of Portfolio
    • Website Architecture Diagramming Tools
    • About Before Launching your Website
    • 5 Website Setup Mistakes
    • Best Web Design Trends
    • Web Performance Testing
    • What is Back End Developer
    • What is Front End Developer
    • Errors In Website
    • Web Analytics Tools to Work for You (Guide)
    • Web Design Interview Questions
    • Weblogic Interview Questions
    • Web Technology Interview Questions
    • What is Web Application
    • Full-Stack Web Developer
    • What is UI Designer
    • Ubuntu Command
    • WoeUSB Ubuntu
    • Uses Of WordPress
    • WordPress Website
    • WordPress Work
    • What is WIX
    • Flutter Applications
    • Application Architecture
    • Application Monitoring Tools
    • Flutter Version
    • Flutter Widgets
    • What is WWW?
    • What is Windows?
    • What is Chatbot?
    • Chatbot Software
    • What is Website?
    • Application layer attacks
    • Chatbot Uses
    • Google Development Tools
    • SharePoint Version
    • WWW Architecture
    • Autodesk Careers
    • SSIS Conditional Split
    • Gulp Install
    • Gulp Uglify
    • Gulp Command
    • MVVM Design Pattern
    • Web Development Professional
    • Web Application Security
    • WordPress eCommerce

Related Courses

Software Development Course Training

Java Web Services Training Course

Python Training Course

Gulp Uglify

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.

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,754 ratings)

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

This is a guide to Gulp Uglify. Here we discuss the Definition, What is Gulp Uglify, Gulp Uglify Installation, and examples with code implementation. You may also have a look at the following articles to learn more –

  1. Gulp vs Webpack
  2. Gulp vs Grunt
  3. Full Stack Technologies
  4. Angular Material Version
Popular Course in this category
All in One Software Development Bundle (600+ Courses, 50+ projects)
  600+ Online Courses |  3000+ Hours |  Verifiable Certificates |  Lifetime Access
4.6
Price

View Course

Related Courses

JWS Java Web Services Training (4 Courses, 11 Projects)4.9
Python Certifications Training Program (40 Courses, 13+ Projects)4.8
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

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

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

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

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

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

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

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

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more