Gulp 手表没有完成答案

【问题标题】：Gulp watch doesn't finishedGulp 手表没有完成
【发布时间】：2021-04-13 15:13:21
【问题描述】：

var gulp = require('gulp');
var livereload = require('gulp-livereload');
var uglify = require('gulp-uglifyjs');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('imagemin', function() {
    return gulp.src('./themes/custom/sebastian/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{ removeViewBox: false }],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('./themes/custom/sebastian/images'));
});

gulp.task('sass', function() {
    return gulp.src('./themes/custom/sebastian/sass/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./themes/custom/sebastian/css'));
});

gulp.task('uglify', function() {
    return gulp.src('./themes/custom/sebastian/lib/*.js')
        .pipe(uglify('main.js'))
        .pipe(gulp.dest('./themes/custom/sebastian/js'));
});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('./themes/custom/sebastian/sass/**/*.scss', gulp.series('sass'));
    gulp.watch('./themes/custom/sebastian/lib/*.js', gulp.series('uglify'));
    gulp.watch(
        [
            './themes/custom/sebastian/css/style.css',
            './themes/custom/sebastian/**/*.twig',
            './themes/custom/sebastian/js/*.js'
        ],
        function(files) {
            livereload.changed(files);
        }
    );
});

[18:40:58] 使用 gulpfile C:\xampp\htdocs\drupal-8.7.9\drupal-8.7.9\themes\custom\sebastian\gulpfile.js

[18:40:58] 开始“观看”...

为什么看不完？

Gulp watch 不会在 sebastian 文件夹中创建 css 文件夹。

【问题讨论】：

标签： javascript node.js sass gulp

【解决方案1】：

watch 任务未完成，因为您没有终止该任务 - 就像您在其他任务中使用 return 语句所做的那样。 但这是件好事。

您不希望 watch 任务终止 - 您希望它在您编辑文件时继续观察文件，然后 watch 任务将触发其他任务。

watch 任务本身 - 就像在第一次运行时一样 - 不会触发 sass 任务，直到您编辑它正在观看的 .scss 文件。一旦你这样做了，sass 任务应该被触发并且你的输出.css 文件被创建。

如果您确实希望这样做，可以选择在首次运行时触发watch 任务。但听起来这不是你的问题。

【讨论】：

您能否详细说明“如果您确实希望的话，可以选择在首次运行时触发监视任务”是什么意思。我正在做一些与 OP 非常相似的事情，在构建后事件中调用它。函数返回，但构建永远不会完成。

【解决方案2】：

在函数任务中添加函数回调

gulp.task('watch', function(callback) {
    livereload.listen();
    gulp.watch('./themes/custom/sebastian/sass/**/*.scss', gulp.series('sass'));
    gulp.watch('./themes/custom/sebastian/lib/*.js', gulp.series('uglify'));
    gulp.watch(
        [
            './themes/custom/sebastian/css/style.css',
            './themes/custom/sebastian/**/*.twig',
            './themes/custom/sebastian/js/*.js'
        ],
        function(files) {
            livereload.changed(files);
        }
    );
callback()
});

【讨论】：