设置gulpfile时遇到问题

时间:2020-04-06 17:29:22

标签: automation gulp

我正在配置一个模板,该模板可用于我的每个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)

0 个答案:

没有答案