1. gulp-terser
gulp plugin, compressed es6+ code.
gulp-terser
Package: gulp-terser
Created by: duan602728596
Last modified: Wed, 04 May 2022 12:51:33 GMT
Version: 2.1.0
License: MIT
Downloads: 303,390
Repository: https://github.com/duan602728596/gulp-terser

Install

npm install gulp-terser
yarn add gulp-terser

gulp-terser

Gulp plugin, compressed es6+ code.

Install

$ npm install gulp-terser --save-dev

or

$ yarn add gulp-terser --dev

How to use

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

function es(){
  return gulp.src('./src/index.js')
    .pipe(terser())
    .pipe(gulp.dest('./build'));
}

exports.default = es;

Options

Terser configuration can be viewed https://github.com/terser-js/terser#minify-options.

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

function es(){
  return gulp.src('./src/index.js')
    .pipe(terser({
      keep_fnames: true,
      mangle: false
    }))
    .pipe(gulp.dest('./build'));
}

exports.default = es;

Use a 3rd-party version of minifier

 const gulp = require('gulp');
const terser = require('terser');
const gulpTerser = require('gulp-terser');

function es(){
  return gulp.src('./src/index.js')
    .pipe(gulpTerser({}, terser.minify))
    .pipe(gulp.dest('./build'));
}

exports.default = es;

Use sourcemaps

You can use sourcemaps like this:

 const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const terser = require('gulp-terser');

function es(){
  return gulp.src('./src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(terser())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./build'));
}

exports.default = es;

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin