0

I upgraded from Gulp 3.9.1 to Gulp. 4.0.1 and now when I run it I see "Starting 'default'..." and nothing else happens. Here's the end of my gulpfile:

gulp.task('default', function() {
  gulp.watch('app/styles/**/*.scss', gulp.series('sass')),
  gulp.watch('app/*.html', gulp.series('browserSync')),
  gulp.watch('app/js/**/*.js', gulp.series('browserSync'));
  return
});

// Optimization Tasks 
// ------------------

// Optimizing CSS and JavaScript 
gulp.task('useref', function() {

  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'));
});

// Optimizing Images 
gulp.task('images', function() {
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
    // Caching images that ran through imagemin
    .pipe(cache(imagemin({
      interlaced: true,
    })))
    .pipe(gulp.dest('dist/images'))
});

// Copying fonts 
gulp.task('fonts', function() {
  return gulp.src('app/fonts/**/*')
    .pipe(gulp.dest('dist/fonts'))
})

// Cleaning 
gulp.task('clean', function() {
  return del.sync('dist').then(function(cb) {
    return cache.clearAll(cb);
  });
})

gulp.task('clean:dist', function() {
  return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});

// Build Sequences
// ---------------

gulp.task('build', function(callback) {
  runSequence(
    'clean:dist',
    'sass',
    ['useref', 'images', 'fonts'],
    callback
  )
})

I've tried rewriting my code a few different ways and I've gotten various errors. The furthest I've gotten is with passing done into functions and running the done function at the end of some gulp tasks, but I understand that I should be able to use Gulp 4 without taking that route.

4sight
  • 31
  • 10
  • I'm confused by what's going on with the `.series()` expressions. Each series only has one task, I don't see task functions for 'sass' or 'browserSync', and there seems to be some redundancy that's addressed in the [docs](https://gulpjs.com/docs/en/api/series#forward-references). – stealththeninja Apr 27 '19 at 03:05
  • I got rid of the `series` expressions at the beginning and rewrote my `default` task so it reads: `gulp.task('default', gulp.series(gulp.parallel('sass', 'browserSync'), 'watch'));` Now BrowserSync launches in my browser and it says "BrowserSync: connected" in the upper right for a moment when it does, but it's not actually updating the page when I edit my index.html file. – 4sight Apr 27 '19 at 14:31
  • It looks like the `watch` task never starts; I don't see `Starting 'watch'...` – 4sight Apr 27 '19 at 14:39
  • I noticed you're using the comma operator (`gulp(),gulp(),gulp()`) rather than separate expressions (if that's the right way to say it: `gulp(); gulp(); gulp();`). I'm not sure that it's a problem, but that combine with not calling the `done()` callback stand out. – stealththeninja Apr 27 '19 at 21:57

1 Answers1

0

change default code 

gulp.task('default', function() {
  gulp.watch('app/styles/**/*.scss', gulp.series('sass')),
  gulp.watch('app/*.html', gulp.series('browserSync')),
  gulp.watch('app/js/**/*.js', gulp.series('browserSync'));
  return
});

into To this 

function watch() {
    browserSync.init({
        server:{
            baseDir: './'
        }
    });
    gulp.watch('./scss/**/*.scss',style);
    gulp.watch('./**/*.html').on('change',browserSync.reload);
    gulp.watch('./scss/**/*.js').on('change',browserSync.reload);

}

exports.watch = watch;
gulp.task('default',watch  );

hope this will helps ..!

DeC
  • 2,226
  • 22
  • 42
  • I tried this fix. Now BrowserSync launches in my browser and it says "BrowserSync: connected" in the upper right for a moment when it does, but it's not actually updating the page when I edit my index.html file. Thank you for taking a shot at my problem. – 4sight Nov 28 '19 at 21:38
  • Have you check file path , i think thats the issue ... browserSync working but path was not correct – DeC Nov 29 '19 at 05:21