我正在配置一个模板,该模板可用于我的每个Web开发项目,并且希望自动化一些任务,因此我决定使用gulp和一些插件来做到这一点。我相信我已经完成了gulpfile的设置,但是当我进行构建时,会出现此错误。
[13:17:42] Starting 'default'...
[13:17:42] Starting 'watch'...
[13:17:43] 'watch' errored after 23 ms
[13:17:43] Error: watching ./assets/scss/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
这是我的gulpfile的内容。
const gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
postcss = require('gulp-postcss'),
cssnano = require('cssnano'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed'),
concat = require('gulp-concat'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
sass = require('gulp-sass');
const SCSS = './assets/scss/**/*.scss',
JS = './assets/js/**/*.js';
function styles() {
return gulp.src(SCSS)
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
.pipe(sourcemaps.write)
.pipe(postcss(autoprefixer())
.pipe(gulp.dest('./assets/dist/css')));
}
function concatCSS() {
return gulp.src('./assets/dist/css/styles.css')
.pipe(sourcemaps.init)
.pipe(concat('styles.min.css'))
.pipe(postcss(cssnano()))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./assets/dist/css'))
}
function js() {
return gulp.src(JS)
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./assets/dist/js'))
}
function watchTask() {
watch([SCSS, JS].parallel(styles, js))
}
function watch() {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch(SCSS, gulp.series([styles, concatCSS]));
gulp.watch(JS, js);
gulp.watch(SCSS, JS + 'styles.min.css' + 'app.min.js').on('change', reload);
}
exports.styles = styles;
exports.concatCSS = concatCSS;
exports.watchTask = watchTask()
exports.js = js;
const build = gulp.parallel(watch);
gulp.task('default', build)