0

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

Giacomo Ciampoli
  • 821
  • 3
  • 16
  • 33
  • Possible duplicate of [Client on node: Uncaught ReferenceError: require is not defined](https://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined) – tao Jan 28 '18 at 20:25
  • I don't think so, the OP of the post you linked didn't know that he has to use tools like browserify to make the things works, I did.. my problem is to make browserify works fine with gulp, so please.... – Giacomo Ciampoli Jan 28 '18 at 20:30
  • What scripts are you including in your `index.html` and in what order? – tao Jan 28 '18 at 20:32
  • for now just one: – Giacomo Ciampoli Jan 28 '18 at 20:32
  • does [this](https://stackoverflow.com/questions/28696511/require-is-not-defined-error-with-browserify) help? (see second answer). – tao Jan 28 '18 at 20:33
  • I've answered to my on question because now typing 'gulp js' browserify works, but i cannot yet make it work with browser-sync.... this is the new configuration with vynil-source-stream: const source = require('vinyl-source-stream'); .. gulp.task('js',()=>{ return browserify({ entries: ['./src/js/main.js'] }) .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('./src/js/bundle')) }); – Giacomo Ciampoli Jan 28 '18 at 21:12
  • I'm doing it... and also there is no problem with browserify, if I do gulp js things works, there is a problem with gulp.series: the task that is running for now is only the serve task – Giacomo Ciampoli Jan 28 '18 at 21:37

1 Answers1

0

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

Giacomo Ciampoli
  • 821
  • 3
  • 16
  • 33