Gulp 手表未完成

Question

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 手表不會在 sebastian 文件夾中創建 css 文件夾。

Answer 1

watch任務沒有完成，因為您沒有終止該任務 - 就像您在其他任務中使用return語句所做的那樣。 但這是一件好事。

您不希望watch任務終止 - 您希望它在編輯文件時繼續監視文件，然后watch任務將觸發其他任務。

watch任務本身 - 就像第一次運行一樣 - 不會觸發sass任務，直到您編輯它正在監視的.scss文件。 執行此操作后，應立即觸發sass任務並創建 output .ZC7A62 .css文件。

如果這確實是您想要的，可以選擇在第一次運行時觸發watch任務。 但這聽起來不像是你的問題。

Answer 2

• 在函數任務中添加 function 回調

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()
});