Настройка gulp-sass на Gulp 4 - PullRequest
Новая
       15

Настройка gulp-sass на Gulp 4

0 голосов
/ 18 декабря 2018

Я недавно обновил Gulp до версии 4 после того, как сделал несколько обновлений зависимостей в моем файле package.json.У меня проблемы с настройкой новой gulp.series / gulp.parallel, чтобы она работала так же, как и до обновления.

Вот так выглядит Gulpfile.js на данный момент: 

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      cleanCSS = require('gulp-clean-css'),
      browserSync = require('browser-sync').create();

gulp.task('styles', gulp.series(function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false,
            grid: "no-autoplace"
        }))
        .pipe(gulp.dest('./css/'))
        .pipe(browserSync.stream());
}));

//Watch task
gulp.task('default', gulp.parallel('styles',function() {
    gulp.watch('sass/**/*.scss',gulp.parallel('styles'));
    gulp.watch("*.html").on('change', browserSync.reload);
}));

gulp.task("sync", gulp.parallel("default",function(){
    browserSync.init({
        server: "./",
        notify: false
    });
}));

И вот как это выглядело до того, как я обновился до версии 4, когда он работал так, как мне хотелось:файлы SCSS в CSS при сохранении.И это работает, частично.При редактировании файла main.scss (расположенного в sass/main.scss, CSS генерируется сразу, как я хочу, и новый CSS генерируется при каждом сохранении. Но если я редактирую некоторые частичные файлы, расположенные в sass/partials/_file.scss, он работает толькопри первом сохранении после запуска Gulp. Если я пытаюсь сохранить второй раз, изменения не генерируются как CSS и журнал терминала не обновляется до новой отметки времени.

Я предполагаю, что у меня есть gulp.Неправильная настройка series / gulp.parallel. И я подозреваю, что мне нужно как-то применить это к pipe методам, но я не знаю, как.

1 Ответ

0 голосов
/ 18 декабря 2018

Две вещи, которые нужно изменить: 

gulp.task('styles', gulp.series(function() {
   gulp.src('sass/**/*.scss')

изменить на 

gulp.task('styles', function() {
    return gulp.src('sass/**/*.scss')
    …
});

Нет необходимости в gulp.series и добавить оператор возврата.Кроме того, я бы предложил, в конечном итоге, перейти на полный функциональный маршрут вместо использования gulp.task.

Дайте нам знать, если это поможет.

...