CODEWITHSUNDEEP
reactjsgulp-4
KD.S.T.
KD.S.T.

Reputation: 603

How to compile and bundle react 16.9 using gulp 4.0.1?

I have an existing project, I used React 16.9. Now, I want to implement Gulp 4.0.1 to build it in the server. I am running in windows 10.

In my components, I am using import form

I tried using this gulpfile.js, its very simple.

var gulp = require('gulp'),
  browserify = require('browserify'),
  source = require('vinyl-source-stream'),
  buffer = require('vinyl-buffer');

var BUILD_DIR = 'buildtest/';

function compile() {
  var bundler = browserify('src/index.js');

  return bundler
    .transform('babelify', { presets: ['es2015', 'react'] })
    .bundle()
    .pipe(source('index.js'))
    .pipe(buffer())
    .pipe(gulp.dest(BUILD_DIR));
}

gulp.task('build:js', function() {
  return compile();
})

gulp.task('build', ['build:js'])

Now by running the gulp command it gives me this error:

λ gulp
assert.js:350
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (D:\myprojectfolderpath\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (D:\myprojectfolderpath\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (D:\myprojectfolderpath\gulpfile.js:84:6)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

Upvotes: 0

Views: 860

Answers (1)

Enrico
Enrico

Reputation: 11

According to the gulp's task Documentation gulp.task([taskName], taskFunction) second argument the 'taskFunction' needs to use either a gulp.series() or gulp.parallel.

Before 4.0 it was possible to define the task as you did, but this changed in 4.0.

Changing your gulp.task('build', ['build:js']) into gulp.task('build', gulp.series('build:js')) should fix the issue.

Upvotes: 0

Related Questions