Refactoring to Gulp 4

Question

我知道有很多关于这个的帖子，但我找不到解决方案。

这是我的gulpfile，我试图重构但没有成功，所以试图在这里得到一些答案。尝试了我发现的有关 Gulp 3 -> Gulp 4 的所有内容，但没有任何效果。也许有人有类似的设置需要转换？

自从我触摸这段代码以来，已经很久以前了，我现在对 Gulp 感到有点迷茫。

return gulp.src('app/src/files/**/*.pdf')
.pipe(gulp.dest(dist + '/files'))
});
gulp.icons ({
return gulp.src('app/src/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(dist));
});

gulp.css({
const processors = [
atImport,
cssnext,
mqpacker,
clearfix,
cssnano
];
return gulp.src('app/src/css/*.css')
.pipe(postcss(processors))
.pipe(rename('main.min.css'))
.pipe(gulp.dest(dist));
});
gulp.nunjucks({
return gulp.src('app/pages/*.njk')
// Adding data to Nunjucks
.pipe(data(function () {
return require('./data.json')
}))
.pipe(nunjucksRender({
path: ['app/pages/', 'app/templates/'] // String or Array
}))
.pipe(gulp.dest(dist));
});
gulp.browser-sync({
browserSync({
server: {
baseDir: dist
}
});
});
gulp.scripts({
return gulp.src('app/src/js/**/*.js')
.pipe(concat('main.js'))
.pipe(rename('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest(dist))
.pipe(reload({stream: true}));
});
gulp.images({
return gulp.src('app/src/img/**/*')
.pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true}))
.pipe(gulp.dest('${dist}/img'))
});
gulp.watch({
gulp.watch('app/templates/**/*.+(njk)', ['nunjucks', reload]);
gulp.watch('app/**/*.+(njk)', ['nunjucks', reload]);
gulp.watch('app/src/**/*.css', ['css', reload]);
gulp.watch(['app/src/js/**/*.js', 'main.js'], ['scripts', reload]);
gulp.watch('app/src/img/**/*', ['images', reload]);
gulp.watch('app/src/icons/**/*', ['icons', reload]);
});
gulp.task('default', gulp.parallel('nunjucks', 'css', 'files', 'scripts', 'icons', 'images', 'watch', 'browser-sync'));
gulp.task('build', gulp.parallel('nunjucks', 'files', 'css', 'scripts', 'icons', 'images'));```

Answer 1

这种形式是错误的：

gulp.icons ({
return gulp.src('app/src/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(dist));
});

全部更改为 ：

gulp.task('icons', function() {
return gulp.src('app/src/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(dist));
});

并且您所有的watch陈述都是错误的，将它们全部更改为以下形式：

gulp.watch('app/templates/**/*.+(njk)', gulp.series('nunjucks', reload));

您没有显示reload函数，所以我假设它是一个函数而不是gulp.task('reload')形式？？

我也会改变这个：

gulp.task('default', gulp.parallel('nunjucks', 'css', 'files', 'scripts', 'icons', 'images', 'watch', 'browser-sync'));

由于您最后调用browser-sync，因此gulp.series更好，以便其他任务在首次运行时完成，并且它们的更改将在首次运行时显示在浏览器中：

gulp.task('default', gulp.series('nunjucks', 'css', 'files', 'scripts', 'icons', 'images', 'watch', 'browser-sync'));