Cssnano does not compress css with gulp-sequence how to solve?

Question

gulp.js

Hi all. There is gulpfile.js

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    notify = require('gulp-notify'),
    scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    csscomb = require('gulp-csscomb'),
    cssnano = require('gulp-cssnano'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglifyjs'),
    image = require('gulp-image'),
    del = require('del'),
    gulpSequence = require('gulp-sequence'),
    browserSync = require('browser-sync').create();

gulp.task('serve', ['scss'], function() {
    browserSync.init({
        server: {
            baseDir: "./app"
        },
        notify: false
    });
    gulp.watch('app/scss/**/*.*', ['scss']);
    gulp.watch('app/*.html').on('change', browserSync.reload);
    gulp.watch('app/js/**/*.*').on('change', browserSync.reload);
});

gulp.task('scss', function () {
    return gulp.src('app/scss/main.scss')
        .pipe(scss()).on('error', notify.onError())
        .pipe(autoprefixer({
            browsers: ['last 15 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.stream());
});

gulp.task('csscomb' , function () {
    return gulp.src('app/css/main.css')
        .pipe(csscomb('configs/yandex.json'))
        .pipe(gulp.dest('app/css'));
});

gulp.task('cssnano', function () {
    return gulp.src('app/css/main.css')
        .pipe(cssnano())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('scripts', function () {
    return gulp.src(['app/js/main.js', 'app/js/libs'])
        .pipe(concat('main.min.js'))
        .pipe(uglify({
            comments: false,
            mangle: true
        }))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('img', function() {
    return gulp.src('app/img/**/*.*')
        .pipe(image())
        .pipe(gulp.dest('dist/img'));
});

gulp.task('clean', function() {
    return del.sync('dist/*');
});

gulp.task('useref', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

gulp.task('build', gulpSequence('clean', 'scss', 'csscomb', 'cssnano', 'scripts', 'useref', 'img'));

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

If you run the build task, the final css file (main.min.css) is not minified. But if you run the cssnano task, everything is fine. What could be the problem?

Answer 1

What version of gulp ? Is the gulp-sequence
plugin working? Alternatively, you can set up dependencies for tasks:

gulpfile.js

gulp.task('scss', function () {
    return gulp.src('app/scss/main.scss')
        .pipe(scss()).on('error', notify.onError())
        .pipe(autoprefixer({
            browsers: ['last 15 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.stream());
});

gulp.task('csscomb', ['scss'], function () {
    return gulp.src('app/css/main.css')
        .pipe(csscomb('configs/yandex.json'))
        .pipe(gulp.dest('app/css'));
});

gulp.task('cssnano', ['csscomb'], function () {
    return gulp.src('app/css/main.css')
        .pipe(cssnano())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('build', gulpSequence('clean', ['cssnano', 'scripts', 'useref', 'img']));