几年前，我设置vs code，以某种程度上复制我用来设计我的网站的当前方法(使用独立的应用程序)。当时我决定坚持使用我正在使用的东西。由于这些应用程序不再维护，我现在遇到了编译问题-是时候进行跳跃了。
我有麻烦与我的gulpfile.js，这是从我最初尝试这一切出来的时候。我保存了它，以防我需要返回使用vs code。问题显然是这种格式不再工作，因为gulp已经更新。所有这些基本上对我来说都是陌生的，虽然我知道事情在做什么，但我不太了解，无法将其修改为gulp 4^的当前方法。
有谁能帮我解决这个问题吗?我看过关于串联和并联的指南等等。我想看一个实际的例子对我来说更容易理解。my old gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
//processes the scss files in this folder
//minimizes them
gulp.task('sass', function () {
return gulp.src('_config/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(cleanCSS())
.pipe(gulp.dest('assets/css'));
});
//minifies all js files in this folder
gulp.task('js', function () {
return gulp.src('_config/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('assets/js'));
});
//minifies all js files in this folder
gulp.task('scripts', function () {
return gulp.src('_config/scripts/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('assets/scripts'));
});
//creates 'watchers' that run tasks on specific activities
gulp.task('watch', function () {
gulp.watch('_config/scss/**/*.scss', ['sass']);
gulp.watch('_config/js/**/*.js', ['js']);
gulp.watch('_config/scripts/**/*.js', ['scripts']);
gulp.watch('_config/img/**/*', ['img']);
});
//this is the default task that runs everything
gulp.task('default', ['sass', 'js', 'scripts', 'watch']);
你离你需要去的地方不远了。修改代码:
gulp.task('watch', function () {
gulp.watch('_config/scss/**/*.scss', ['sass']);
gulp.watch('_config/js/**/*.js', ['js']);
gulp.watch('_config/scripts/**/*.js', ['scripts']);
gulp.watch('_config/img/**/*', ['img']);
});
gulp.task('default', ['sass', 'js', 'scripts', 'watch']);
gulp.task('watch', function () {
gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));
gulp.watch('_config/js/**/*.js', gulp.series('js'));
gulp.watch('_config/scripts/**/*.js', gulp.series('scripts'));
gulp.watch('_config/img/**/*', gulp.series('img'));
});
gulp.task('default', gulp.series('sass', 'js', 'scripts', 'watch'));
gulp.task现在有这个签名:gulp.task([taskName], taskFunction)
在gulp v3之前使用任务数组作为第二个参数。gulp v4使用一个函数，如gulp.series()或gulp.parallel()，作为第二个参数。gulp.series()接受任务列表作为参数。由于使用了gulp.task()方法来创建任务，因此series中的任务名称应该显示为字符串，如'sass'、'js'等。
注意:在v4中创建任务的首选方式是如下函数:
function scripts() {
return gulp.src('_config/scripts/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('assets/scripts'));
});
那么您将使用series中的这些函数名作为gulp.series(scripts, js)-而不是字符串。你应该考虑使用这种形式的任务。
gulp.watch()signature:gulp.watch(globs, [options], [task])
[task]可以是单个任务名称，如'sass'或组成的任务，这只意味着使用series或parallel生成的任务。
在您的示例中，您在每个watch语句中只运行一个任务，因此
gulp.watch('_config/scss/**/*.scss', 'sass');
应该足够了。我将它们显示为组合任务，如:
gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));
，以防将来您希望在文件更改时运行多个任务。在这种情况下，您可以使用如下命令:
gulp.watch('_config/scss/**/*.scss', gulp.series('sass', 'serve'));
例如。
最后将gulp-uglify换成gulp-terser。gulp-terser将处理gulp-uglify不能处理的es6语法。gulp-terser