In Gulp, one task does not start during assembly, what's the squiggle?

Question

gulp.js

Hello! For the first time I got acquainted with the dropper, Gulp, that's how 2 days already, I decided to compile the first config, but 1 task does not work during assembly, I painted it below.

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var minify = require('gulp-csso');
var uncss = require('gulp-uncss');
var htmlmin = require('gulp-htmlmin');
var uglify = require('gulp-uglify');
var postcss = require('gulp-postcss');
var mqpacker = require('css-mqpacker');
var autoprefixer = require('autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rigger = require('gulp-rigger');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var svgmin = require('gulp-svgmin');
var svgstore = require('gulp-svgstore');
var run = require('run-sequence');
var del = require('del');
var browserSync = require('browser-sync').create();


gulp.task('html', function() {
  gulp.src('src/*.html')
    .pipe(rigger())
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('build'))
});

gulp.task('scss', function () {
  gulp.src('src/scss/*.scss')
    .pipe(plumber())
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('build/css'));
});

// После того как сработал scss, хочу чтобы сработал styles, то есть добавил префикси, минифицировал
gulp.task('styles', function () {
  gulp.src('build/css/*.css')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(postcss([
      autoprefixer({browsers: [
        'last 2 versions'
      ]}),
      mqpacker()
    ]))
    .pipe(gulp.dest('build/css'))
    .pipe(minify())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/css'));
});

gulp.task('js', function() {
  gulp.src('src/js/*.js')
    .pipe(rigger())
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/js'));
});

gulp.task('images', function() {
  return gulp.src('src/img/**/*.{png,jpg,gif}')
    .pipe(imagemin([
      imagemin.gifsicle(),
      imagemin.optipng({optimizationLevel: 3}),
      imagemin.jpegtran({progressive: true})
    ]))
    .pipe(gulp.dest('build/img'));
});

gulp.task('icons', function() {
  return gulp.src('src/img/icons/*.svg')
    .pipe(svgmin())
    .pipe(rename({prefix: 'icon-'}))
    .pipe(svgstore({
      inlineSvg: true
    }))
    .pipe(rename('icons.svg'))
    .pipe(gulp.dest('build/img'));
});

gulp.task('fonts', function() {
  return gulp.src('src/fonts/**/*')
    .pipe(gulp.dest('build/fonts'));
});


gulp.task('server', function() {
  
  browserSync.init({
    server: 'build'
  });
  
  gulp.watch('src/**/*.html', ['html']);
  gulp.watch('src/scss/**/*.scss', ['scss']);
  gulp.watch('src/js/**/*.js', ['js']);
  gulp.watch('build/**/*').on('change', browserSync.reload);
});

gulp.task('default', ['server']);


gulp.task('del', function() {
  return del('build');
});

gulp.task('build', function (cb) {
  run(
    'del',
    'html',
    'scss',
    'styles', // вот это добро не выводит результат, если запускать вручную, то есть gulp styles, после gulp build, то работает. Поставил плагин run-sequence.
    'js',
    'images',
    'icons',
    'fonts',
    cb
  );
});

Now I have combined 2 tasks - scss and styles , everything works, I initially did this, and then I thought, if the file is large, then it will run all the plugins every time, after each change, so I decided to separate it so that it only works during assembly minification, substitution of prefixes, etc., etc., and before that only preprocessing worked. Or does it not have much effect? I saw the build from this guy - https://markgoodyear.com/2014/01/getting-started-w...
He runs preprocess sass and optimization at once, on css-tricks there is preprocess and optimization separately.
Does this have a big impact on performance, which is better? And why I do not want to display the result of the "styles" task.
I first run gulp build, it copies all the folders from src to the build folder , I start the server in the build folder , and do what I need, stop it, type gulp build again to build everything again, while deleting the build folder , but the styles task does not work. Thank you!
Folder structure:

https://cloud.mail.ru/public/MhS9/aFPQzQsNc

Answer 1

I don't understand the meaning of this post? What does it make easy?

gulp.task('scss', function () {
  gulp.src('src/scss/*.scss')
    .pipe(plumber())
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('build/css'));
});

// После того как сработал scss, хочу чтобы сработал styles, то есть добавил префикси, минифицировал
gulp.task('styles', function () {
  gulp.src('build/css/*.css')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(postcss([
      autoprefixer({browsers: [
        'last 2 versions'
      ]}),
      mqpacker()
    ]))
    .pipe(gulp.dest('build/css'))
    .pipe(minify())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/css'));
});

It is much more convenient and more logical to write by combining pipe (example sass, but stylus is similar):

gulp.task('styles', function() {
    gulp.src(src.sass)
    .pipe(sass({
            "sourcemap=none": true,
            noCache: true,
            compass: true,
            style: sassStyle,
            lineNumbers: sassComments
        }))
    .pipe(autoPrefixer())   
    .pipe(........................())
    .pipe(gulp.dest(outputDir + 'css'))
    .pipe(connect.reload())
});