Introduction to Gulp-Uglify

Gulp-Uglify is a widely used plugin for Gulp, a task runner for JavaScript developers. It helps in minifying JavaScript files, thereby reducing file size and improving website load times. This guide covers an extensive range of APIs available in gulp-uglify along with practical code examples to help you get started and optimize your workflows efficiently.

Getting Started

To begin using gulp-uglify, you first need to install it via npm:

  
    npm install --save-dev gulp-uglify
  

Next, integrate gulp-uglify into your Gulp setup:

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

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

Useful APIs and Examples

uglify()

The primary method for minifying JavaScript files.

  
    gulp.src('src/js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'));
  

uglify({ mangle })

Control variable name mangling with the mangle option.

  
    gulp.src('src/js/*.js')
      .pipe(uglify({ mangle: false }))
      .pipe(gulp.dest('dist/js'));
  

uglify({ compress })

Customize the compression process.

  
    gulp.src('src/js/*.js')
      .pipe(uglify({ compress: { drop_console: true } }))
      .pipe(gulp.dest('dist/js'));
  

uglify({ output })

Control the output format of the minified code.

  
    gulp.src('src/js/*.js')
      .pipe(uglify({ output: { beautify: true } }))
      .pipe(gulp.dest('dist/js'));
  

Complete App Example

Here is a complete example combining multiple gulp-uglify options:

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

    gulp.task('minify-js', function() {
      return gulp.src('src/js/*.js')
        .pipe(uglify({
          compress: { drop_console: true },
          mangle: true,
          output: { beautify: false }
        }))
        .pipe(gulp.dest('dist/js'));
    });

    gulp.task('default', gulp.series('minify-js'));
  

This setup minifies JavaScript files located in src/js, removes console statements, mangles variable names, and outputs the result to the dist/js directory.

By leveraging gulp-uglify’s various options, you can fine-tune the minification process to suit your specific needs.

Hash: 1e73dfc5748b13c2e417ac440d9281cb9118b54ac5ec8b7b50217a7987afad74