1. gulp-uglifyjs
Minify multiple files with UglifyJS.
gulp-uglifyjs
Package: gulp-uglifyjs
Created by: craigjennings11
Last modified: Sat, 18 Jun 2022 18:13:22 GMT
Version: 0.6.2
License: MIT
Downloads: 7,471
Repository: https://github.com/craigjennings11/gulp-uglifyjs

Install

npm install gulp-uglifyjs
yarn add gulp-uglifyjs

gulp-uglifyjs NPM version Build Status

DEPRECATED: This plugin has been blacklisted as it relies on Uglify to concat
the files instead of using gulp-concat, which breaks the "It
should do one thing" paradigm. When I created this plugin, there was no way to
get source maps to work with gulp, however now there is a gulp-sourcemaps
plugin that achieves the same goal. gulp-uglifyjs still works great and gives
very granular control over the Uglify execution, I'm just giving you a heads up
that other options now exist.

Minify multiple JavaScript with UglifyJS2.

This plugin is based off of gulp-uglify but allows you to
directly use all of Uglify's options. The main difference between these two
plugins is that passing in an array of files (or glob pattern that matches
multiple files) will pass that array directly to Uglify. Uglify will handle both
concatenating and minifying those files.

Letting Uglify handle the concatenation and minification allows for the
generated source map to be able to separate the files in the browser for easier
debugging, and it avoids the intermediate step of concat(). Using concat()
and then uglify() would result in a source map for the already concatenated
file which has the possibility of being quite large, making it hard to find the
code you are wanting to debug.

Usage

 var uglify = require('gulp-uglifyjs');

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

This will concatenate and minify all files found by public/js/*.js and write
it to a file with the same name as the first file found.

API

uglify([filename], [options])

  • filename - optional

    Override the default output filename.

  • options - optional

    These options are directly passed to Uglify. Below are some examples of what
    is available. To see a full list, read UglifyJS's documentation

    • outSourceMap

      (default false) Give a string to be the name of the source map. Set to
      true and the source map name will be the same as the output file name
      suffixed with .map.

      Note: if you would like your source map to point to relative paths instead
      of absolute paths (which you probably will if it is hosted on a server), set
      the basePath option to be the base of where the content is served.

    • inSourceMap

      If you're compressing compiled JavaScript and have a source map for it, you
      can use the inSourceMap argument. This can only be used in conjunction with
      outSourceMap.

    • sourceRoot

      Sets the root location for where the source files should be found

    • mangle

      (default {}) Set to false to skip mangling names. See options for possible key/value pairs.

    • output

      (default null) Pass an Object if you wish to specify additional output options.
      The defaults are optimized for best compression.

    • compress

      (default {}) Pass an Object to specify custom compressor options.
      Pass false to skip compression completely.

    • enclose

      (default undefined) Pass an Object to wrap all of the code in a closure
      with a configurable arguments/parameters list. Each key-value pair in the
      enclose object is effectively an argument-parameter pair.

    • wrap

      (default undefined) Pass a String to wrap all of the code in a closure.
      This is an easy way to make sure nothing is leaking. Variables that need to
      be public exports and global are made available. The value of wrap is
      the global variable exports will be available as.

    • exportAll

      (default false) Set to true to make all global functions and variables
      available via the export variable. Only available when using wrap.

Examples

To minify multiple files into a 'app.min.js' and create a source map:

 gulp.task('uglify', function() {
  gulp.src('public/js/*.js')
    .pipe(uglify('app.min.js', {
      outSourceMap: true
    }))
    .pipe(gulp.dest('dist/js'))
});

To minify multiple files from different paths to 'app.js', but skip mangling
and beautify the results:

 gulp.task('uglify', function() {
  gulp.src(['public/js/*.js', 'bower_components/**/*.js'])
    .pipe(uglify('app.js', {
      mangle: false,
      output: {
        beautify: true
      }
    }))
    .pipe(gulp.dest('dist/js'))
});

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code