gulp 在终端中复制任务答案

【问题标题】：gulp duplicating tasks in the terminalgulp 在终端中复制任务
【发布时间】：2020-03-19 12:57:10
【问题描述】：

我的gulp有问题，我不知道怎么解释，但是当你看到它时你就会明白这个问题，基本上，我认为我的gulp正在重复任务，因此执行可能需要一段时间, 但是如果我完成 gulp 并再次执行它，第一次编译时不会出现问题，但随着时间的推移，它会越来越多地重复（先加倍，然后是 4x、8x 等等）

我的大口：

    var gulp = require('gulp'),
    //Js
    babel = require('gulp-babel');
    uglify = require('gulp-uglify'),
    filesJs = './js/edit/*.js',
    outputJs = './js',
    //Sass
    sass = require('gulp-sass'),
    filesCss = './css/**/*.+(scss|sass)',
    outputCss = './css';
const {
    watch
} = require('gulp');

//Uglify
gulp.task('uglify', function () {
    gulp.src(filesJs)
        .pipe(babel({presets: ['@babel/preset-env']}))
        .pipe(uglify())
        .pipe(gulp.dest(outputJs));
});

const watcherJS = watch([filesJs]);
watcherJS.on('change', function (path, stats) {
    console.log(`File ${path} was changed`);
    return gulp.watch(filesJs, gulp.series('uglify'));
});

//Sass
gulp.task('sass', function () {
    return gulp.src(filesCss)
        .pipe(sass({
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(gulp.dest(outputCss));
});

const watcherCSS = watch([filesCss]);
watcherCSS.on('change', function (path, stats) {
    console.log(`File ${path} was changed`);
    return gulp.watch(filesCss, gulp.series('sass'));
});

//Run/Watch
gulp.task('default', gulp.parallel('uglify', 'sass'));

保存 .sass 文件一次后我的终端

File css\style.sass was changed
[09:43:18] Starting 'sass'...
[09:43:18] Starting 'sass'...
[09:43:18] Starting 'sass'...
[09:43:18] Starting 'sass'...
[09:43:33] Finished 'sass' after 15 s
[09:43:33] Finished 'sass' after 15 s
[09:43:33] Finished 'sass' after 15 s
[09:43:33] Finished 'sass' after 15 s

【问题讨论】：

标签： gulp gulp-watch gulp-sass gulp-uglify gulp-babel

【解决方案1】：

几乎可以肯定，您使用的是 chokidar 手表功能。你的代码甚至不会为我运行。而且你不需要那种复杂性。我建议摆脱

const watcherJS = watch([filesJs]);
watcherJS.on('change', function (path, stats) {
    console.log(`File ${path} was changed`);
    return gulp.watch(filesJs, gulp.series('uglify'));  // this is very strange, must be wrong
});

const watcherCSS = watch([filesCss]);
watcherCSS.on('change', function (path, stats) {
    console.log(`File ${path} was changed`);
    return gulp.watch(filesCss, gulp.series('sass'));
});

并替换为：

gulp.task('watchFiles', function () {
    gulp.watch(filesCss, gulp.series('sass'));
    gulp.watch(filesJs, gulp.series('uglify'));
});

并使用

gulp.task('default', gulp.series('uglify', 'sass', 'watchFiles'));

【讨论】：