从Gulp 3升级到Gulp 4的问题

如何解决从Gulp 3升级到Gulp 4的问题

我正在尝试将旧的Gulp 3 gulpfile.js转换为Gulp 4友好版本，而我遇到了很多问题。

我对javascript的了解相对有限，但是我真的希望它能起作用:) 我已经阅读了大约20篇StackOverflow帖子，文档指南，中型文章，但仍然无法弄清。

这是我的旧版（Gulp 3）gulpfile.js，在升级到Gulp 4之前，它运行良好。

var gulp        = require('gulp');

// gulp plugins
var sass        = require('gulp-sass');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');
var useref      = require('gulp-useref');
var uglify      = require('gulp-uglify');
var gulpIf      = require('gulp-if');
var cssnano     = require('gulp-cssnano');
var imagemin    = require('gulp-imagemin');
var cache       = require('gulp-cache');
var del         = require('del');
var runSequence = require('run-sequence');
var fileinclude = require('gulp-file-include');
var reload      = browserSync.reload;

  
  // Development Tasks 
  // -----------------
  
  // Start browserSync server
  gulp.task('browserSync',function() {
    browserSync({
      server: {
        baseDir: 'app'
      }
    })
  })
  
    
  // fileinclude params
  gulp.task('fileinclude',function() {
    return gulp.src(['app/_templates/**/*.html','!app/_templates/_includes/*.html'])
      .pipe(fileinclude({
        prefix: '@@',basepath: '@file'
      }))
      .pipe(gulp.dest('app/'))
      .pipe(browserSync.stream());
  });

  // sass params
  gulp.task('sass',function() {
    return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
      .pipe(sass().on('error',sass.logError)) // Passes it through a gulp-sass,log errors to console
      .pipe(autoprefixer({
        browsers: ['last 3 versions'],cascade: false
      }))
      .pipe(gulp.dest('app/css')) // Outputs it in the css folder
      .pipe(browserSync.reload({ // Reloading with Browser Sync
        stream: true
      }));
  })
  
  // Watchers
  gulp.task('watch',function() {
    gulp.watch('app/_templates/**/*.html',['fileinclude']);
    gulp.watch('app/scss/**/*.scss',['sass']);
    gulp.watch('app/**/*.html',browserSync.reload);
    gulp.watch('app/js/**/*.js',browserSync.reload);
  })
  
  // Optimization Tasks 
  // ------------------
  
  // Optimizing CSS and JavaScript 
  gulp.task('useref',function() {
  
    return gulp.src(['app/**/*.html','!app/_templates/**/*.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/**/*']);
  });
  
  // refresh browser every time fileinclude runs
  gulp.task('include-watch',['fileinclude'],reload);

  // Build Sequences
  // ---------------
  
  // RUN "gulp"
  gulp.task('default',function(callback) {
    // watch files and run tasks
    gulp.watch("**/*.html",['include-watch']);
    runSequence(['sass','fileinclude','browserSync'],'watch',callback
    )
  })
  
  // RUN "gulp build"
  gulp.task('build',function(callback) {
    runSequence(
      'clean:dist','sass',['useref','images','fonts'],callback
    )
  })

这是我的新gulpfile.js，它不起作用（端子被卡住而不会抛出错误）

var gulp        = require('gulp');

// gulp plugins
var sass        = require('gulp-sass');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');
var useref      = require('gulp-useref');
var uglify      = require('gulp-uglify');
var gulpIf      = require('gulp-if');
var cssnano     = require('gulp-cssnano');
var imagemin    = require('gulp-imagemin');
var cache       = require('gulp-cache');
var del         = require('del');
var fileinclude = require('gulp-file-include');
var reload      = browserSync.reload;

  
  // Development Tasks 
  // -----------------
  
  // Start browserSync server
  gulp.task('browserSync',function(done) {
    browserSync({
      server: {
        baseDir: 'app'
      }
    })
    done();
  })
  
    
  // fileinclude params
  gulp.task('fileinclude',function() {
    gulp.watch(gulp.series('app/_templates/**/*.html','fileinclude'));
    gulp.watch(gulp.series('app/scss/**/*.scss','sass'));
    gulp.watch('app/**/*.html',gulp.series('fileinclude',reload));

  // Build Sequences
  // ---------------
  
   // RUN "gulp"
   gulp.task('default',function(done) {
    // watch files and run tasks
    gulp.watch("**/*.html",gulp.series('include-watch'));
    gulp.series('sass','browserSync'),gulp.series('watch');
     done();
  }))
  
  // RUN "gulp build"
  // IGNORE THE CODE BELOW,HAVEN'T STARTED ON THIS YET
  gulp.task('build',callback
    )
  })

这是我的终端输出：

[14:15:31] Starting 'default'...
[14:15:31] Starting 'fileinclude'...
[14:15:31] Finished 'fileinclude' after 137 ms
[14:15:31] Starting '<anonymous>'...
[14:15:31] Finished '<anonymous>' after 18 ms
[14:15:31] Finished 'default' after 158 ms

感谢任何技巧和任何帮助或情感支持！ ：）

谢谢！