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
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