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] Using gulpfile C:\xampp\htdocs\drupal-8.7.9\drupal-8.7.9\themes\custom\sebastian\gulpfile.js

[18:40:58] Starting 'watch'...

Why does it not finish the watch?

Gulp watch doesn't create a css folder in the sebastian folder.

Answer 1

The watch task doesn't finish because you didn't terminate that task - like you did with the return statements in the other tasks. But that is a good thing.

You do not want the watch task to terminate - you want it to keep watching files as you edit them and the watch task will then trigger the other tasks.

The watch task on its own - like on first run - will not trigger the sass task until you edit a .scss file that it is watching. As soon as you do that, the sass task should be triggered and your output .css file be created.

There are options to have the watch task be triggered on first run if that is really what you wish. But it doesn't sound like that is your issue.

Answer 2

• add function callback in functions task

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