Tips for sending data to uglify-js-harmony with gulp

Question

Tips for sending data to uglify-js-harmony with gulp

I'm looking to minimize some JavaScript code that includes classes, but unfortunately, the current version of gulp-uglify doesn't support this feature as discussed in this thread.

I followed the advice given previously and installed

npm install uglify-js-harmony --save-dev

, but as a beginner in front-end development, I'm unsure how to pass my source through it like I could with gulp-uglify.

Here's what I have so far:

var uglify = require('uglify-js-harmony');

// ...

gulp.task('scripts', function(){
    return gulp.src(bower().concat(jsFiles))            
        .pipe(plumber())
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(dest + 'js'))
        .pipe(reload({stream:true}))
});

However, I keep getting an error message saying

[17:42:40] TypeError: uglify is not a function

, and I'm stuck on how to proceed. Any guidance would be appreciated. Thank you.

javascript gulp ecmascript-6 gulp-uglify

Answer 1

Answer №1

To simplify the process, consider using standard gulp-babel with gulp-uglify. .

$ npm install --save-dev gulp-uglify gulp-babel babel-preset-es2015

Next . . .

var uglify = require('gulp-uglify'),
    babel  = require('gulp-babel');


// ...

gulp.task('scripts', function(){
    return gulp.src(//... src stuff
        .pipe(babel({ presets: ['es2015']}))
        .pipe(uglify()))
        //... other stuff
});

Answer 2

To simplify the process, consider using standard gulp-babel with gulp-uglify. .

$ npm install --save-dev gulp-uglify gulp-babel babel-preset-es2015

Next . . .

var uglify = require('gulp-uglify'),
    babel  = require('gulp-babel');


// ...

gulp.task('scripts', function(){
    return gulp.src(//... src stuff
        .pipe(babel({ presets: ['es2015']}))
        .pipe(uglify()))
        //... other stuff
});

Tips for sending data to uglify-js-harmony with gulp

Answer №1

Similar questions

Firestore is failing to accept incoming data when the setDoc method is employed

Combine two objects in javascript while disregarding any values that are undefined

Combining multiple 'Eithers' and 'Promises' in fp-ts: A guide to piping and chaining operations

Executing PHP script within a Node.js socket server program

AngularJS routing creates a conflict with Express routing

Navigating from the Login Page to the Dashboard in Vue.js following successful token validation

Oops! Before proceeding, make sure to call TestBed.initTestEnvironment() first

AngularJS allows for emitting the value from a search button based on the current state of a checkbox

Is it possible for the client to prevent the blocking of the Cross-Origin Resource Sharing (CORS) error?

The SvelteKit server successfully loaded data, displaying it on the sources/index page in the Chrome

Looking to retrieve the text content of an element using jQuery?

How to access a specific element in an array hash with AngularJS using name or

Validating Password Consistency using Javascript

Disable Vue click event based on a condition

What is the best way to send a file to a JavaScript function within Django?

How to Extract a Link from JSON Data in React Native

Exploring the world of shapes and angles in three.js

Illustrate an element positioned beneath a child element within a different element

Utilizing jQuery time intervals within a jQuery click event: A step-by-step guide

Passing a MySQL connection to scripts in Express