maksym1991
@maksym1991
WordPress adept

Cssnano не сжимает css c gulp-sequence как решить?

Привет всем. Есть 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']);


Если запустить таск build конечный css файл (main.min.css) не минифицирован. Но если запустить таск cssnano все нормально. В чем может быть проблема?
  • Вопрос задан
  • 379 просмотров
Решения вопроса 1
hvdd
@hvdd
Кратко о себе
Какая версия gulp?
Плагин gulp-sequence работает?

Как вариант, можно настроить зависимости для тасков:
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']));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы