Search code examples
javascriptgulpbrowserify

simple setup with gulp - browserify - browsersync: required is not defined


I have this gulp code that works fine with browser-sync and the gulp sass compiler, I've tried to insert a browserify task but seems doesn't work, it works if I type on the command line:

browserify src/js/main.js -o src/js/bundle/bundle.js

this is my project structure:

|-project
|--/src
|---/css
|----style.css
|---/js
|----main.js
|----/bundle
|-----bundle.js
|---/scss
|----_bootstrap.scss
|----style.scss
|---/assets
|----/img
|---index.html
|--gulpfile.js
|--package.json

and this is my gulp file:

const gulp        = require('gulp');
const browserSync = require('browser-sync').create();
const sass        = require('gulp-sass');
const browserify  = require('browserify');

gulp.task('sass', () => {
    return gulp.src("./src/scss/*.scss")
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest("./src/css"))
        .pipe(browserSync.stream());
});

gulp.task('js',()=>{
  return gulp.src('./src/js/main.js')
  .pipe(browserify())
  .pipe(gulp.dest('./src/js/bundle'))
});





gulp.task('serve', ()=> {

    browserSync.init({
        injectChanges: true,
        server: "./src"
    });

    gulp.watch("./src/scss/*.scss", gulp.series('sass'));
    gulp.watch("./src/js/*.js", gulp.series('js'));
    gulp.watch("./src/*.html").on('change', browserSync.reload);
});




gulp.task('default', gulp.series('serve','sass','js'));

I have recently added the 'js' task but when I type gulp in the command line everything works fine except for the browserify task. as a test the main.js file looks like this:

const jquery = require('../../node_modules/jquery')
console.log(jquery)

and I still get the error 'required is not defined'. there is something i missed out. Many thanks


Solution

  • ok, finally works (seems...) it was not a problem with browserify but with the new version of gulp, instead of:

    gulp.task('default', gulp.series('serve','sass','js'));
    

    I have had to do:

    gulp.task('default', gulp.parallel('serve','sass','js'));
    

    before the sass and js task didn't start, now with parallel function seems works