Часы Gulp 4 не работают, только запустить один раз - PullRequest
Новая
       38

Часы Gulp 4 не работают, только запустить один раз

0 голосов
/ 02 февраля 2019

Я перешел с Gulp 3 на Gulp 4, но не могу заставить его работать.

Когда я запускаю gulp и сохраняю файл SCSS или HTML, он успешно создает новый файл.Если я сохраню еще раз, ничего не произойдет. Он запускается только один.

Ниже мой gulpfile.js 

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

sass.compiler = require('node-sass');


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


// Static Server and watching scss/html files
gulp.task('server', gulp.series('sass', function(){
    browserSync.init({
        server: {
            baseDir: "./template"
        }
    });
    gulp.watch("template/assets/scss/**/*.scss", gulp.task('sass'));
    gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);
    gulp.watch("template/**/*.html", browserSync.reload);
}));


gulp.task('watch', function() {
    gulp.watch(['sass']);
});


gulp.task('default', gulp.series(gulp.parallel('sass', 'watch', 'server')))

1 Ответ

0 голосов
/ 02 февраля 2019

Задание 'watch', которое у вас есть, не нужно (и его синтаксис неправильный): 

gulp.task('watch', function() {
    gulp.watch(['sass']);
});

, поэтому удалите его.У вас уже есть gulp.watch операторы в вашем 'server' задании: 

gulp.watch("template/assets/scss/**/*.scss", gulp.task('sass'));
//  gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);

Я закомментировал второй выше, потому что вы уже звоните 

.pipe(browserSync.stream());

в конце 'sass' задача, так что закомментированная строка browserSync.reload также является дублирующей.

Вам нужно также сообщить об асинхронном завершении в вашей задаче 'сервера', посмотрите, где я добавил обратный вызов done, чтобы сделать это: 

// Static Server and watching scss/html files
gulp.task('server', function (done) {
    browserSync.init({
        server: {
            baseDir: "./template"
        }
    });
    gulp.watch("template/assets/scss/**/*.scss", gulp.series('sass'));
    //  gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);
    gulp.watch("template/**/*.html", browserSync.reload);
    done();
});

Я удалил вызов gulp.series('sass') с начала задачи 'serve', потому что вы уже вызывали 'sass' в своей задаче по умолчанию, поэтому она не нужна в задаче 'server'.

Также обратите внимание на использование gulp.series('sass') в первых часах вместо gulp.task('sass').

Наконец, поскольку мы удаляем отдельную задачу 'watch', измените задачу 'default' на:

gulp.task('default', gulp.series('sass', 'server'));

и удалите туда gulp.parallel - вы просто хотите, чтобы 'sass' работал до 'server'.

Вот все изменения: 

// Static Server and watching scss/html files
gulp.task('server', function (done) {
    browserSync.init({
        server: {
            baseDir: "./template"
        }
    });
    gulp.watch("template/assets/scss/**/*.scss", gulp.series('sass'));
    // gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);
    gulp.watch("template/**/*.html", browserSync.reload);
    done();
}));


// gulp.task('watch', function() {
//    gulp.watch(['sass']);
// });

gulp.task('default', gulp.series('sass', 'server'));
...