Question

我刚从gulp3更新到gulp4，我遇到了'gulp.watch（）'的问题。我已经阅读了文档和许多网站，了解了将原来的gulfile转换为gulp4兼容性所采取的步骤，所以我显然遗漏了一些东西。

由于我的手表通话都没有运行，我只会把我的CSS和html任务放进去。

我的CSS任务

// Compile SCSS
gulp.task('css:compile', function(cb) {
    return gulp.src('./scss/**/*.scss')
        .pipe(sass.sync({
            outputStyle: 'expanded'
        }).on('error', sass.logError))
        .pipe(gulp.dest('./src/assets/css'))
});

// Minify CSS
gulp.task('css:minify', function(cb) {
    return gulp.src([
            './src/**/*.css',
            '!./src/**/*.min.css'
        ])
        .pipe(cleanCSS())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./app'))
        .pipe(browserSync.stream());
});
gulp.task('css', gulp.series('css:compile', 'css:minify'));

我的HTML任务

// Includer (For head, footer, nav, etc.)
gulp.task('html:include', function(done) {
    gulp.src('./src/**/*.html')
        .pipe(includer())
        .pipe(htmlclean())
        .pipe(gulp.dest('./app'))
    done();
});
gulp.task('html', gulp.series('html:include'));

我的观察任务

//Compile CSS and JS, Include all HTML before watching
gulp.task('start', gulp.series(gulp.parallel('css', 'js'), 'html', 'browserSync'));

//Watch for changed files and reload browser
gulp.task('watch', function() {
    gulp.watch('./scss/*.scss', gulp.series('css'));
    gulp.watch('./src/**/*.js', gulp.series('js'));
    gulp.watch('./src/**/*.html', gulp.series('html', browserSync.reload()));
});

// Dev environment start
gulp.task('dev', gulp.series('start', 'watch'));

这里没有什么特别之处，但我已经尝试了所有变化，以使每个手表成为一个变量，例如

var watcher = gulp.watch('./scss/*.scss')
watcher.on('change',function(event){
console.log('event:'+ event);
}

我不确定我还有什么可能会遗漏，但过去4个小时我一直在搞乱......

gulp4的监视任务有问题

0 个答案: