Css минификация не работает (gulp + cssnano)

Question

У меня есть очень простой gulpfile, настроенный так:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var notify = require('gulp-notify');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');

/*----------  Config settings  ----------*/

var config = {
    devPath: './app/',
    publicPath: './dist/',
    sassDir: 'sass/',
    jsDir: 'js/',
    cssDir: 'css/',
    fontDir: 'fonts/',
    moduleDir: './node_modules',
}

/*----------  Define tasks  ----------*/

gulp.task('browserSync', function() {
    var htmlDir = config.publicPath;

    browserSync.init({
        server: {
            baseDir: htmlDir
        },
    })
})

gulp.task('sassTask', function () {
    var sassFiles = config.devPath + config.sassDir + '/*.scss';
    var destDir = config.publicPath + config.cssDir;

    return gulp.src(sassFiles)
        .pipe(sass()
            .on("error", notify.onError(function (error) {
                return "Error: " + error.message;
            })))
        .pipe(gulp.dest(destDir));
});

gulp.task('useref', function(){
    var htmlFiles = config.devPath + '*.html';
    var destDir = config.publicPath;

    return gulp.src(htmlFiles)
        .pipe(useref())
        // Minifies only if it's a JavaScript file
        .pipe(gulpIf('*.js', uglify()))
        // Minifies only if it's a CSS file
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest(destDir))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('js', function() {
    var jsFiles = config.devPath + config.jsDir + '**/*.js';    // All files
    var destDir = config.publicPath + config.jsDir;

    return gulp.src(jsFiles)
                .pipe(gulp.dest(destDir));
});

gulp.task('fonts', function() {
    var fontFiles = config.devPath + config.fontDir + '**/*';   // All files
    var destDir = config.publicPath + config.fontDir;

    return gulp.src(fontFiles)
                .pipe(gulp.dest(destDir));
});

/*----------  Define watch  ----------*/

gulp.task('watch', ['browserSync', 'sassTask', 'js', 'useref', 'fonts'], function () {
    var sassFiles = config.devPath + config.sassDir + '**/*.scss';
    var jsFiles = config.devPath + config.jsDir + '**/*.js';
    var htmlFiles = config.devPath + '*.html';
    var fontFiles = config.devPath + config.fontDir + '**/*';

    gulp.watch(sassFiles, ['sassTask', 'useref']);
    gulp.watch(jsFiles, ['js', 'useref']);
    gulp.watch(htmlFiles, ['useref']);
    gulp.watch(fontFiles, ['fonts']);
});

gulp.task('default', ['browserSync', 'sassTask', 'useref', 'fonts']);

Все работает нормально при запуске "gulp watch" (синхронизация браузера, sass и т. Д.), Но минимизация css - нет. Выходной файл style.css в папке dist / css не сокращается. Что я делаю неправильно? Я пропускаю модуль? Заранее спасибо за помощь.

Моя файловая структура:

├───app
│   ├───fonts
│   ├───js
│   └───sass
├───dist
│   ├───css
│   │   └───vendor
│   ├───fonts
│   ├───img
│   │   ├───common
│   │   └───layout
│   └───js
│       └───vendor

Answer 1

Вы должны изменить эту подзадачу следующим образом:

gulp.task('useref', function(){
    var files = [
        config.devPath + '*.html', 
        config.publicPath + config.jsDir + '*.js',
        config.publicPath + config.cssDir + '*.css'
    ];
    var destDir = config.publicPath;

    return gulp.src(files)
        // Run useref only if it’s an HTML file
        .pipe(gulpIf('*.html', useref()))
        // Minifies only if it's a JavaScript file
        .pipe(gulpIf('*.js', uglify()))
        // Minifies only if it's a CSS file
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest(destDir))
        .pipe(browserSync.reload({
            stream: true
        }));
});

Первое изменение в htmlFiles (я изменяю это на files для удобства). Вам необходимо изменить шаблон файла, чтобы он соответствовал всем желаемым файлам: *.html, *.js а также *.css в разных папках, используемых в качестве источников, потому что вы хотите изменить сгенерированные файлы. Используя шаблоны глобуса узла, вы можете легко сопоставлять файлы по расширению файла, передавая массив шаблонов файлов, чтобы сопоставлять разные файлы в разных папках.

Затем просто добавьте gulpIf условие для html Задачи файлов для фильтрации нужного типа файлов (у вас уже есть функция фильтра для других типов файлов).

Надеюсь, поможет.