重写了 gulpfile.js用于 Gulp 4,默认任务现在挂起



我从 Gulp 3.9.1 升级到 Gulp. 4.0.1,现在当我运行它时,我看到"Starting 'default'...",没有其他事情发生。这是我的gulp文件的结尾:

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

我尝试以几种不同的方式重写代码,但遇到了各种错误。我得到的最远的是将done传递到函数中并在一些 gulp 任务结束时运行 done 函数,但我知道我应该能够在不走那条路的情况下使用 Gulp 4。

更改默认代码

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
});

成 到这个

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

希望这会有所帮助..!

最新更新