Проблемы с Gulp sass, как исправить?

Question

[KirillqqMenn]

Код

var gulp         = require('gulp'),
		concat       = require('gulp-concat'),
		autoprefixer = require('gulp-autoprefixer'),
		cleanCSS     = require('gulp-clean-css'),
		uglify       = require('gulp-uglify'),
		del          = require('del'),
		browserSync  = require('browser-sync').create(),
		sass 				 = require('gulp-sass');

gulp.task('sass', function() {
	return gulp.src('app/sass/**/*.sass')
		.pipe(sass())
		.pipe(gulp.dest('app/css'))
		.pipe(browserSync.stream())
})

const jsFiles = [
	'app/js/lib.js', 
	'app/js/main.js'
]

function styles() {
	return gulp.src('app/css/**/*.css')

	.pipe(autoprefixer({
		cascade: false
	}))

	.pipe(cleanCSS({
		level: 2
	}))

	.pipe(gulp.dest('dist/css'))

	.pipe(browserSync.stream())
}

function scripts() {
	return gulp.src(jsFiles)

	.pipe(concat('script.js'))

	.pipe(uglify({
		toplevel: true
	}))

	.pipe(gulp.dest('dist/js'))

	.pipe(browserSync.stream())
}

function clean() {
	return del(['build/*'])
}

function watch() {
	browserSync.init({
		server: {
			baseDir: "./"
		}
	});

	gulp.watch('app/sass/**/*.sass', sass);
	gulp.watch('app/css/**/*.css', styles);
	gulp.watch('app/js/**/*.js', scripts);
	gulp.watch('*.html').on('change', browserSync.reload);
}

gulp.task('styles', styles);
gulp.task('scripts', scripts);
gulp.task('del', clean);
gulp.task('watch', watch);
gulp.task('build', gulp.series(clean, gulp.parallel(styles, scripts)));
gulp.task('dev', gulp.series('build', 'watch'));

После запуска таска dev всё хорошо, но как изменяю sass файл он просто пишет "Starting 'gulpSass'..." и не записывает изменения в файл css.
Когда запускаю sass отдельно всё нормально. В чём дело?

Comments

[Сергей delphinpro]

Зачем styles в отдельный таск?

gulp.task('sass', function() {
  return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
    .pipe(autoprefixer({ cascade: false }))
    .pipe(cleanCSS({ level: 2 }))
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.stream())
})

[KirillqqMenn]

Сергей delphinpro, нужно что бы в этой строчке .pipe(gulp.dest('app/css')) обработанный css отправлялся в dest/css, но в тоже время и сохранялся в app/css, тот который не обработан autoprefixer'ом и cleancss'ом. Надёюсь нормально объяснил

[Сергей delphinpro]

KirillqqMenn,

gulp.task('sass', function() {
  return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(autoprefixer({ cascade: false }))
    .pipe(cleanCSS({ level: 2 }))
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.stream())
})

[KirillqqMenn]

Сергей delphinpro,

var gulp         = require('gulp'),
		concat       = require('gulp-concat'),
		autoprefixer = require('gulp-autoprefixer'),
		cleanCSS     = require('gulp-clean-css'),
		uglify       = require('gulp-uglify'),
		del          = require('del'),
		browserSync  = require('browser-sync').create(),
		sass 			   = require('gulp-sass');

const jsFiles = [
	'app/js/lib.js', 
	'app/js/main.js'
]

gulp.task('sass', function() {
  return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(autoprefixer({ cascade: false }))
    .pipe(cleanCSS({ level: 2 }))
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.stream())
})

function scripts() {
	return gulp.src(jsFiles)

	.pipe(concat('script.js'))

	.pipe(uglify({
		toplevel: true
	}))

	.pipe(gulp.dest('dist/js'))

	.pipe(browserSync.stream())
}

function clean() {
	return del(['build/*'])
}

function watch() {
	browserSync.init({
		server: {
			baseDir: "./"
		}
	});

	gulp.watch('app/sass/**/*.sass', sass);
	gulp.watch('app/js/**/*.js', scripts);
	gulp.watch('*.html').on('change', browserSync.reload);
}

gulp.task('sass', sass);
gulp.task('scripts', scripts);
gulp.task('del', clean);
gulp.task('watch', watch);
gulp.task('build', gulp.series(clean, gulp.parallel(sass, scripts)));
gulp.task('dev', gulp.series('build', 'watch'));

Код стал таким, но теперь таск sass вообще не работает, выдавая ошибку "The following tasks did not complete: sass
Did you forget to signal async completion?"

[Сергей delphinpro]

KirillqqMenn, ну так подайте сигнал завершения

gulp.task('sass', function(done) {
  gulp.src('app/sass/**/*.sass')
    .on('end', done)
    .pipe(sass())
...
})

[KirillqqMenn]

Сергей delphinpro, Спасибо, что ответил на все мои тупые вопросы.