CODEWITHSUNDEEP
javascriptgulpbabeljsbrowserifybabelify
Luis Lopez
Luis Lopez

Reputation: 1

Problem in gulp.task syntax using browserify + babel

It is my first query in this place, I am learning to program, and I am following a course that is from the year 2016 in which they implement babel gulp browserify sass, but I have a problem trying to do a transform using babel inside a gulp.task. I've done a little research and they mention that the syntax has changed but I couldn't get it to work.

The other tasks I do not put here because they are not necessary, but the syntax is this. I appreciate your help, I know it is simple because I have had to deal with other errors because trying to do an outdated tutorial at the moment is a challenge for me that I do not know JavaScript properly.

In my .js doc I have the following syntax:

const babel = require ('babelify');
const browserify = require ('browserify');

gulp.task ('scripts', function() {
    browserify('./src/index.js')

        Transform(babel)
        .bundle()
        .pipe(source('index.js'))
        .pipe(rename('app.js'))
        .pipe(gulp.dest('public'))
})




gulp.task('default', gulp.series (['styles','assets','scripts']));

The error that shows me in the CMD is this:

[19:00:50] Using gulpfile ~\Documents\JS\coletogram\gulpfile.js
[19:00:50] Starting 'default'...
[19:00:50] Starting 'styles'...
[19:00:50] Finished 'styles' after 192 ms
[19:00:50] Starting 'assets'...
[19:00:50] Finished 'assets' after 47 ms
[19:00:50] Starting 'scripts'...
[19:00:50] 'scripts' errored after 4.38 ms
[19:00:50] TypeError: browserify(...)Transform is not a function

Upvotes: 0

Views: 43

Answers (1)

Geoff
Geoff

Reputation: 578

Try something like:

browserify(
    './src/index.js', 
    {
        transform: [["babelify", { "presets": ["@babel/preset-env"] }]]
    }
).bundle()

Upvotes: 0

Related Questions