gulp-terser-js

A Terser-js plugin for Gulp

Why choose terser?

uglify-es is no longer maintained and uglify-js does not support ES6+.

terser is a fork of uglify-es that retains API and CLI compatibility with uglify-es and uglify-js@3. Source:Why choose terser?

Why choose gulp-terser-js

This plugin displays formatted error:

Installation

npm install gulp-terser-js

Basic Usage

1const terser = require('gulp-terser-js')
2
3const minifyJS = () =>
4  gulp.src('asset/js/*.js')
5    .pipe(terser({
6       mangle: {
7         toplevel: true
8       }
9    }))
10    .on('error', function (error) {
11      this.emit('end')
12    })
13    .pipe(gulp.dest('public/js/'))
14
15
16gulp.task('minifyJS', minifyJS)

Options

The options you can use can be found here.

Avanced Usage

1const gulp = require('gulp')
2const concat = require('gulp-concat')
3const sourcemaps = require('gulp-sourcemaps')
4const terser = require('gulp-terser-js')
5
6const sourceMapOpt = {
7  sourceMappingURL: (file) => 'http://127.0.0.1/map/' + file.relative + '.map'
8}
9const mapsFolder = './public/map'
10
11const minifyJS = () =>  
12  gulp.src('./asset/js/*.js')
13    .pipe(gulp.dest(mapsFolder))
14    .pipe(sourcemaps.init())
15    .pipe(concat('script.js'))
16    .pipe(terser({
17      mangle: {
18        toplevel: true
19      }
20    }))
21    .on('error', function (error) {
22      if (error.plugin !== "gulp-terser-js") {
23        console.log(error.message)
24      }
25      this.emit('end')
26    })
27    .pipe(sourcemaps.write(mapsFolder, sourceMapOpt))
28    .pipe(gulp.dest('./public/js/'))
29
30gulp.task('minifyJS', minifyJS)

Source maps

When running Terser on compiled Javascript, you may run into issues with source maps. If you need to pass the content of your source maps to Terser, first you must set the loadMaps option to true when initializing gulp-sourcemaps. Next, make the content source map option true when piping Terser.

A basic setup may look like this:

1gulp.src('asset/js/*.js')
2  .pipe(sourcemaps.init({ loadMaps: true }))
3  .pipe(terser({
4     sourceMap: {
5       content: true
6     }
7  }))
8  .pipe(sourcemaps.write())
9  .pipe(gulp.dest('dist'))

Can I use terser to format error of an other gulp module ?

1// ... 
2const less = require('gulp-less');
3
4const generateCSS = () =>  
5  gulp.src("./asset/css/*.less", srcOptions)
6    .pipe(less()).on("error", printLESSError)
7    .pipe(postcss([cssnano]))
8    .pipe(sourcemaps.write(path.relative(srcOptions.cwd, mapsFolder), sourceMapOpt))
9    .pipe(gulp.dest(outputBuildFolder))
10
11function printLESSError(error) {
12  if (error.plugin === "gulp-less") {
13    terser.printError.call(this, {
14      name: error.type,
15      line: error.line,
16      col: error.column,
17      filePath: error.filename,
18      fileContent: '' + fs.readFileSync(error.filename),
19      message: (error.message || '').replace(error.filename, path.basename(error.filename)).split(' in file')[0],
20      plugin: error.plugin
21    })
22  } else {
23    console.log(error.message);
24  }
25  this.emit('end')
26}

Version

Description	gulp-terser-js
Node Version	>= 8.10.0
Terser Version	4.1.4+
Gulp Version	>= 4.X